CSS 媒体功能 forced-colors 用于检查用户是否已在其设备上激活了强制颜色模式。强制颜色模式是某些操作系统和设备上的一项设置，允许用户为其界面选择有限的调色板。
可能的值
- none − 这表示未启用强制颜色模式。
- active - 这表示已启用强制颜色模式。浏览器提供 CSS 系统颜色关键字，并通过考虑 Canvas 系统颜色的亮度来设置 prefers-color-scheme 媒体查询值，以便 Web 开发人员可以相应地调整他们的页面。
语法
forced-colors: none|active;
下表列出了受强制颜色模式影响的属性：
| 属性 | 描述 |
|---|---|
| color | 文本的颜色。 |
| background-color | 背景的颜色。 |
| text-decoration-color | 文本修饰的颜色，例如下划线或上划线。 |
| text-emphasis-color | 强调文本的颜色，例如字母下方的点。 |
| border-color | 边框的颜色。 |
| outline-color | 轮廓的颜色。 |
| column-rule-color | 列规则的颜色，即在多列布局中分隔列的线。 |
| -webkit-tap-highlight-color | 点击高亮显示的颜色，这是用户点击元素时出现的视觉提示。 |
| SVG fill attribute | SVG 元素的填充颜色。 |
| SVG stroke attribute | SVG 元素的描边颜色。 |
以下属性在强制颜色模式下具有独特的行为：
| 属性 | 强制值 |
|---|---|
| box-shadow | none |
| text-shadow | none |
| background-image | none (对于非 URL 值) |
| color-scheme | light dark |
| scrollbar-color | auto |
用户代理（如 Web 浏览器等软件）根据元素的固有特性确定元素的颜色，而不是根据 ARIA 角色等附加标签来确定元素的颜色。例如，如果您将角色“button”添加到 div 元素，它不会自动更改通常用于按钮的颜色。
CSS forced-colors - 无
以下示例演示了 forced-colors： none 媒体功能的使用，该功能将在所有设备上使正文元素变为黑色，背景为白色。但是，在未启用强制颜色模式的设备上，body 元素将为蓝色和粉红色背景 -
按照此链接上的步骤模拟强制颜色模式并测试此示例。
<html>
<head>
<style>
body {
color: black;
background-color: white;
}
@media (forced-colors: none) {
body {
color: blue;
background-color: pink;
}
}
</style>
</head>
<body>
<h1>CSS Media Feature forced-colors: none</h1>
<p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>
CSS forced-color - 活动值
以下示例演示了在启用了 forced-colors 模式的设备上，使用强制颜色媒体功能来更改正文元素及其内部文本的颜色 -
按照此链接上的步骤模拟强制颜色模式并测试此示例。
<html>
<head>
<style>
body {
color: blue;
background-color: pink;
}
@media (forced-colors: active) {
body {
color: black;
background-color: white;
}
}
</style>
</head>
<body>
<h1>CSS Media Feature forced-colors: active</h1>
<p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>
