应降低阴影透明度并改用浅色半透阴影，如rgba(255,255,255,0.05)，同时确保box-shadow在暗色主题下被正确覆盖，避免复用亮色模式参数导致生硬发灰。
button 元素在暗黑模式下阴影过重怎么办
暗色背景下 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 会显得生硬、发灰，甚至让按钮“陷进去”。这不是 bug，是明色模式下的阴影值直接复用到暗色背景导致的对比度失衡。
- 暗色模式下优先降低阴影透明度，比如改用
rgba(0,0,0,0.1)或更稳妥的rgba(255,255,255,0.05)，后者在深灰背景上能保留轻微浮起感 - 避免在
@media (prefers-color-scheme: dark)里只覆盖background却漏掉box-shadow—— 很多团队只改颜色，阴影还沿用亮色逻辑 - 若用
data-theme="dark"切换，对应 CSS 必须写成html[data-theme="dark"] button { box-shadow: ... }，而不是仅靠媒体查询；否则用户手动切主题时阴影不变
如何让 button 的 focus outline 在暗黑模式下可读又不突兀
默认的 outline: -webkit-focus-ring-color 在暗色背景上常是浅蓝或亮紫，既刺眼又不符合主题调性。它不会随 :root 变量自动变色，必须显式重写。
- 禁用浏览器默认 focus outline：
outline: none，然后用box-shadow模拟（更可控） - 推荐写法：
button:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }，并在:root和html[data-theme="dark"]中分别定义--focus-ring - 别把 focus 样式只写在
@media (prefers-color-scheme: dark)里——那样用户手动切主题后，focus 依然无效
SVG 图标按钮在暗黑模式下颜色不一致的根源
很多按钮内嵌 <svg></svg>，但图标 fill 写死为 #000 或 currentColor 却没配对控制，结果暗色模式下图标要么消失（黑底+黑图标），要么发灰（亮色 currentColor 被继承）。
- 统一用
fill="currentColor"，并确保父级button的color值由var(--text)控制 - 不要依赖
svg { color: ... }—— SVG 元素本身不响应color，只有currentColor才继承 - 若需图标颜色独立于文字（如按钮带红标），改用
fill: var(--icon-error)并在主题变量中同步定义
为什么 button:hover 动效在暗黑模式下显得“卡顿”
常见原因是悬停时只改了 background，却没同步调整 box-shadow 或 transform 的参数，导致视觉反馈断层；更隐蔽的问题是过渡属性没覆盖所有变化项。
- 必须显式声明过渡目标：
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s—— 少写一项，那一项就是突变 - 暗色模式下
transform: translateY(-2px)配合浅色阴影容易穿帮，建议搭配微调box-shadow深度和颜色 - 避免用
filter: brightness()做 hover 效果——它会影响整个渲染层，包括子 SVG 和文字，且在部分 Safari 版本中触发重绘异常
最易被忽略的一点：按钮的 border 和 background 必须共用同一套变量体系。写 background: var(--btn-bg) 却用硬编码 border: 1px solid #333，切换主题时边框就永远卡在亮色逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
