嗨咿，我是 illumi！繼續昨天設定的晝夜模式按鈕，今天要把顏色都定義好。不用看著 UI 的 稿一個一個對照，一鍵下載！

用 Figma Material 色票 接到 Tailwind + CSS Variables，實現 晝夜模式切換，就算沒有美感也可以成為配色大師。

STEP 1. 從 Figma Material 選顏色匯出

打開 Figma 插件 Material Theme Builder，可以填入Source Color 來生成 secondary等等，(可能不會太好看，且顏色會跑掉，一定要調整）也可以手動調整 Secondary、Tertiary……，按下 Update 後你會拿到一整組配色：

• Primary（主色）
• Secondary（輔色）
• Tertiary（第三色）
• Background / Surface

……等等

但晝夜模式如果用完全相同的顏色，在某在模式就會對比度不夠，怎麼辦呢？

可以挑 飽和度夠高的色，才不會白天還行、晚上直接暗到看不到～

這樣就能在兩種模式下都保有辨識度。

按下 Export > Material Theme 會得到 material-theme.json

{
    "description": "TYPE: CUSTOM\nMaterial Theme Builder export 2025-09-22 10:48:05",
    "seed": "#6750A4",
    "coreColors": {
        "primary": "#6750A4",
        "secondary": "#958DA5",
        "tertiary": "#B58392",
        "error": "#E46962",
        "neutral": "#938F96",
        "neutralVariant": "#938F99"
    },
    "extendedColors": [],
    "schemes": {
        "light": {
            "primary": "#65558F",
            "surfaceTint": "#6750A4",
            "onPrimary": "#FFFFFF",......

STEP 2. 放到 :root 與 .dark

拿到顏色後，我們先在 index.css 定義一組 CSS Variables：

:root {
  --background: #ffffff;
}

.dark {
  --background: #1a1a1a;
}

這樣一來，切換 .dark class 的時候，整套顏色就會被覆蓋。

STEP 3. 在 Tailwind @theme inline 對照

接下來到 index.css，把這些變數對應到 Tailwind：

@theme inline {
      background: "var(--background)",
      primary: "var(--primary)",
}

有了這段，之後你就能在元件裡直接這樣用：

<div className="bg-background ">
  <button className="bg-primary hover:bg-secondary">
    點我試試！
  </button>
</div>

在一些插件無法寫入 className 時就用 var(--primary)

STEP 4. Redux / 狀態管理接上

在 App 的入口加上：

<Layout className={isDarkMode === "dark" ? "dark" : ""}>
  <YourComponent />
</Layout>

當 Redux（或系統偏好）改變 isDarkMode，Tailwind + CSS Variables 就會自動切換，所有元件瞬間同步

醬就完成啦～ 我們明天見～