safari启用系统暗黑模式后表单控件显示异常，需分层干预：先确认“外观”设为“自动”或“深色”，再检查html是否声明color-scheme: light dark；若缺失则必须添加；临时修复用开发者工具禁用低对比度css；永久修复可设置网站偏好强制深色信号或用stylus注入精准css；高级场景可用lch()函数提升可读性。
当你在Safari中启用系统暗黑模式后，发现表单里的输入框、下拉菜单、复选框文字发灰、边框几乎看不见，甚至光标颜色与背景融合导致无法定位编辑位置，这说明原生控件未正确响应深色语义或被网站CSS错误覆盖，需分层干预。
确认是否为系统级控件渲染失效
打开任意含表单的网页（如 login.github.com），观察地址栏右侧是否出现“aA”图标 → 点击它 → 选择“网站偏好设置” → 查看“外观”是否显示“自动”。若显示“深色”，说明Safari已固化发送深色信号，但系统未将该信号传递给原生控件渲染引擎；此时需检查是否存在且生效。
在网页任意位置右键 → “检查元素” → 切换到“元素”面板 → 点击顶部标签 → 右侧“样式”区域搜索color-scheme。若未找到color-scheme: light dark声明，或仅看到light，则【必须在中添加】，否则input、textarea、select等控件将沿用浅色系统默认样式，造成对比度崩塌。
临时修复：用开发者工具覆盖失效样式
此方法可立即验证问题是否源于CSS覆盖，适用于Mac Safari：
按 Command + Option + I 打开开发者工具 → 切换至“元素”面板 → 在左侧HTML结构中定位到目标表单控件（如）→ 右侧“样式”区域滚动查找background-color、border、color等属性 → 找到值为#fff、#000、rgba(0,0,0,0.1)等低对比度声明 → 点击其前的复选框取消勾选。
若取消后输入框立刻显现出清晰边框和可读文字，说明网站CSS强行锁定了浅色值；【注意：此操作关闭开发者工具即失效，仅用于诊断】。
永久修复：注入精准CSS重置规则
方法一：通过Safari网站偏好强制深色渲染信号
打开Safari → “设置” → “网站” → 左侧列表点“外观” → 右侧“默认外观”下拉菜单选“深色” → 关闭设置 → 重新加载目标网站。该操作会向该域名强制发送prefers-color-scheme: dark信号，并触发Safari对原生控件的深色渲染逻辑，无需修改网页代码。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
方法二：用Stylus扩展注入控件级CSS（推荐iOS/iPadOS及高频访问站点）
① App Store安装Stylus → 进入“设置” → “Safari浏览器” → “扩展” → 启用Stylus；
② 打开Stylus配置页 → 新建规则 → 域名填目标网站完整地址（如example.com）→ 在CSS框内粘贴：
input, textarea, select, button { background-color: #1e293b !important; border: 1px solid #475569 !important; color: #f1f5f9 !important; }
③ 保存后刷新网页。此规则直接接管所有表单控件的背景、边框与文字色，绕过网站原有低对比度样式。
高级修复：用lch()微调文本可读性
若发现文字仍显模糊或疲劳感强，不要用filter调整，而是改用lch()函数精确控制明度：
在Stylus或网站自定义CSS中，将表单文字色从#94a3b8改为lch(92% 0 0)，背景色从#0f172a改为lch(22% 0 0)；这两者组合在WCAG AA标准下对比度为4.8:1，既满足可读性又避免纯黑纯白刺眼。
Chrome 111+、Safari 16.4+ 支持lch()，但Firefox需手动开启layout.css.color_function.enabled标志——若目标用户含大量Firefox用户，可降级使用hsl(210, 5%, 92%)替代lch(92% 0 0)。
