介绍一个和主题密切相关的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.28at.com/showinfo-26-103166-0.html快速了解 CSS light-dark 函数及其应用
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 聊一聊 CSS 的十个技巧和窍门
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号