dialog深色模式需手动适配：必须声明color-scheme元标签和CSS、重置背景/文字/边框为系统语义色、自定义backdrop、强化焦点环、避免Safari backdrop交互依赖，并在媒体查询内写样式以支持系统主题实时切换。
dialog 在深色模式下不会自动适配背景、文字或边框颜色——它默认继承 :root 或 body 的样式，但原生控件行为（如 backdrop 渲染、焦点环、滚动条）是否走暗色逻辑，取决于系统级声明是否到位。
必须先确保 color-scheme 声明生效
仅写 CSS 媒体查询无法让 dialog 内的原生交互元素（比如 input 边框、select 下拉箭头、焦点环）进入暗色渲染路径。浏览器必须明确知道“这个页面支持双模式”：
-
<meta name="color-scheme" content="light dark">必须硬编码在<head>最顶部，不能 JS 注入 -
:root { color-scheme: light dark; }必须存在，且不能被内联style覆盖（例如<html style="background: white">会阻断继承） - 若用 SSR 框架（如 Next.js），确认初始 HTML 响应中没有
data-theme="light"这类强制覆盖属性
dialog 内容区域需手动重置深色样式
@media (prefers-color-scheme: dark) 对 dialog 本身不具穿透性——它的子元素不会自动翻转颜色，尤其当父级未设 color 或 background-color 时，文字极易糊在深灰背景上：
- 显式设置
dialog { background-color: Canvas; color: CanvasText; border: 1px solid CanvasText; }（Canvas和CanvasText是系统语义色，比硬编码#1e1e1e更可靠） - 避免只改
dialog[open]，未展开状态的dialog同样可能被 JS 动态插入并显示（如通过show()） -
dialog::backdrop在深色模式下默认是半透黑（rgba(0,0,0,0.5)），建议改为rgba(0,0,0,0.35)或使用hsl(210 8% 12% / 0.35)降低对比度
focus/outline 和键盘可访问性在深色下易失效
Safari 对 dialog 的 outline 渲染不稳定，Chrome 在深色模式下可能把默认焦点环压成不可见细线；更麻烦的是，showModal() 后首次聚焦常失败：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 强制定义
dialog:focus { outline: 2px solid Highlight; outline-offset: 2px; }（Highlight是系统色，比#3b82f6更兼容高对比度模式） - 不要依赖
dialog.showModal()自动聚焦——加setTimeout(() => dialog.focus(), 0)补一手 - 关闭后手动恢复触发按钮焦点：
dialog.addEventListener('close', () => triggerBtn.focus())，否则焦点可能丢失在空白处
backdrop 点击关闭在 Safari 中根本不可靠
Chrome/Edge 可通过 event.target === dialog 判断是否点在 backdrop 上，但 Safari 不暴露 backdrop 元素，event.composedPath() 也拿不到它。这意味着“点击遮罩关闭”逻辑在 Safari 中注定失效：
- 别用
dialog::backdrop做交互判断，它纯属样式层 - 稳妥方案：放弃原生 backdrop，外层套一个
<div class="dialog-backdrop">，用 JS 控制显隐和点击事件 - 若坚持用原生，至少提供显式关闭按钮，并确保其
color和background-color在深色模式下有足够对比度（比如background: #374151; color: #f9fafb;）
最常被忽略的一点：所有对 dialog 的样式重置都必须在 @media (prefers-color-scheme: dark) 内完成，而不是靠 JS 切换 class——否则用户在系统设置里切换主题时，弹窗不会实时响应。
