新式 CSS 解决方案主题色

前言。

站在巨人的肩膀上，有时会改变品牌的颜色。 描述现代 CSS 解决方案中的 accent-color 属性，该属性可用于轻松自定义表单元素的主题颜色。 通过设置强调色和配色方案属性，开发者可以调整不同颜色模式的网页，以改善用户体验。 未来，强调色属性将用于更多元素中，并且对于网页设计将变得更加重要。 今天的前端晨读课文章由@sbco公众号分享：icss前端轶事授权。

正文从这里开始

accent-color 是一个不太新的属性，自 Chrome 93 以来一直受支持。 我以前没有谈过这个属性。 直到最近，当我将一些系统的主题颜色作为一个整体切换时，我才对这个属性有了更深入的了解。

简单来说，CSS accent-color 支持用几行简单的 CSS 为表单元素着色，是的，只需几行就可以将主题颜色应用于页面的表单输入。

表单元素被抱怨难以定制。 强调色是规范的一个非常大的变化，我们开始能够更多地自定义原生形式的样式！

好的，让我们学习如何使用强调色。

首先，让我们实现一个简单的表单接口，如下所示：

accent-color demolegend>

strawberries
label>
radio buttons
div>
label>
range slider
label>
progress element
50%progress>
label>
fieldset>
form>
div>

正如你所看到的，表单小部件的主题颜色是蓝色的，我们以前无法更改这种颜色。

现在，我们可以简单地使用强调色来更改表单的主题颜色

:root

当然，这种强调色也可以用CSS变量来修改。

No.2143] CSS 变量为 JS 交互组件的开发带来了改进和变化。

我们可以对上面的演示进行简单的重新设计

:root 

fieldset 
legend

这样，当我们修改 css 变量的值时，整个强调色也会随之变化：

codepen demo --accent-color with custom property:

一般来说，我们通常会将强调色应用于：

checkbox

radiorange

progress

还有另一个容易被忽视的细节。 accent-color 也可以与配色方案一起使用。

好的，什么是配色方案？ Color-Scheme 是 CSS 的一个属性，用于指定网页的配色方案或主题。 它定义了网页元素应用于呈现内容的配色方案。

No.1886] 蚂蚁设计。

color-scheme 属性具有以下可能的值：

auto：表示用户（浏览器）使用的默认配色方案。 这通常是浏览器根据操作系统或用户设置自动选择的方案。

light：指示使用浅色配色方案。 这通常包括浅色背景和深色文本。

dark：指示使用深色配色方案。 这通常包括深色背景和浅色文本。

通过指定适当的配色方案值，开发人员可以为网页提供不同的配色方案，以适应用户的偏好或操作系统的设置。 这有助于提供更好的可访问性和用户体验。

例如，我们可以将页面的颜色模式设置为浅色：

body

使用时color-scheme: light dark，浏览器会根据用户的默认配色方案选择合适的配色方案。 如果用户处于浅色模式，页面将使用浅色配色方案来呈现内容; 如果用户**处于深色模式，则页面将使用深色配色方案来呈现内容。

这个时候，我们的**可以这样转换：

:root 

media (prefers-color-scheme: dark) body 
body

通过@media (prefers-color-scheme: dark) {**在深色模式下，查询显示不同的主题色。

你是怎么学会的？ 而且，根据规范，强调色将在未来应用于更多元素。 它将在未来的CSS中逐渐变得更加重要。 尽早完成并不是一件坏事。

源语言：