next-themes でテーマをトグルする

next-themes では system が選ばれているときの実際のテーマを取得するために useTheme() から resolvedTheme を受け取れる。

const { resolvedTheme, setTheme } = useTheme()

この値をもとに setTheme() に渡す引数を切り替えることでテーマをトグルできるようになる。例えば、cmdk から行う場合は次のようになる。

<Command.Item
  onSelect={() => {
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
    setOpen(false)
  }}
>
  Toggle Theme
</Command.Item>

reference

Footnote