核心是媒体查询 @media (prefers-color-scheme: dark)，配合 CSS 变量把所有颜色抽象成令牌：:root 定义浅色套，@media 块里重定义深色套，组件只引用 var(--bg) 等令牌。切换时浏览器还能自动反色图片（但不建议依赖）。
最初的『 prefers-color-scheme 』只能跟随系统；若要站内开关，需 JS 把选择写到 document.documentElement.dataset.theme 并配合一段内联防闪烁脚本（先在 head 里读 localStorage 设置 data-theme，避免白屏闪烁）。Tailwind 的 dark: 前缀本质是 class 策略的工程化封装。
<style> :root { --bg: #fff; --fg: #111; --card: #f6f8fa; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --fg: #e6edf3; --card: #161b22; } } body { background: var(--bg); color: var(--fg); transition: .3s; } .card { background: var(--card); padding: 14px; border-radius: 8px; } </style> <div class="card">跟随系统主题（修改系统深浅色观察变化）</div>