HTML5视频元素不响应暗色模式，但可通过CSS媒体查询定制容器、控件、字幕样式，并需处理poster、fallback文本及首帧可见性问题。
视频元素本身不响应暗色模式，但可干预其外层容器和控件样式
HTML5 的 元素默认不感知系统暗色模式（prefers-color-scheme: dark），它的播放器控件（尤其是原生控件）由浏览器渲染，样式不可直接控制。真正能调整的，是视频容器、自定义控件、字幕轨道（）、以及视频内容本身的亮度/对比度——后者需后端处理或前端滤镜，不属于纯 HTML/CSS 范畴。
用 CSS 媒体查询覆盖原生控件颜色（仅限部分浏览器）
Chrome 和 Edge（基于 Chromium）支持有限的伪元素样式化原生控件，Firefox 和 Safari 支持极弱或不支持。以下写法仅对 Chromium 有效，且仅影响控件 UI（如进度条滑块、按钮背景），不影响视频画面：
:root {
--video-control-bg: #333;
--video-control-thumb: #666;
}
@media (prefers-color-scheme: dark) {
video::-webkit-media-controls-panel {
background-color: var(--video-control-bg);
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-timeline-container {
filter: invert(1) hue-rotate(180deg);
}
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
color: #fff;
}
}
注意：::-webkit-media-controls-* 是非标准伪类，不能用于生产环境强依赖；filter: invert() 可能导致文字反色异常，需配合 hue-rotate 补偿。
为字幕（
字幕默认白色文字黑边，在暗色背景下易被忽略或产生光晕。必须通过 标签内联 ::cue 规则，且需放在 或视频元素前：
立即学习“前端免费学习笔记（深入）”；
关键点：
-
::cue选择器必须独立写，不能嵌套在其他规则里（如video::cue无效） -
text-shadow在暗色背景下用深色模糊阴影增强可读性，而非默认的浅色描边 - 部分浏览器（如旧版 Safari）不支持
::cue的媒体查询，需降级为全局样式
避免“视频黑屏”错觉：检查 poster 和 fallback 内容
暗色模式下，若 poster 图片是浅色背景，或未设 poster 且首帧为暗画面，用户会误以为视频加载失败或无内容。更隐蔽的问题是：当视频格式不被支持时， 回退到内部文本（如 “Your browser does not support the video tag”），该文本默认黑色，在暗色页面中不可见。
解决方式：
- 为
poster使用明暗双版本图片，并用picture+media切换（但不支持响应式属性，只能 JS 动态设置） - 显式设置回退文字的颜色：
→ 外层加style="color: #ccc;" - 禁用原生控件后自建按钮，确保图标和文字在深色下始终可见
最常被忽略的是：视频未播放时的静帧（第一帧）可能过暗，而用户没意识到它正在加载——这种“黑屏即故障”的直觉，在暗色主题下会被放大。没有万能 CSS 能提亮视频画面，真要调整亮度，得靠 canvas + drawImage + getImageData 后处理，或服务端预生成 HDR/SDR 自适应版本。
