Nuxt color-mode + tailwindcssでテーマ切り替え

最近多くなってきたスマホやPCのダークモード対応

このQuick way to add darkmode in Nuxt.js & Tailwindcss project— Corona Virus Trackerを参考に。

まず yarn add -D @nuxtjs/color-mode tailwindcss-dark-mode します。

そして
nuxt.config.js

export default {
  ...
  buildModules: [
    ...
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    ...
  ],
  ...
  purgeCSS: {
    whitelist: ['dark-mode', 'system', 'light-mode'],
  },
}

Nuxt also includes purgeCSS when we installed the TailwindCSS framework, which auto removes unused css, since we are adding dark selector classes manually, we need to whitelist them in our nuxt config

らしいので念の為すべてをpurgeCSSに追加してます。
yarn dev すると
html class='light-mode' や html class='dark-mode' が付与されるので適宜css追加したり tailwindcssのプレフィックスを使用して class='dark:bg-red-600 bg-red-100' 当指定してあげれば切り替えることが出来ます。

又、computedを使用すればsvg等のfillの色を変えたりも出来ます。

  computed: {
    logoColor() {
      // オブジェクトで:style="logoColor"に渡してあげる
      return { fill: this.$colorMode.value === 'light' ? 'black' : 'white' }
    },
  },

追記

vscodeでtailwindcss使うならTailwind CSS IntelliSenseが凄く便利です。