[指南] Vuetify 2 Dark Mode 配色設定與一些細節

章節連結

知名的 Vuetify 框架中,有內建 Dark Mode 的功能,開發者也可以針對其顏色進行一番設定。這邊筆記下針對不同的情境,其設定檔的處理方式。
vuetify


說明

根據官方文件說法,預設主色和你所宣告的其他主色,都會預設生成 base, light1~5, dark 1~4 共 10 種顏色供你使用。預設的主色 key 為:primary, secondary, accent, error, info, success, warning 七個。

A. Dark & Light Mode 僅修改主色內容

在設定檔寫入你想要修改的 Hex 色碼,將其覆蓋即可。若你沒有寫的部分,那就會照預設值生成

B. Dark & Light Mode 新增額外的主色 key

直接宣告即可

C. 不想要自動生成的 light1~5, dark1~4

你可以直接宣告一組完整的 List。若在切換色彩模式時,match 不到,Vuetify 會自動切回 base。換言之,你一定要宣告一組 base ,才不會造成錯誤。

D. 在 root 中開啟 CSS custom properties ( aka “CSS variables” )

在 opts.theme.options.customProperties 設為 true 即可。不過此功能 IE11 不支援,需要安裝額外的 polyfill

程式碼範例


參考資料

1. Expose theme colors to css variables in vuetify not working
2. Theme configuration

按讚加入粉絲團

延伸閱讀