深色模式下不能直接使用固定的hex色彩代码，是因为固定色值无法根据背景明暗自动调整对比度，会导致文字与背景融合或刺眼。正确的做法是使用css颜色函数（如`color-mix()`）或hsl色彩空间，将基础色与背景色混合，或者动态计算亮度，从而确保在任何背景下都保持可读性。
为什么固定HEX在深色背景上会失效
固定HEX代码（如`#333333`）是绝对的颜色定义，它不包含任何关于环境的信息。当背景从白色变为黑色时，原本在白色背景上清晰的深灰色文字会变得几乎看不见，因为两者的亮度差（Luminance Contrast）不足。WCAG标准通常要求至少4.5:1的对比度，而固定色值无法保证这一点。
/* 错误示范：固定HEX */
.dark-mode {
background-color: #000000;
color: #333333; /* 对比度极低，难以阅读 */
}
/* 正确示范：使用HSL动态调整 */
.dark-mode {
background-color: hsl(0, 0%, 0%);
color: hsl(0, 0%, 85%); /* 高亮度白色，对比度高 */
}如何使用CSS变量实现自适应色彩
通过CSS自定义属性（变量），可以结合`light-dark()`函数或媒体查询来切换不同的色彩方案。这种方法允许开发者定义一套语义化的颜色名称，然后在不同主题下映射到具体的HEX或HSL值。这种方式比硬编码HEX更灵活，且易于维护。
立即学习“前端免费学习笔记（深入）”；
:root {
--text-primary: #000000;
--bg-primary: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #ffffff;
--bg-primary: #121212;
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
}基于`color-mix()`函数的具体应用问题
在现代浏览器中，可以使用`color-mix()`函数直接将前景色与背景色按一定比例混合，从而生成适应背景的文本颜色。例如，将纯黑与背景色混合，可以得到一个柔和的深色文本，既保持了品牌色的感觉，又确保了可读性。这种方法的优点是无需JavaScript，完全由CSS引擎处理。
