什麼是 currentColor？

currentColor 是 CSS 中的一個關鍵字，表示當前元素的 文字顏色（即 color 屬性的值）。它可以用在任何接受顏色的 CSS 屬性中，例如 background-color、border-color、SVG 的 fill 或 stroke 等。它的好處是能讓你重複使用元素的文字顏色，減少重複定義顏色的麻煩，特別適合在設計一致性或主題化時使用。

簡單來說：

如果你設定了元素的 color: red;，那麼 currentColor 就會等於 red。
如果父元素有 color，子元素會繼承這個值，currentColor 也會跟著使用父元素的顏色。

currentColor 的使用場景

統一顏色風格：當你希望某個屬性（例如邊框或背景）跟文字顏色保持一致時。
簡化代碼：避免重複指定顏色值，提升代碼可維護性。
動態主題：在主題切換（例如暗黑模式）時，currentColor 會自動適應當前的文字顏色。
SVG 圖標：常用於 SVG 的 fill 或 stroke，讓圖標顏色與文字顏色同步。

詳細操作步驟與範例

以下是一個完整的範例，展示如何在 HTML 和 CSS 中使用 currentColor，並搭配 JavaScript 動態改變顏色，讓你理解它的實際應用。

範例 1：基本使用 currentColor（靜態）

假設我們要做一個按鈕，當按鈕的文字顏色改變時，邊框和背景也跟著變成相同的顏色。

步驟 1：建立 HTML 結構

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>currentColor 範例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button class="my-button">點我！</button>
</body>
</html>

步驟 2：撰寫 CSS 樣式

在 styles.css 中，使用 currentColor 讓按鈕的邊框和懸停時的背景顏色與文字顏色一致。

.my-button {
  /* 設定文字顏色 */
  color: #3498db; /* 藍色 */
  /* 使用 currentColor 作為邊框顏色 */
  border: 2px solid currentColor;
  /* 其他樣式 */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: none;
  transition: background-color 0.3s;
}

/* 當滑鼠懸停時，背景使用 currentColor */
.my-button:hover {
  background-color: currentColor;
  color: white; /* 懸停時文字變白 */
}

說明：

color: #3498db; 設定按鈕的文字顏色為藍色。
border: 2px solid currentColor; 讓邊框顏色跟文字顏色相同（藍色）。
當滑鼠懸停時，background-color: currentColor; 讓背景也變成藍色。
因為懸停時文字顏色變成白色（color: white;），currentColor 會跟著變成白色，但這不影響已設定的背景顏色（背景顏色在懸停時已經應用）。

效果：

按鈕平常顯示藍色文字和藍色邊框。
滑鼠懸停時，按鈕背景變成藍色，文字變成白色。

範例 2：搭配 JavaScript 動態改變顏色

為了讓你更清楚 currentColor 的動態特性，我們用 JavaScript 動態改變文字顏色，觀察邊框和背景如何自動跟隨。

步驟 1：修改 HTML，加入一個改變顏色的按鈕

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>currentColor 動態範例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button class="my-button">點我！</button>
  <button onclick="changeColor()">改變顏色</button>
  <script src="script.js"></script>
</body>
</html>

步驟 2：撰寫 CSS 樣式

.my-button {
  color: #3498db; /* 初始藍色 */
  border: 2px solid currentColor;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: none;
  transition: background-color 0.3s, color 0.3s;
}

.my-button:hover {
  background-color: currentColor;
  color: white;
}

步驟 3：撰寫 JavaScript 程式碼

在 script.js 中，撰寫一個函數隨機改變按鈕的文字顏色：

function changeColor() {
  // 隨機生成顏色
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  // 選取按鈕並改變其 color 屬性
  const button = document.querySelector('.my-button');
  button.style.color = randomColor;
}

說明：

Math.random() * 16777215 生成隨機數字，轉成十六進位，產生隨機顏色（例如 #ff5733）。
當點擊「改變顏色」按鈕時，.my-button 的 color 屬性會改變。
由於邊框使用 currentColor，邊框顏色會自動跟隨新的文字顏色。
懸停時，背景也會使用當前的 currentColor（即新的隨機顏色）。

效果：

每次點擊「改變顏色」按鈕，按鈕的文字和邊框會變成隨機顏色。
懸停時，背景會跟隨當前的文字顏色，保持一致。

範例 3：應用在 SVG 圖標

currentColor 特別常用於 SVG 圖標，讓圖標顏色與文字顏色同步。

步驟 1：建立 HTML 包含 SVG

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>currentColor 與 SVG</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="icon-container">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5v-2l-10 5-10-5v2z"/>
    </svg>
    <span>這是一個圖標</span>
  </div>
</body>
</html>

步驟 2：撰寫 CSS 樣式

.icon-container {
  color: #e74c3c; /* 紅色 */
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

說明：

SVG 的 fill="currentColor" 會使用父元素 .icon-container 的 color 值（紅色）。
因此，圖標和旁邊的文字都會顯示為紅色。
如果你改變 .icon-container 的 color（例如改成 color: blue;），圖標和文字顏色會同步變成藍色。

常見問題與解答

什麼時候適合用 currentColor？
- 當你希望多個屬性（例如邊框、背景、SVG 填充）與文字顏色保持一致時。
- 當你需要動態改變顏色（例如主題切換）時，currentColor 能減少重複定義。
如果元素沒有設定 color，會發生什麼？
- 如果元素本身沒有定義 color，currentColor 會從父元素繼承 color 值。
- 如果整個 DOM 樹都沒有 color，瀏覽器會使用預設文字顏色（通常是黑色）。
可以用在哪些屬性？
- 任何接受顏色值的 CSS 屬性，例如：
  - border-color
  - background-color
  - box-shadow
  - SVG 的 fill 和 stroke
  - outline-color
如何與變數（CSS Custom Properties）結合？
- 你可以搭配 CSS 自定義屬性（變數）使用，例如：

:root {
  --primary-color: #3498db;
}

.my-button {
  color: var(--primary-color);
  border: 2px solid currentColor;
}

這樣可以結合 currentColor 和主題化的靈活性。

注意事項

瀏覽器相容性：currentColor 在所有現代瀏覽器（Chrome、Firefox、Safari、Edge）都支援，無需擔心相容性問題。
限制：currentColor 僅代表文字顏色，無法直接代表其他屬性（例如 background-color）。
動態更新：當 color 改變時，所有使用 currentColor 的屬性會立即更新，這對動態效果很有用。

總結

currentColor 是一個簡單但強大的 CSS 工具，能讓你輕鬆保持顏色一致性，特別適合用於按鈕、圖標或主題化設計。透過以上範例，你可以：

在靜態設計中使用 currentColor 統一邊框、背景等樣式。
搭配 JavaScript 動態改變顏色，觀察 currentColor 的即時更新。
應用於 SVG，讓圖標與文字顏色同步。

currentColor 的使用場景​

詳細操作步驟與範例​

範例 1：基本使用 currentColor（靜態）​

範例 2：搭配 JavaScript 動態改變顏色​

範例 3：應用在 SVG 圖標​

常見問題與解答​

注意事項​

總結​

currentColor 的使用場景

詳細操作步驟與範例

範例 1：基本使用 currentColor（靜態）

範例 2：搭配 JavaScript 動態改變顏色

範例 3：應用在 SVG 圖標

常見問題與解答

注意事項

總結