Mac 暗色主題推出後，就讓黑色控非常喜愛，而且這樣的暗色佈景使用起來更不傷眼。以我來說是比較喜歡在亮色的佈景下工作的，但暗主題的對於長期需要在電腦面前工作來說，真的相對輕鬆很多。雖然如此，也並非所有的介面都是有提供暗主題，以網頁來說就需要開發者另外定義暗主題才會進行切換（不使用任何瀏覽器插件的情況下）。
好在，暗色主題的語法相當容易，以下介紹如何作切換，並且會提供一個小技巧，只要透過短短的幾行就能操控整個網站所有元件的主題色彩。
支援度
先附上大家所在意的支援度，但其實暗色主題本身就是由 Apple 先提出的，所以 Mac OS、iOS 的支援度會比較高，其它的瀏覽器也正在持續跟進中。
語法
MDN 上的介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
暗色主題的 CSS 是透過 @media 取得裝置的主題模式，就如同取得裝置的形式一樣（尺寸、橫向或垂直、是否為螢幕等等…），相信對於撰寫過響應式的開發者都不陌生。
語法上使用 prefers-color-scheme 來監測是亮色或暗色的主題，相對應的值也就是 dark or light。
|
1 2 3 |
@media (prefers-color-scheme: ${dark or light}) { // ... } |
實際演示範例範例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> .mode { background-color: #eee; color: #333; } .text-mode:after { content: "light"; }
@media (prefers-color-scheme: dark) { .mode { background-color: #333; color: #eee; } .text-mode:after { content: "dark"; } } </style> <div class="demo mode"> <p>本區塊會隨著暗色與亮色主題切換</p> <p>您目前的是 <span class="text-mode"></span> 主題</p> </div> |
使用變數快速切換網頁的主題色
暗色系與亮色中的色彩並不是黑白兩色互相切換，以 Material Design 來說，如果亮色的主色色彩為 #6222ee，在暗色系並不會使用相同色，而是會改變為 #bb85fc 藉此來增加辨識度，而整個網頁中所需要套用色彩的區塊非常多，從按鈕到元件都會不斷地引用，如果透過一個個的 @media 設定將會增加開發及管理的困難度。
想知道更多暗色主題的CSS技巧嗎? 可以到以下網址了解更多喔!!
線