概要

いつの間にかダークモードが標準装備が当たり前になってきました。（主にモバイルアプリなどで）

就寝前などの夜間には目に優しくユーザーに疲れさせない

という理由がメインの理由ですが、以下のような理由で導入が進んでいるような気がします。

なんとなく黒ベースがかっこよくておしゃれ
対応していないアプリは時代遅れ感を感じる

弊社で開発中のNuxtJSベースのWebアプリにも導入しようと思い、調査して実装を行いました。

前提

• NuxtJS
• Tailwind CSS

の２つのフレームワークを利用しています。

実装内容

@nuxt/color-modeとtailwindcss-dark-modeを使ってNuxtJSのサイトにダークモードの対応を行いました

パッケージのインストール

% yarn add @nuxtjs/color-mode
% yarn add tailwindcss-dark-mode

nuxt.config.jsの編集

  buildModules: [
    '@nuxtjs/color-mode',  // この行を追加
  ],

tailwind.config.jsの編集

module.exports = {
  purge: {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}',
    ],
    options: {
      safelist: [/^bg-/, /^hover:bg-/, /^text-/, /^hover:text-/, 'dark-mode'],  // 'production buildでcssの定義が消されないように、dark-modeを追加'
    },
  },
  theme: {
    darkSelector: '.dark-mode',  // この行を追加
  },
  // variantsにdark系のものを追加
  variants: {
    backgroundColor: [
      'hover',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',
      'dark-odd',
    ],
    borderColor: [
      'focus',
      'dark',
      'dark-disabled',
      'dark-focus',
      'dark-focus-within',
    ],
    textColor: [
      'hover',
      'dark',
      'dark-hover',
      'dark-active',
      'dark-placeholder',
    ],
  },
  plugins: [
    require('tailwindcss-dark-mode')(),  // この行を追加
  ],
}

各ページでの実装

• 以下のように
  • dark:bg- でダークモードの時の背景色の色を指定
  • dark-hover:bg- でダークモードの時のhoverした時の背景色の色を指定
  • dark:border- でダークモードの時のボーダーの色を指定
  • dark:text-gray-200 でダークモードの時のテキストの色を指定

<div class="bg-white dark:bg-gray-800">
  <button
    class="rounded-md px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 hover:bg-gray-50 dark-hover:bg-gray-600 text-gray-700 dark:text-gray-200"
  >
    click me
  </button>
</div>

便利でした。

参考リンク

• Documentation - Nuxt Color Mode
• ChanceArthur/tailwindcss-dark-mode: 🌚 A Tailwind CSS plugin that adds variants for dark mode