不能直接单独引入暗黑模式css文件，因样式会叠加覆盖；正确做法是合并样式并用[data-theme="dark"]前缀隔离，配合color-scheme声明确保原生控件适配。
不能直接“单独引入”暗黑模式 CSS 文件而不影响默认主题——浏览器加载多个样式表时，规则会叠加、覆盖，不存在天然隔离。所谓“单独引入”，本质是控制加载时机和作用域，避免冲突。
为什么直接引入dark.css会出问题
常见错误是把 dark.css 写在默认样式之后，又没加选择器约束，导致所有规则无差别生效：
- 深色样式直接覆盖浅色样式（比如
body { background: #000 }会干掉前面的#fff），连浅色模式下也变黑 - 没限定作用域，
dark.css里写的button { color: white }会在所有页面生效，不管用户开没开暗黑模式 - 如果用
media="prefers-color-scheme: dark"属性加载，旧版 Safari（12.0 及更早）、微信 WebView、部分安卓 WebView 完全忽略该属性，文件压根不加载
正确做法：用 data-theme 属性 + 选择器前缀隔离样式
核心不是“引入不同文件”，而是让两套样式共存但互不干扰。必须把暗黑样式写进同一份 CSS，用 [data-theme="dark"] 包裹：
- 删掉
<link href="dark.css">这种独立引入，把所有暗色规则合并进主样式表 - 确保 HTML 的
元素能动态加/删data-theme="dark"（不是class="dark"，也不是加在） - 暗色规则全部写成
[data-theme="dark"] body { background: #121212; }这种形式，优先级足够高，且只在属性存在时触发 - 搭配
@media (prefers-color-scheme: dark)做初始自动匹配，但仅用于设置data-theme属性，不写具体样式
如果非要用独立文件，必须带 media 和 fallback
极少数场景（如微前端子应用强隔离）需物理分离 CSS，那必须满足三个硬条件：
- 加载时用
<link media="(prefers-color-scheme: dark)" href="dark.css">，同时再加一条<link media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" href="light.css"> - 两个文件里所有规则都加前缀：
light.css用[data-theme="light"]，dark.css用[data-theme="dark"]，否则媒体查询失效时样式全乱 - 首屏必须内联 JS 检测并同步设置
data-theme，否则 Chrome/Firefox 在 CSS 加载完成前会按默认主题渲染一次，造成闪动
最易被忽略的点：color-scheme 和原生控件
即使 CSS 隔离完美，input、select、滚动条、SVG 默认填充仍可能不随主题变——因为它们读的是系统色，不是你的变量。必须在 :root 或 html 上声明：color-scheme: light dark;。这个声明不控制你写的任何颜色，只告诉浏览器：“我支持双模式，请把原生控件也按当前 data-theme 或系统偏好渲染”。漏掉它，用户在深色系统下看到白底黑字的输入框，就是典型症状。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
