鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
介紹一個和主題密切相關的CSS特性：light-dark，有了它，可以更靈活的適配各種主題模式。
一般來講，網站會有三種主題模式，白天、黑夜、自動跟隨系統，比如下面的 MDN 官網。
你也可以訪問以下在線鏈接查看實際效果
除了上面這種方式，現在light-dark也能實現類似的效果。
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
light-dark是一個CSS函數，語法很簡單，只需要傳兩個值。
/* 顏色 */color: light-dark(black, white);/* 自定義屬性 */color: light-dark(var(--light), var(--dark));第一個值是在白天模式下的值，第二個是在黑夜模式下的值。
那這個模式是由什么決定的呢？答案就是color-scheme。
回到前面的例子，如果用light-dark實現會更加簡單。
:root{ --bg: light-dark(aliceblue, #000); --color: light-dark(#000, #fff);}:has(#light:checked){ body{ color-scheme: light;/*白天模式*/ }}:has(#dark:checked){ body{ color-scheme: dark; /*黑夜模式*/ }}:has(#auto:checked){ body{ color-scheme: light dark; /*自動模式*/ }}簡單解釋一下，首先提前定義好白天和黑夜模式下的值，然后在切換主題的時候就不是改值了，而是改color-scheme。
同樣可以實現三種主題模式的動態切換了，效果如下：
你也可以訪問以下在線鏈接查看實際效果
是不是比前面的實現方式更簡單了，而且思路更加直觀了
在實際需求中，不僅僅有黑夜和白天，還有各種各樣的主題色。這些主題色往往還會區分白天和黑夜，畢竟同一種紅色在白色背景和黑色背景觀感肯定是不同的。
比如下面這種顏色，在黑色背景上就會有些突兀，或者刺眼。
你也可以訪問以下在線鏈接查看實際效果
再來說一下兼容性，要求 Chrome 123+，雖然是剛推出來不久，但現在（2024-6-22）所有瀏覽器都已經兼容了。
這意味著已經是一個標準了，放心學習，下面總結一下本文要點
light-dark可以說是 web 上關于主題顏色的終極解決方案了，期待可以早日使用。
[1]CSS prefers-color-scheme (codepen.io)： https://codepen.io/xboxyan/pen/KKLoEjB。
[2]CSS prefers-color-scheme (juejin.cn)： https://code.juejin.cn/pen/7383215058630737972。
[3]CSS light-dark (codepen.io)： https://codepen.io/xboxyan/pen/mdYxgVm。
[4]CSS light-dark (juejin.cn)： https://code.juejin.cn/pen/7383215549599186954。
[5]CSS light-dark primary (codepen.io)： https://codepen.io/xboxyan/pen/LYodvLR。
[6]CSS light-dark primary (juejin.cn)： https://code.juejin.cn/pen/7383215899521597474。
本文鏈接：http://www.tebozhan.com/showinfo-26-103166-0.html快速了解 CSS light-dark 函數及其應用
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 聊一聊 CSS 的十個技巧和竅門
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號