Chakra UI 在夜間模式 Dark Mode 的實作的思維邏輯，跟 Vuetify 有所不同。這邊筆記下內容。
![[筆記] Chakra UI v2 的夜間模式 Dark Mode 的思維模式](https://smlpoints.com/wp-content/uploads/chakra-ui-logo.jpg "[筆記] Chakra UI v2 的夜間模式 Dark Mode 的思維模式"){kind=logo}
內容
Chakra UI 是 React 生態系中相當知名的一套 Styleless UI 框架。若你有用過 Tailwind CSS 之類的玩意的話，那對於這套的操作上手應該不會花太久時間。不過其 Theme 主題的夜間模式設定有一些邏輯怕忘記，就先寫下來。
1. 夜間模式和一般模式是「共用色盤」，而不是兩套色盤設定
Vuetify 是可以分別設置一般模式和夜間模式的顏色設定，然後在按鈕切換時系統會自動將底色切換。Chakra UI 則是你需要自行定義每一個 ColorScheme 或是每一個 Component 其在一般模式和夜間模式是用「同一個色盤的某個顏色」
2. 每個主題都有自身的狀態 ( 夜間模式和一般模式 )
3. 可透過 <ColorModeScript /> 將其主題狀態暫存到 localStorage 中，但若切換主題的話，目前不知道每個主題的狀態會是如何保存
4. 色盤設定可以用 https://palette.saas-ui.dev/
參考資料
1. Chakra UI Heading
2. Can you use Chakra-UI’s colorMode to change the background color to any color or is it only for light and dark mode?
3. https://ithelp.ithome.com.tw/articles/10295618
