Skip to main content

theme 的實作技巧

🌑 dark mode​

這段 CSS：

:root {
  color-scheme: light;
}
.my-app-dark {
  color-scheme: dark;
}

是在設定 瀏覽器的預設 UI 色彩傾向（scrollbar、表單元件等），也可能影響某些使用 currentColor 的元件表現，但它本身不會改變你的網站主題或 PrimeVue 的樣式，除非你搭配 CSS 變數和其他樣式邏輯來一起使用。

:root {
  color-scheme: light;
}
  • 這是預設的 color-scheme。
  • 會告訴瀏覽器「你應該用淺色（light）風格渲染像是：
    • <input>、<select> 等原生元件
    • scrollbars
    • 系統介面元素」
.my-app-dark { color-scheme: dark; }
  • 當某個元素（例如 ）有這個 class 時，瀏覽器會用 dark 模式風格渲染原生元素。

🧪 範例應用​

你可能會搭配主題切換來使用這段 CSS：

<!-- dark 模式 -->
<body class="my-app-dark">...</body>
.my-app-dark {
  color-scheme: dark;
  --surface-color: #1e1e1e;
  --text-color: #ffffff;
  /** 覆蓋更多自訂變數 */
}

這樣就能搭配 color-scheme 改變瀏覽器渲染方式，同時透過自訂變數控制你的主題外觀。

🎯 什麼是 :root & var(--customer-color) ?​

:root

:root 是一個特殊的 CSS 選擇器，它選擇的是 HTML 文件的根元素，也就是 <html>。

它的特色在於：設定在 :root 中的 CSS 變數會有全域作用域，可以在整個網站的 CSS 中使用。

var()

var(--xxx) 是 CSS 變數的語法，你可以把 CSS 變數當成是「CSS 版的變數或常數」。

🔧 範例：一起看​

:root {
  --primary-color: #4dc9b0;
  --text-color: #ffffff;
}

然後在你的其他 CSS 中可以這樣使用它們：

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

這樣做的好處：

  1. 集中管理樣式：你只要改 :root 的值，整站顏色就變了。
  2. 方便做主題切換：只要加個 class 就能切換整個網站的顏色（下一段會展示）。

🌗 搭配 dark mode 使用​

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body.dark {
  --background-color: #121212;
  --text-color: #eeeeee;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

只要在 <body> 上加 .dark class，就會變成深色模式！

✅ 總結​

概念說明
:root全域 CSS 變數的定義區域
--xxxCSS 變數命名方式
var(--xxx)使用該變數的語法

這讓你的網站更模組化、易維護、超方便切換主題風格 🚀