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 下希望呈現的顏色。
如此，便可以輕輕鬆鬆完成 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