💭

開発環境でChakra-uiでinitialColorModeが機能しない

2022/12/06に公開約500字

ローカルで開発している際にinitialColorModeが機能せずに常に「Light」モードになってしまっていたので調べた所、下記で解決したので一応記載。(私はNext.jsで開発してました。)

chakra-uiのcolor-modeはローカルストレージに保存されており、そこを参照している。
ただしなぜか以前の実行から固定になってしまっているので、一度手動で削除してやると解決する。

ローカル ストレージからcolor-modeを削除する手順

  1. アプリを開きます (localhost:3000)
  2. 開発者ツールを開きます (F12 or Ctrl +Shift + C)。
  3. アプリケーションをクリック
  4. ローカルストレージ配下のlocalhost:3000をクリック
  5. chakra-ui-color-modeがあるはずなので、右クリックから削除を選択
  6. ブラウザを更新します

initialColorModeで設定したカラーに変わるはずです。

参考

https://github.com/chakra-ui/chakra-ui/issues/5267

Discussion

ログインするとコメントできます