Daisy UI ダークモードとライトモードの簡単な切り替えの実装

React + Tailwind CSS プロジェクト、他の言語でも同じですが、 html タグの data-theme 属性を変更するだけです。

import { useEffect } from 'react'
import { useState } from 'react'

export function ThemeToggle() {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))

  useEffect(() => {
    document.querySelector('html').setAttribute('data-theme', theme)
  }, [theme])

  return (
    <label className="swap swap-rotate">
      <input onClick={toggleTheme} type="checkbox" />
      <span className="i-lucide-sun swap-on size-6" />
      <span className="i-lucide-moon swap-off size-6" />
    </label>
  )
}

ユーザーの選択を記憶したい場合は、 localStorage から theme を取得し、ユーザーが変更したときにその値を保存できます。

const [theme, setTheme] = useState(localStorage.getItem('theme') ?? 'light')

useEffect(() => {
  // ...
  localStorage.setItem('theme', theme)
}, [theme])