来到灯光（）

>同时创建浅色和深色模式似乎令人生畏。 基于@media管理prefers-color-scheme>查询，可容纳用户覆盖OS设置，并制定对比鲜明的调色板以访问可访问性，这都增加了复杂性。但是现代CSS大大简化了这一点。

>

利用本机HTML配色方案

> HTML既提供标准的黑白和黑色主题（尽管经常被CSS重置隐藏）。 白色黑色主题为黑暗模式提供了绝佳的基础，最大程度地减少了对输入和按钮等元素的手动调整的需求。

>

>自动配色方案通过操作系统首选项开关

>没有任何@media>查询，只需在root元素上声明color-scheme: light dark;，可以根据用户的OS首选项启用自动切换即可。 浏览器尊重操作系统的“光”，“黑暗”或“自动”配色方案设置。 这也可以通过html<meta>标签来实现：。 两种方法都达到了相同的结果：同时可用和黑暗方案可用并应用适当的一种。 <meta content="light dark" name="color-scheme">>您可以使用JavaScript控制

标签或CSS属性。 也可能将

应用于各个元素，但需要明确声明<meta>>和color-scheme>属性以避免继承问题。 color>默认文本和背景颜色变量background-color 这些主题中的默认“黑色”和“白色”通常略有黑色和灰白色，改善对比度。 这些颜色可作为

>变量访问：

（背景）和

（text）。 这些变量会自动调整

的变化，行为与<system-color></system-color>相似，但是Canvas>仍然固定为默认文本颜色。 CanvasText>以下示例演示了更改color-scheme属性的影响：> currentColor>还有许多其他变量（总计19个）。 MDN提供了一个完整的列表。 但是，浏览器和操作系统不一致存在于其渲染和支持中。 egor kloos的CanvasText框架跟踪这些变量的当前状态。

声明这两种模式的颜色color-scheme

>自动灯/暗开关就位，声明颜色的最佳方法至关重要。 这是三种方法，排名最低至最有效：

> <system-color></system-color>3。 基于不透明度的方法：system.css

使用颜色不透明度（例如，

）允许

颜色显示，但对文本的有效性较小，并且导致柔和的颜色。

2。 color-mix()函数：

color-mix()函数可以将颜色与指定比例（例如，color-mix(in oklab, Canvas 75%, RebeccaPurple)）混合。 这对于维持跨模式的色调和饱和度一致性很有用。与HSL相比

1。

函数：light-dark()

light-dark()函数（例如，light-dark(lavender, saddlebrown)）提供了最精确的控制，可以在轻度和深色模式中完全不同的颜色。 它也可以合并color-mix()。 浏览器支持很高，但可能需要后备。

>

和color-scheme的优点超过light-dark() @media

>提供了

>的几个优点：color-scheme> @media prefers-color-scheme

>轻松地提供了基本的黑暗模式。

• 处理基于操作系统的基于OS的本地切换。
允许基于JavaScript的切换，同时尊重声明的颜色。
实施光，黑暗和自动模式控件
>提供浅色，深色和自动模式提供灵活性。 自动模式默认为操作系统设置，而用户可以手动切换。 这消除了对复杂检测逻辑和事件听众的需求。

> 基于CSS的配色方案调整

>

纯CSS调整可以使用 pseudo-Selector和Radio Inputs或元素进行调整。 但是，这仅限于每页更改，需要

支持。

> 基于JavaScript的配色方案调整

JavaScript 标签或

可以用来操纵:has()。 函数提高代码可重复性。<select></select> :has()记住用户首选项

> Web Storage API（LocalStorage或SessionStorage）允许存储用户首选项以备将来访问。

>在会议上持续存在，而

在浏览器闭合上清除。 选择取决于用户行为和GDPR合规性注意事项。<meta> html.style.setProperty()>可访问性注意事项color-scheme

提供灯光和深色模式可提高可访问性。 考虑添加对比度设置（使用

和

）以进行进一步的自定义。 使用ARIA属性（例如，

）少于增强的屏幕读取器兼容性。localStorage 总而言之，现代CSS简化了光和黑暗模式的创建。 拥抱sessionStorage>，

和用户偏好存储提供的灵活性和用户选择。

以上是来到灯光（）的详细内容。更多信息请关注PHP中文网其他相关文章！