标签不响应夜间模式，必须用内联::cue伪元素控制样式；Safari要求规则在或视频前，Firefox仅支持基础属性，需按浏览器降级适配。
标签本身不响应夜间模式，它的样式必须靠 ::cue 伪元素显式控制，且规则必须内联在 或视频元素之前，否则 Safari 和 Firefox 会忽略。
为什么
默认字幕是白色文字 + 黑色描边（text-shadow: 1px 1px 2px black），在深色背景上描边和文字都容易糊成一片；更糟的是，如果页面用了 background-color: #121212 而字幕没重定义颜色，就会变成白字配灰底——对比度不足、边缘发虚、阅读吃力。
- 不要依赖浏览器默认字幕样式，它只针对浅色背景优化
-
::cue规则不能写在外部 CSS 文件里，必须用内联，且要早于标签渲染 - Firefox 对
::cue支持最弱，仅支持基础属性（color、background、font-size），不支持text-shadow或border
::cue 在 @media (prefers-color-scheme: dark) 下怎么写才可靠
不能只写 @media (prefers-color-scheme: dark) { ::cue { color: #e0e0e0; background: rgba(30, 30, 30, 0.8); } } —— 这在 Safari 里可能完全不生效，因为 ::cue 的作用域独立于媒体查询上下文。
- 必须把
::cue规则拆成两组：一组放在全局中定义亮色默认值，另一组用@media (prefers-color-scheme: dark)覆盖 - 深色模式下优先用半透明背景而非纯黑：
background: rgba(20, 20, 20, 0.85)，避免字幕块“沉”进背景里 - 慎用
text-shadow：Chrome 支持，但 Firefox 忽略；若要用，只设单层text-shadow: 0 0 4px rgba(0,0,0,0.7)，别叠加多层 - 加
padding: 0.2em 0.4em显式撑开内边距，防止文字贴边被裁切
如何让字幕自动适配手动切换的夜间模式（非系统级）
当用户点击按钮切换主题（比如通过 document.documentElement.classList.toggle('dark')），@media (prefers-color-scheme: dark) 不会触发，所以 ::cue 规则不会更新。必须靠 class 控制。
- 给
外层容器加 class： - 然后写：
.dark-theme ::cue { color: #e0e0e0; background: rgba(20, 20, 20, 0.85); } - 切换时只操作容器 class，不碰
或 JS 加载逻辑 - 注意：这个方案在 Firefox 中仍受限，它只认
::cue全局规则，不支持 class 前缀选择器，所以得配合!important强制覆盖（仅此处可接受）
真正难的不是写对样式，而是确认所有浏览器都按你写的渲染——Safari 要求 ::cue 必须出现在 ，Firefox 只吃最简属性，Chrome 才支持滤镜和阴影。别指望一套规则通吃，得按需降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
