系统强调色预览 - 在不同控件上的表现

accent-color 是 CSS 的一个属性，用于设置浏览器原生素描控件（如复选框、单选按钮、滑块和进度条）的强调色调。它允许开发者快速统一表单元素的主题色，无需自定义复杂的组件样式。

该属性于 2022 年起获得主流浏览器全面支持，是现代 Web 开发中简化表单样式的重要工具。使用 accent-color: auto 可以让控件使用操作系统的默认强调色。

目前 accent-color 主要影响以下 HTML 元素：

• <input type="checkbox"> — 复选框
• <input type="radio"> — 单选按钮
• <input type="range"> — 范围滑块
• <progress> — 进度条元素
• <meter> — 度量计元素（部分浏览器支持有限）

需要注意的是，Bootstrap 的自定义开关（.form-switch）使用背景色实现，不受 accent-color 直接影响。而输入框光标颜色需要使用 caret-color 属性单独设置。

两者是不同的 CSS 属性：

• accent-color：控制表单控件的强调色（复选框勾选颜色、滑块轨道颜色等）。
• color-scheme：告知浏览器页面支持的颜色方案（light 或 dark），影响浏览器 UI（如滚动条、表单控件）的默认渲染模式。

例如，设置 color-scheme: dark 会让浏览器以暗色模式渲染原生控件，而 accent-color 则在此基础上进一步自定义强调色。两者可以组合使用以获得最佳效果。

设置 accent-color: auto 即可让浏览器使用操作系统的默认强调色。在 Windows 上通常为蓝色，macOS 上为多彩色（取决于系统设置），iOS 上为蓝色，Android 上则跟随 Material You 主题色。

:root {
  accent-color: auto;
}

这样无需指定具体颜色值，控件会自动适配用户的系统偏好，提供更原生的体验。

accent-color 在现代浏览器中得到了广泛支持：

• Chrome 93+（2021年8月）
• Firefox 92+（2021年9月）
• Safari 15.4+（2022年3月）
• Edge 93+
• Opera 79+

全球浏览器覆盖率超过 95%。对于不支持的旧版浏览器，控件将回退到默认的系统样式，不会影响功能使用。可以使用 @supports (accent-color: #fff) 进行特性检测。

Bootstrap 5.3 在表单控件中已经内置了对 accent-color 的支持。你可以在自定义 CSS 中覆盖：

/* 覆盖 Bootstrap 默认强调色 */
.form-check-input {
  accent-color: #8B5CF6;
}
.form-range {
  accent-color: #8B5CF6;
}

对于 Bootstrap 的开关组件（.form-switch），由于它使用 background-color 实现，需要单独设置背景色。而对于原生控件（checkbox、radio、range），直接使用 accent-color 即可统一修改。

两者是不同的 CSS 属性，但常被一起使用来统一 UI 色调：

• caret-color：设置文本输入框中闪烁光标的颜色。适用于 <input>、<textarea> 以及设置了 contenteditable 的元素。
• accent-color：设置表单控件的强调色。

在实际项目中，通常将两者设置为同一颜色，以保持视觉一致性。例如：input, textarea { caret-color: #6366F1; } 配合 accent-color: #6366F1。

目前没有直接的 JavaScript API 来读取操作系统级别的强调色。但可以通过以下方式间接实现：

• 使用 accent-color: auto，让浏览器自动匹配系统强调色。
• 结合 prefers-color-scheme 媒体查询检测亮/暗模式。
• 在支持 AccentColor 的平台上（如 Windows），可以通过 CSS 系统颜色关键字 AccentColor 和 AccentColorText 来引用系统强调色（此为 CSS Color Level 4 规范，支持有限）。

对于大多数场景，使用 accent-color: auto 是最简单可靠的方案。