按钮颜色必须用CSS变量控制，如var(–btn-bg)；data-theme=”dark”须挂载在<html>上；悬停态需保证4.5:1对比度；SVG应设fill=”currentColor”；禁用态需独立变量–btn-disabled-bg/–btn-disabled-text。
按钮颜色必须用 CSS 变量控制，不能硬编码
直接写 background-color: #121212 在深色模式下会出问题：系统偏好切换时它不会变，用户手动切换主题时也容易漏改。所有按钮相关颜色（背景、文字、边框、悬停态）都得走 var(--btn-bg)、var(--btn-text) 这类变量。
常见错误是只在 :root 里定义一套变量，然后在 @media (prefers-color-scheme: dark) 里重写整套样式规则——这会导致 JS 切换主题时变量没更新，按钮颜色卡在旧状态。
-
:root中先定义亮色默认值：--btn-bg: #f0f0f0、--btn-text: #333 -
@media (prefers-color-scheme: dark)内只覆盖变量：--btn-bg: #2d2d2d、--btn-text: #e0e0e0 - 按钮样式统一用：
background-color: var(--btn-bg); color: var(--btn-text)
data-theme=”dark” 必须挂载在 <html> 上
把 data-theme="dark" 加到 <body> 或某个容器里，会导致 <input>、<textarea>、滚动条、<select> 下拉箭头这些原生控件颜色不一致——它们的样式继承链从 <html> 开始，不是 <body>。
JS 设置主题时，务必操作 document.documentElement：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.setAttribute('data-theme', 'dark');
对应 CSS 选择器也要匹配这个层级：
- ✅ 正确：
[data-theme="dark"] button { background-color: var(--btn-bg); } - ❌ 错误：
.dark button—— 容易和第三方库 class 冲突，且无法覆盖原生控件
悬停与按压反馈需单独适配暗色对比度
浅色模式下 background-color: #e0e0e0 悬停看起来正常，但放到深色背景上就几乎看不见了。暗色模式下的悬停色不能简单用“浅一号灰”，得保证至少 4.5:1 的文本可读对比度。
推荐做法是用同一组变量做相对偏移，而不是固定值：
- 亮色模式：
--btn-bg-hover: #d9d9d9 - 暗色模式：
--btn-bg-hover: #3a3a3a（比--btn-bg浅约 15% LCH 值） - 按钮悬停规则统一写：
button:hover { background-color: var(--btn-bg-hover); }
注意：不要依赖 opacity 实现悬停变暗/变亮，OLED 屏上会发灰或过曝；也不要对 box-shadow 使用纯黑 rgba(0,0,0,0.2)，换成 rgba(0,0,0,0.08) 或 rgba(255,255,255,0.05) 更安全。
按钮图标和 SVG 填充色要随主题自动翻转
内联 SVG 如果写死 fill="#333"，在深色模式下就会变成不可见的深灰块。最稳妥的方式是让 SVG 继承父元素的 color 值：
- SVG 标签里去掉
fill属性，加fill="currentColor" - 按钮本身设置
color: var(--btn-text)，SVG 就自动跟着变 - 避免用
filter: invert()，它会把彩色图标搞成负片，且无法控制反转强度
如果按钮里混用图标和文字，还要检查 vertical-align 和 line-height 在不同主题下是否仍对齐——深色模式字体渲染有时会有 1px 偏差，建议用 display: flex + align-items: center 替代行高对齐。
实际最难处理的不是颜色本身，而是按钮在表单上下文中的状态一致性：比如 <button type="submit"> 被禁用时的 opacity、cursor、color 三者必须同步响应主题变化，且禁用态在深色模式下不能靠降低亮度来模拟——得用独立变量 --btn-disabled-bg 和 --btn-disabled-text 显式定义。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xinjizixun/127181.html
