<p>タイトルの通りです。Next.jsとTailwindCSSを使用してダークモードを実装してみたので、その備忘録になります。<br>ライブラリはテーマの切替・管理に<a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">next-themes</a>を使用しました。</p><p>まずはライブラリをインストール</p><pre><code class="language-zsh">npm install next-themes</code></pre><p>次に<code>_app.tsx</code>にnext-themesの<code>provider</code>を設置する。</p><p><code>attribute</code>を<code>class</code>にするとルート要素（<code>html</code>）に<code>dark</code>クラスが付与される。（デフォルトは<code>data-theme</code>属性）</p><p>OSの環境設定に基づいてライトとダークを切り替えるようにする場合は<code>enableSystem</code>を<code>true</code>にする。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;ThemeProvider attribute=&apos;class&apos; enableSystem={true}&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ThemeProvider&gt;
  );
};

export default MyApp;</code></pre></div><p>次に<code>tailwind.config.js</code>にダークモードを利用するように設定する。指定は<code>media</code>と<code>class</code>があるが、今回は<code>class</code>で切替を行うので<code>class</code>を指定。<br><code>media</code>を指定した場合はOSの環境設定に基づいて設定される。</p><div data-filename="tailwind.config.js"><pre><code class="language-javascript">module.exports = {
  darkMode: &apos;class&apos;,
  ...</code></pre></div><p>ひとまずこれでダークモードの適用は完了で、TailwindCSSで指定してあげる場合は接頭辞に<code>dark:</code>をつける。</p><div data-filename="_document.tsx"><pre><code class="language-typescript">import { Html, Head, Main, NextScript } from &apos;next/document&apos;;

const Document = () =&gt; {
  return (
    &lt;Html&gt;
      &lt;Head /&gt;
      &lt;body className=&apos;dark:bg-primary-950 dark:text-body-white&apos;&gt; // ダークモード用の記述
        &lt;Main /&gt;
        &lt;NextScript /&gt;
      &lt;/body&gt;
    &lt;/Html&gt;
  );
};

export default Document;</code></pre></div><p>次にダークモード用の切替ボタンを作成する。こちらもライブラリを<code>import</code>して現在の<code>theme</code>がどちらなのかを判定してボタンを切り替える。</p><div data-filename="ChangeThemeButton.tsx"><pre><code class="language-typescript">import { useEffect, useState } from &apos;react&apos;;
import { useTheme } from &apos;next-themes&apos;;
import { BsSunFill, BsMoonStarsFill } from &apos;react-icons/bs&apos;;

export const ChangeThemeButton: React.FC = () =&gt; {
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState&lt;boolean&gt;(false);

  useEffect(() =&gt; {
    setMounted(true);
  }, []);

  useEffect(() =&gt; {
    if (mounted &amp;&amp; theme === &apos;system&apos;) {
      setTheme(`${resolvedTheme}`);
    }
  }, [mounted]);

  return (
    &lt;button
      className=&apos;rounded-full p-2 transition duration-300 hover:scale-110 hover:bg-secondary-50 dark:hover:bg-secondary-900&apos;
      type=&apos;button&apos;
      aria-label={mounted ? (theme === &apos;dark&apos; ? &apos;ダークモード&apos; : &apos;ライトモード&apos;) : &apos;テーマ切り替え&apos;}
      onClick={() =&gt; setTheme(theme === &apos;dark&apos; ? &apos;light&apos; : &apos;dark&apos;)}
    &gt;
      {mounted &amp;&amp; (
        &lt;&gt;{theme === &apos;dark&apos; ? &lt;BsSunFill size={&apos;18px&apos;} /&gt; : &lt;BsMoonStarsFill size={&apos;1.2rem&apos;} /&gt;}&lt;/&gt;
      )}
    &lt;/button&gt;
  );
};

export default ChangeThemeButton;
</code></pre></div><p>初回は<code>theme</code>の<code>value</code>が<code>system</code>になるので、そこを初回+<code>theme</code>が<code>system</code>の場合に<code>resolveTheme</code>を使用して<code>dark</code>か<code>light</code>モードかを判別して、<code>setTheme</code>に格納してます。</p><p>あとは<code>theme</code>の値に合わせて切替を行うみたいな感じです。以上！</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">https://github.com/pacocoursey/next-themes</a></p><p><a href="https://zenn.dev/taka_shino/articles/a6c176da799c91" target="_blank" rel="noopener noreferrer nofollow">https://zenn.dev/taka_shino/articles/a6c176da799c91</a></p><p><a href="https://yokinist.me/dark-mode" target="_blank" rel="noopener noreferrer nofollow">https://yokinist.me/dark-mode</a></p>

Next.jsとTailwindCSSを使用してダークモードを実装したのでその備忘録。next-themesライブラリを使用してダークモードの切替ボタンの作成までメモ。

TailwindCSSに関連する記事一覧

Next.jsとTailwindCSSでダークモードを実装する