💭
開発環境でChakra-uiでinitialColorModeが機能しない
ローカルで開発している際にinitialColorModeが機能せずに常に「Light」モードになってしまっていたので調べた所、下記で解決したので一応記載。(私はNext.jsで開発してました。)
chakra-uiのcolor-modeはローカルストレージに保存されており、そこを参照している。
ただしなぜか以前の実行から固定になってしまっているので、一度手動で削除してやると解決する。
ローカル ストレージからcolor-modeを削除する手順
- アプリを開きます (localhost:3000)
- 開発者ツールを開きます (F12 or Ctrl +Shift + C)。
- アプリケーションをクリック
- ローカルストレージ配下のlocalhost:3000をクリック
- chakra-ui-color-modeがあるはずなので、右クリックから削除を選択
- ブラウザを更新します
initialColorModeで設定したカラーに変わるはずです。
参考
Discussion