ダークモード | UI

ダークモードとは#

TwitterやYouTubeをはじめ、昨今のアプリケーションはWebアプリもモバイルアプリもダークモードを持つことが増えています。ダークモードにより全体的なトーンが暗くなるので人によっては目が疲れにくくなったり、端末の消費電力も抑えられます。

工数に余裕があればダークモードは積極的に採用しましょう。

next-themesを使用する#

next-themesを使うと簡単にダークモードの管理ができます。また、ユーザーがモードを変更した場合自動的にブラウザに記憶されるようになります。

インストール#

ターミナル
npm install next-themes

実装#

_app.tsx の中で <ThemeProvider> で全体を囲みます。

pages/pages/_app.tsx
import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

テーマの使用、変更は以下のように行います。

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

useTheme() により現在のテーマと、変更用のメソッドを呼び出せます。

オプション#

ThemeProvider にオプションを与えることで挙動をカスタマイズできます。

オプション	推奨値	説明
defaultTheme	system	デフォルトのテーマを設定(light or dark or system)
enableSystem	false	システム標準のテーマカラーを有効にするか
attribute	class	テーマをどのようにHTMLに反映するか

<ThemeProvider enableSystem={false} attribute="class">
  <Component {...pageProps} />
</ThemeProvider>

Tailwind CSS との連携#

設定ファイルの更新#

Tailwind CSS 導入後に作成される設定ファイルでダークモードを有効にしてください。 darkMode: 'class' を追加します。

tailwind.config.js
module.exports = {
  darkMode: 'class' // 追加
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

ダークモード時のデザイン設定#

以下のように dark バリアントをつけることでダークモード時のデザインを指定できます。この例では通常時は文字色が黒ですがダークモードの際は白文字になります。

<button className="text-black dark:text-white" />

記事のダークモード#

@tailwindcss/typographyを使うと簡単に記事の装飾ができますが、記事全体にダークモードを適用したい場合以下のように設定できます。

<article class="prose dark:prose-invert">
  記事本文
</article>

dark:prose-invert により特に細かく指定しなくても記事のダークモード対応が完了します。