共计 2679 个字符，预计需要花费 7 分钟才能阅读完成。
accent-color 是从 Chrome 93 开始被失去反对的一个不算太新属性。之前始终没有好好介绍一下这个属性。直到最近在给一些零碎整体切换主题色的时候，更深刻的理解了一下这个属性。
简略而言，CSS accent-color 反对应用几行简略的 CSS 为 表单元素 着色，是的，只需几行代码就能够将主题色彩利用到页面的表单输出。
表单元素始终被吐槽很难自定义。而 accent-color 就是标准十分大的一个扭转，咱们开始能更多的自定义原生的表单的款式了！
如何应用 accent-color
OK，咱们一起来学习一下，咱们应该如何应用 accent-color。
首先，咱们来实现这么一个简略的表单界面：
<div class="wrapper">
<form action="">
<fieldset>
<legend>Accent-color Demo</legend>
<label>
Strawberries
<input type="checkbox" id="berries_1" value="strawberries">
</label>
<label>
Radio Buttons
<div>
<input type="radio" name="accented-demo" checked>
<input type="radio" name="accented-demo">
<input type="radio" name="accented-demo">
</div>
</label>
<label>
Range Slider
<input type="range">
</label>
<label>
Progress element
<progress max="100" value="50">50%</progress>
</label>
</fieldset>
</form>
</div>只须要最简略的布局 CSS，与 accent-color 关系不大，我就不列出来了，这样，咱们的 DEMO 大抵如下：
能够看到，表单控件的主题色彩是 蓝色，在之前，咱们是没方法批改这个色彩的。
而当初，咱们能够简略的借助 accent-color，批改表单的主题色：
:root {accent-color: rgba(250, 15, 117);
}其中，rgba(250, 15, 117) 示意粉色，此时，整体的成果就变成了：
当然，这个 accent-color 也反对传入 CSS 变量，配合更多的其余色彩一起进行批改。
咱们能够对上述的 DEMO 再简略革新：
:root {--brand: rgba(250, 15, 117);
accent-color: var(--brand);
}
fieldset {border: 1px solid var(--brand);
}
legend {color: var(--brand);
}咱们设置了一个 CSS 变量 --brand: rgba(250, 15, 117)，除了把这个色彩赋值给表单的 accent-color，还能赋值给其它更多元素。譬如这里，咱们赋值给了 <fieldset> 的边框色和 <legend> 的文字色彩。
这样，当咱们批改 CSS 变量值时，整个主题色会一起发生变化：
残缺的 DEMO，你能够戳这：CodePen Demo — Accent-color with custom property
通常而言，更多的时候，咱们会将 accent-color 利用于：
- checkbox
- radio
- range
- progress
与 color-scheme 配合应用，适配日间夜间模式
还有一个容易疏忽的细节点。accent-color 还反对和 color-scheme 一起应用。
OK，什么是 color-scheme 呢？color-scheme 是 CSS 的一个属性，用于指定网页的色彩计划或主题。它定义了网页元素应该应用哪种颜色计划来出现内容。
color-scheme 属性有以下几个可能的取值：
- auto：示意应用用户代理（浏览器）的默认色彩计划。这通常是浏览器主动依据操作系统或用户设置抉择的计划。
- light：示意应用浅色色彩计划。这通常包含浅色背景和深色文本。
- dark：示意应用深色色彩计划。这通常包含深色背景和浅色文本。
通过指定适当的 color-scheme 值，开发者能够为网页提供不同的色彩计划，以适应用户的偏好或操作系统的设置。这有助于提供更好的可拜访性和用户体验。
譬如，咱们能够将页面的 color-schema 设置为 light dark：
body {color-scheme: light dark;}上述代码示意页面将同时反对浅色和深色色彩计划。它通知浏览器，网页心愿适应用户代理（浏览器）的默认色彩计划，并同时反对浅色和深色模式。
当应用 color-scheme: light dark 时，浏览器会依据用户代理的默认色彩计划来抉择适当的色彩计划。如果用户代理处于浅色模式，网页将应用浅色色彩计划来出现内容；如果用户代理处于深色模式，网页将应用深色色彩计划来出现内容。
此时，咱们的代码能够这样革新：
:root {--brand: rgba(250, 15, 117, 1);
accent-color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root {--brand: rgba(3, 169, 244, 1);
}
body {
background: #000;
color: #fff;
}
}
body {color-scheme: light dark;}上面是我在手机上调整日间模式和夜间模式的效果图：
通过 @media (prefers-color-scheme: dark) {} 媒体查问，在黑夜模式下，展现不同的 accent-color。
可能有人对
@media (prefers-color-scheme: dark)还不太理解，能够看看我的这篇文章 — 应用 CSS prefers-* 标准，晋升网站的可拜访性与健壮性
残缺的 DEMO，你能够戳这：CodePen Demo — Accent-color with custom property
最初
怎么，学会了吗。并且，依据标准形容，后续 accent-color 将会利用于更多的元素。将将来的 CSS 中会逐步变得更加重要。早点把握不是好事。
好了，本文到此结束，心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
