Tailwind CSS と next-themes でお手軽 DarkMode 実装

repo_url

date

Oct 23, 2021

thumbnail_url

slug

dark-mode

status

Published

tags

tech

summary

あの切り替えられるやついいな〜と思って試してみたら、あっという間でした！

type

Post

outer_link


yarn add next-themes

GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

https://github.com/pacocoursey/next-themes

動的に制御するために class で制御するように指定

media だとOS の設定で自動で変えてくれる


const tailwindConfig = {
  darkMode: 'class',
  ...
};

ThemeProvider でも指定、デフォルトのテーマを dark にしておく（自分は dark が推しなので）


import { NextPage } from 'next';
import { ThemeProvider } from 'next-themes';
import type { AppProps } from 'next/app';

const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark">
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

どこか変えたいところで以下を設置


import { useTheme } from 'next-themes';

export const ThemeChanger: React.VFC = () => {
  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>
  );
};

↑ をアイコンつけて切り替えるようにしてみると


import { useTheme } from 'next-themes';
import { SunIcon } from '@heroicons/react/solid';
import { MoonIcon } from '@heroicons/react/solid';

export const ThemeChanger: React.VFC = () => {
  const { theme, setTheme } = useTheme();

  const handleSetTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      The current theme is: {theme}
      <button className="block p-1 bg-black dark:bg-white rounded-full" onClick={handleSetTheme}>
        {theme === 'light' ? <MoonIcon className="w-5 h-5 text-white" /> : <SunIcon className="w-5 h-5 text-black" />}
      </button>
    </div>
  );
};

こんな感じあっという間に実装できてしまいました！！

LocalStorage に theme を保存しておいて、更新したら反映させてそこをもとに class が dark になったらり light になったりとしており、そこをもとに Tailwind CSS は dark:~ のスタイルがあたる形になってるかなと！

next-themes/index.tsx at master · pacocoursey/next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - next-themes/index.tsx at master · pacocoursey/next-themes

https://github.com/pacocoursey/next-themes/blob/master/index.tsx

Dark Mode - Tailwind CSS

Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design.

https://tailwindcss.com/docs/dark-mode

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

https://heroicons.com/