tailwind/typographyをダークモードに対応する

@tailwind/typographyは現時点(v0.3.1)ではダークモードに対応してなさそうなので、対応させてみる。media queryを使った手法。

tailwind.config.jsに設定を追加

const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: "media",
  theme: {
    colors: {
      gray: {
        50: "var(--colors-50)",
        100: "var(--colors-100)",
        200: "var(--colors-200)",
        300: "var(--colors-300)",
        400: "var(--colors-400)",
        500: "var(--colors-500)",
        600: "var(--colors-600)",
        700: "var(--colors-700)",
        800: "var(--colors-800)",
        900: "var(--colors-900)",
      },
      originalGray: colors.coolGray,
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

現時点ではcolors.grayのパラメーターを参照しているそうなので、CSS variablesに置き換える。 メディアクエリの手法なので darkMode: "media"も追加しておく。

ちなみに上記では標準のgrayを上書きしているが、元のgrayのカラーパレットも参照したかったので、originalGrayとして残している(grayとしてマッピングされているのはcoolGrayのようだ)。

theme.extends.colorsでの定義は後述のCSS Variablesで使用したときに循環参照してしまうので避けた。他のデフォルトカラーパレットも参照したいときはtailwindcss/defaultThemeをrequireして、...defaultTheme.colorsをtheme.colorsの一番最初に書くと良い。

CSS Variablesを定義する

@tailwind base;
@tailwind components;

:root {
  --colors-50: theme("colors.originalGray.50");
  --colors-100: theme("colors.originalGray.100");
  --colors-200: theme("colors.originalGray.200");
  --colors-300: theme("colors.originalGray.300");
  --colors-400: theme("colors.originalGray.400");
  --colors-500: theme("colors.originalGray.500");
  --colors-600: theme("colors.originalGray.600");
  --colors-700: theme("colors.originalGray.700");
  --colors-800: theme("colors.originalGray.800");
  --colors-900: theme("colors.originalGray.900");
}

@media (prefers-color-scheme: dark) {
  :root {
    --colors-50: theme("colors.originalGray.900");
    --colors-100: theme("colors.originalGray.800");
    --colors-200: theme("colors.originalGray.700");
    --colors-300: theme("colors.originalGray.600");
    --colors-400: theme("colors.originalGray.500");
    --colors-500: theme("colors.originalGray.400");
    --colors-600: theme("colors.originalGray.300");
    --colors-700: theme("colors.originalGray.200");
    --colors-800: theme("colors.originalGray.100");
    --colors-900: theme("colors.originalGray.50");
  }
}

@tailwind utilities;

ここではプラグインのデフォルトの表示に近いよう、上記でoriginalGrayと定義したものを利用してテーマカラーを参照するようにしている。ダークモードの色は面倒なのでここでは元の逆の定義にするようにした。

以上でいい感じにダークモードが当たるようになる。

なお、bodyの背景は通常状態でbd-gray-50を当てたが、ダークモード時の色が気に入らなかったので、tailwind.config.jsのtheme.colorsにtailwindcss/colorsにあるtrueGrayを差し込んで、dark:bg-trueGray-700を追加することでダークモード時の色を再定義するようにした。