:root 從根開始掌控全局變數

16th鐵人賽 root css dark mode prefers-color-scheme

Lala Code

2024-10-05 01:22:34

67 瀏覽

分享至

:root

:root 選擇器主要用來針對 HTML 文件的根元素（即 <html>），這與直接使用 html 元素選擇器有些許不同。兩者雖然選擇的都是同一個元素，但 :root 擁有比 html 更高的優先權，因此，:root 選擇器通常會用來定義全局變數，特別是在需要隨時調整樣式時非常方便。

💠`:root` 基本用法

語法

:root {
	--變數名稱: 變數值;
}

範例

:root {
  --primary-color: #3498db;
  --text-color: #2d3436;
}

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

通過在 :root 中定義變數，可以將樣式統一管理，當需要調整時，只需要修改變數值，整個網站的相應樣式就會自動更新。

💠實務應用一：統一管理顏色變數

一起試試：[CODEPEN]

在一個網站中，會有主色、次色或更多其他的顏色，在一開始時我們可以這樣寫

<header>
  <h1>Lala Code</h1>
</header>

<main>
  <article>
    <h2>如何提升前端技能</h2>
    <p>隨著技術的快速發展，前端工程師需要不斷提升自己的技能。以下是幾個有效的學習方法：</p>
    <ul>
      <li>參加線上課程和工作坊</li>
      <li>實踐專案，增強實務經驗</li>
      <li>參與開源項目，與其他開發者合作</li>
    </ul>
    <p>持續學習是提升前端技能的關鍵，無論是技術知識還是實踐經驗，都需要投入時間和精力。</p>
  </article>
</main>

<footer>
  <p>版權所有 © 2024 Lala Code</p>
</footer>

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

header {
  background-color: #ffeaa7;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
  color: #2d3436;
}

main {
  padding: 20px;
}

article {
  background-color: #f9f9f9;
  color: #2d3436;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: #ffeaa7;
  padding: 10px;
  text-align: center;
  color: #2d3436;
}

footer p {
  margin: 0;
}

網頁中的顏色有很多重複使用的狀況，我們可以將所有顏色統一抽出來，放到 :root 中統一管理

:root {
  --primary-color: #f9f9f9;
  --secondary-color: #ffeaa7;
  --text-color: #2d3436;
  --background-color: #ffffff;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
}

header {
  background-color: var(--secondary-color);
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
  color: var(--text-color);
}

main {
  padding: 20px;
}

article {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: var(--secondary-color);
  padding: 10px;
  text-align: center;
  color: var(--text-color);
}

footer p {
  margin: 0;
}

:root

💠實務應用二：支援 Light Mode 和 Dark Mode

一起試試：[CODEPEN]

隨著系統設置的暗色模式變得越來越普遍，我們可以通過 @media (prefers-color-scheme) 媒體查詢來實現自動的主題切換。這樣用戶的瀏覽器將根據系統設定自動選擇合適的樣式。

設定CSS主題媒體查詢

Light Mode (淺色模式)

@media (prefers-color-scheme: light)

Dark Mode (暗色模式)

@media (prefers-color-scheme: dark)

如果沒有明確設定 prefers-color-scheme 的 CSS 規則，那麼瀏覽器會默認使用 Light mode 的設計，也就是你在 :root 中定義的顏色。例如：

:root {
  --primary-color: #f9f9f9;
  --secondary-color: #ffeaa7;
  --text-color: #2d3436;
  --background-color: #ffffff;
}

這樣的設定會被視為 Light mode 的預設值。

我們拿剛剛的範例來做調整，加上 Dark mode 會呈現的顏色

:root {
  --primary-color: #f9f9f9;
  --secondary-color: #ffeaa7;
  --text-color: #2d3436;
  --background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #6d5a43;
    --secondary-color: #774100;
    --text-color: #e2dfd5;
    --background-color: #333;
  }
}

因為我們已經把所有顏色放在 :root 管理，其他地方的 CSS 就無需要再做任何改變