知名的 Vuetify 框架中，有內建 Dark Mode 的功能，開發者也可以針對其顏色進行一番設定。這邊筆記下針對不同的情境，其設定檔的處理方式。
說明
根據官方文件說法，預設主色和你所宣告的其他主色，都會預設生成 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
