2020
06
18

CSS 技巧:精簡語法操作暗色主題 - CSS Dark Mode[轉載自卡斯柏BLOG]

關鍵字:CSSdarkmodelayout

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技巧嗎? 可以到以下網址了解更多喔!! 

 

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.