CSS: light-dark()

Paul Li
Apr 11, 2024
CSS: light-dark

Introduction

light & dark mode 嚴然已是 web page 101 必要的支援了,相信每位 front-end 對於相關的設置方法都暸若指掌,不外乎就是透過 media query > prefer-color-scheme 來進行不同 mode 的數值變化,在 CSS Nesting 支援的年代,撰寫的方式又更加直覺了~

如範例所示,.container 下的文字顏色在 light mode 為 black,當系統切換到 dark mode 的時候,則適用 media query rule,會將顏色改為 white

筆者個人覺得這樣的撰寫方式已經夠清楚也非常方便維護,不過似乎有人覺得好還可以更好,所以 light-dark() 這個 method 便油然而生~

How to use ?

使用上其實還蠻容易,不過有兩點需要特別注意,分別是:

  • 需要設置 color-scheme。
  • 只能是顏色相關的屬性。

所以上面的範例導入 light-dark() 後,可以改寫成以下的 code:

首先我們先設置 color-scheme,如果沒有設置的,light-dark() 裡頭參數的順序便有機會不符合預期。(通常會把 color-scheme 設置於 :root 裡頭)

我們來看一下 MDN 上面的定義,第一個參數放的是 light mode 下所希望的顏色,第二個參數則為 dark mode 下希望呈現的顏色。

MDN > light-dark(), https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

如此,便可以輕輕鬆鬆完成 light / dark mode 下的顏色設置了。確實是蠻直覺啦!一眼可以清楚看出不同 mode 下的顏色變化。

目前 Chrome VER.123 以及 Firefox VER.120 已經支援這個 method 了(Safari 僅在 STP 版本支援),如果擔心支援度問題,也可以透過 at-support 來進行 progress enhancement。

另外這個 method 僅支援 <color> 屬性的數值,當然也可以直接搭配 alias 或者是 custom property 來使用。

Conclusion

CSS 這幾年的變化越來越大,更新的週期也越來越短,不追一下更新日誌真的很容易一不小心就錯過了新穎有趣的更新。

希望以上介紹對大家有所助益,感謝大家的閱讀! #CSS

Reference

--

--

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.