在CSS中為主題著色的干方法

最近，Florens Verschelde 詢問瞭如何在類和媒體查詢中定義暗模式樣式，同時避免重複聲明CSS自定義屬性。我過去也遇到過這個問題，但沒有找到合適的解決方案。

我們的目標是避免在切換明暗模式時重新定義——從而重複——自定義屬性。這是DRY（Don't Repeat Yourself）編程的目標，但切換主題的典型模式通常是這樣的：

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

明白我的意思了嗎？當然，在這個簡短的例子中，它可能看起來並不重要，但想像一下一次處理幾十個自定義屬性——這是大量的重複！

然後我想起了Lea Verou 使用--var: ;的技巧，雖然一開始我沒有想到，但我找到了一種方法讓它工作：不是用var(--light-value, var(--dark-value))或類似的嵌套組合，而是並排使用它們！

當然，肯定有人比我先發現這一點，但我還沒有聽說過利用（或者更確切地說，是濫用）CSS自定義屬性來實現這一點。話不多說，這就是這個想法：

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

如果--light值設置為initial ，則將使用回退值（orchid），這意味著--dark應設置為空格字符（這是一個有效值），使最終計算值如下所示：

 <code>--color: orchid ; /* 注意额外的空格*/</code>

相反，如果--light設置為空格，而--dark設置為initial ，我們最終得到一個計算值為：

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

現在，這很好，但我們需要根據上下文定義--light和--dark自定義屬性。用戶可以設置系統首選項（明或暗），也可以使用某些UI元素切換網站的主題。就像Florens的例子一樣，我們將定義這三種情況，並使用Lea提出的“on”和“off”常量進行一些小的可讀性增強，以便一目了然：

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

然後，我們可以在一個聲明中設置所有主題變量，而無需重複。在這個例子中， theme-*類被設置為html元素，所以我們可以使用:root作為選擇器，就像許多人喜歡做的那樣，但如果自定義屬性的級聯特性更有意義，你也可以將它們設置為body 。

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

要使用它們，我們使用var()並內置回退，因為我們喜歡小心謹慎：

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

希望您已經開始看到這裡的好處了。我們不是定義和切換大量的自定義屬性，而是處理兩個屬性，並在:root上只設置其他所有屬性一次。這與我們開始的地方相比有了巨大的改進。

使用預處理器實現更DRY的代碼

如果讓我脫離上下文來看下面這行代碼，我肯定會感到困惑，因為顏色是一個單一的值，而不是兩個！

 <code>--text: var(--light, black) var(--dark, white);</code>

這就是為什麼我更喜歡稍微抽像一下。我們可以使用我們最喜歡的預處理器（在我的例子中是Sass）來設置一個函數。如果我們保留上面定義的--light和--dark值在不同上下文中的代碼，我們只需要更改實際的自定義屬性聲明即可。讓我們創建一個light-dark函數，它為我們返回CSS語法：

 @function light-dark($light, $dark) {
  @return var(--light, #{ $light }) var(--dark, #{ $dark });
}

我們將像這樣使用它：

 :root {
   --text: #{ light-dark(black, white) };
   --bg: #{ light-dark(orchid, rebeccapurple) };
   --accent: #{ light-dark(#6d386b, #b399cc) };
}

你會注意到在函數調用周圍有插值分隔符#{ … } 。如果沒有這些，Sass 將按原樣輸出代碼（就像普通的CSS函數一樣）。您可以嘗試各種實現方法，但語法複雜性取決於您的喜好。

這對於一個更DRY的代碼庫來說怎麼樣？

多於一個主題？沒問題！

您可以使用兩種以上的模式來實現這一點。您添加的主題越多，管理起來就越複雜，但關鍵是這是可能的！我們添加另一組ON或OFF變量的主題，並在值列表中設置一個額外的變量。

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

這是個技巧嗎？是的，絕對是。這是對潛在的、尚不存在的CSS布爾值的很好的用例嗎？好吧，這是夢想。

你呢？你是否用不同的方法解決了這個問題？請在評論中分享！

以上是在CSS中為主題著色的干方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！