直接用@media (prefers-color-scheme: dark)包裹深色样式，浏览器原生实时响应；需配合CSS变量在:root中定义并覆盖，图片优先用SVG或透明PNG，边框和outline宜用中性灰降低对比度。
prefers-color-scheme 媒体查询怎么写
直接用 @media (prefers-color-scheme: dark) 包裹深色样式即可，它不是 JS 判断，也不需要监听事件——浏览器原生支持，且会随系统设置实时响应。
注意：该查询只在支持的浏览器中生效（Chrome 76+、Firefox 67+、Safari 12.1+），旧版 Safari 需要加 -webkit- 前缀但实际不推荐兼容；IE 完全不支持，别白费力气。
- 必须写在 CSS 文件里或
<style></style>标签内，不能用 JS 动态插入媒体查询规则（insertRule不认这个条件） - 可嵌套在其他媒体查询中，比如
@media (min-width: 768px) and (prefers-color-scheme: dark) - 值只有
dark、light、no-preference，其中no-preference极少见，一般忽略
CSS 变量如何配合深色模式切换颜色
把颜色抽成自定义属性（CSS 变量），在根元素上定义默认值，再用媒体查询覆盖，是最干净、最易维护的方式。避免重复写整套选择器。
关键点：变量定义位置决定作用域。必须在 :root 或更高层级声明，否则媒体查询里改不了。
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--border: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
--text-primary: #e0e0e0;
--border: #333333;
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border);
}
- 变量名建议统一前缀（如
--color-或--theme-），避免和第三方库冲突 - 不要在媒体查询里用
!important覆盖变量——变量本身无优先级，覆盖靠声明顺序 - 如果组件局部需要深色适配（比如弹窗），可用
[data-theme="dark"]手动控制，但优先走系统偏好
深色模式下 border-color 和 outline 怎么处理才不刺眼
直接把浅色下的 #ccc 换成 #333 很容易翻车：深背景上纯黑边框对比度过高，视觉上“跳”出来；而 outline 在聚焦时尤其明显，可能干扰阅读流。
更稳妥的做法是降低明度差，用中性灰或带一点色相的暗色，并控制 outline 的虚化程度。
- 边框推荐用
#2d2d2d～#3a3a3a（比背景略深但不过分），而不是#000 - 聚焦 outline 建议用
outline: 2px solid #4a5568+outline-offset: 2px，比默认蓝色更柔和 - 慎用
box-shadow替代 border——深色模式下阴影容易发灰、糊成一片，不如实线可控
如何让图片在深色模式下不突兀
纯白背景的 PNG 或截图在深色模式下会形成强烈割裂感。不能只靠 CSS 调亮度，得从资源和语义两层处理。
核心思路：让图片“融入”而非“对抗”背景。优先级是：SVG > 透明 PNG > 后处理滤镜。
- SVG 图标用
fill="currentColor"，自动继承文字颜色，深色模式下自动变亮 - PNG 图标若含白底，导出时去掉背景（用透明底），再用
background-color控制容器底色 - 绝对避免对照片类图片加
filter: brightness(0.8)—— 会失真、偏色，且无法还原细节 - 必要时提供两套图片资源，用
<picture></picture>+media="(prefers-color-scheme: dark)"切换
真正难的不是写对那几行 CSS，而是设计阶段就考虑深色语义——比如按钮悬停态在深色下不该只是“变暗”，而应是“提亮边缘”或“增加微弱内阴影”。这些细节没法靠媒体查询自动补全。
