月別記事一覧実装後のバグ解決 その2

セレクトボックスのカラーがダークモードでデフォルトになっている その2 · Issue #48 · tagucch/random.tagucch.dev

昨日の修正で直ったと思ったら、シークレットモードで起動したときの挙動がまだバグっていた。

セレクトボックスのカラーがダークモードでデフォルトになっている · Issue #46 · tagucch/random.tagucch.dev

↑にyamanokuさんが追記してくれた。本当に頭が上がらないです……。

シークレットモードで起動して同様にデバッグしてみたところ、const { theme } = useTheme()でundefinedを取得していると思ったら'system'という名前を取得していた。これはThemeProviderの設定を変更した自分のせいです。

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

READMEから解決方法を探したら、resolvedThemeというstateがuseTheme()から提供されているのが分かった。

これを使えば確実に'light' or 'dark'の文字列が取得できるため、条件分岐に使う値をresolvedThemeに変更して解決。

これで一件落着のはず。