開發 SaaS 或多用戶專案時，經常需要根據使用者的品牌顏色動態變更介面主題。本文記錄如何利用 Tailwind CSS 4 的新特性，結合 Vue Composable 實作一個自動切換 Light/Dark Mode 且具備「語義化別名」的動態色彩系統。
內容
思路
1. 資料驅動顏色：透過 Composable 從 API 獲取顏色數值
2. CSS 變數注入：將顏色寫入 :root 的 CSS 變數中（如 –brand-main）；語意化的顏色名，亦可同時寫入 ( 如 –brand-btn-bg )；需衍生計算得來、配合 dark mode 變化的就不必了。
3. 語義化命名：在 Tailwind CSS 配置中，將原始顏色、語意化的顏色名寫入 @theme 設定
程式碼
參考資料
1. Dark mode Using variants to style your site in dark mode.
按讚加入粉絲團
