真正原生支持深色模式的html在线工具极少，codepen和playcode能正确响应prefers-color-scheme并触发媒体查询，jsfiddle默认禁用该特性，codesandbox在web container模式下支持，但框架模板可能因ssr硬编码主题而失效。
目前主流的 HTML 在线运行工具中，真正原生支持深色模式（且不依赖浏览器强制反转或用户手动改 CSS）的其实不多。多数工具只是界面有暗色 UI，但你写的 HTML/CSS 在预览区仍按默认浅色渲染——这和“让代码本身适配深色模式”是两回事。
CodePen 支持系统级 prefers-color-scheme
CodePen 的预览 iframe 会继承宿主页面的 prefers-color-scheme 设置，也就是说：如果你系统设为深色，且你的 HTML 中写了 @media (prefers-color-scheme: dark)，它能正确触发。但注意：
- CodePen 自身编辑器 UI 有深色主题（可手动切换），但不影响你代码的渲染逻辑
- 预览区
根元素不会自动加dark类，所以 Tailwind 的dark:前缀需配合darkMode: 'media'配置才生效 - 若你在 JS 中用
matchMedia监听并动态切 class，它也能正常工作
JSFiddle 不响应 prefers-color-scheme（默认禁用）
JSFiddle 的预览 iframe 默认把 color-scheme 强制设为 light，即使你系统是深色，@media (prefers-color-scheme: dark) 也完全不匹配。常见表现：
- 你的深色 CSS 规则被忽略，文字在黑背景上发白不可读
- 表单控件（如
<input>）保持默认浅色背景，与页面脱节 - 临时解法：在
加<meta name="color-scheme" content="light dark">，但部分版本仍无效
Playcode 和 CodeSandbox 的差异点
Playcode 对深色模式支持较完整：编辑器 UI 可切换，预览区也尊重系统偏好，并允许你在设置里开启「自动同步系统主题」；CodeSandbox 则分两种情况：
- Web Container 模式（即普通 HTML/JS 项目）：预览 iframe 支持
prefers-color-scheme，且默认启用color-scheme: light darkmeta - React/Vue 等框架模板：若用了 SSR 或服务端注入了
data-theme="light"，可能覆盖系统检测，需检查初始 HTML 是否硬编码了主题
为什么很多工具“看似支持”实则失效
根本问题不在工具本身，而在它们如何隔离预览环境：
- iframe 默认没有
color-scheme声明，浏览器会按安全策略降级为light - 工具若未在 iframe 的
上设置style="color-scheme: light dark"或对应 meta，媒体查询就断了 - 像
<mark></mark>、<textarea></textarea>这类原生控件，颜色由 UA 样式表控制，不靠你写的 CSS 变量——只有prefers-color-scheme能触发其内部逻辑
真正在意深色模式行为验证，别只看编辑器是否“看起来黑”，重点确认预览区是否真实响应 matchMedia('(prefers-color-scheme: dark)') 返回 true，以及原生表单、<mark></mark>、<canvas></canvas> 是否按预期变化——这些才是容易被忽略的硬指标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
