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])