Chakra UI カラーモードの設定について
はじめに
Chakra UIのバージョン 1.6.12 を使っていたときに、意図せずコンポーネントがダークモードになっていたことがありました。調べてみると、1.6.12 では常にシステムのカラーモードを強制する 不具合 があるようでした。
Chakra UIが提供するほとんどのコンポーネントはデフォルトでダークモードに対応しています。この挙動に遭遇するまでChakra UIのカラーモードの設定をとくに意識することなく利用していたので、あらためてドキュメントを読み直しつつ、遭遇した不具合について整理しました。
バージョン
Chakra UI 1.6.12
カラーモードについて
まずはドキュメントです。カラーモードのセットアップ方法や概要など、以下のページに記載されています。
遭遇した不具合について
システムのカラーモードが強制不具合について以下のIssueがありました。
対応方法
この不具合修正のPRは反映されているようでした。Chakra UIのバージョンを最新にしたら今回の事象は解消されそうです。
PRの内容を読むと、Chakra UIの最新のバージョンだとカラーモードのコンフィグの設定が壊れていて、一時的に壊れてないバージョンに固定する対応をしているようでした。
The latest version of chakra-ui breaks any configuration for color mode in chakra and always forces the system theme.
Our dependency upgrade workflow introduced this version and has caused visual issues for multiple users. Pinning the version should solve this for the time being until chakra-ui fixes the issue on their end
Discussion