dark:前缀不支持图标自适应，必须用inline svg+currentcolor或css变量控制；因tailwind的dark:仅作用于其内置工具类，对img/svg/字体图标等无样式管理能力。
直接给结论：dark: 前缀本身不支持图标自适应，必须配合 filter 或 CSS 变量手动控制；用 invert() + brightness() 容易过曝或发灰，真正稳的方案是 SVG 内联 + currentColor + dark:text-white。
为什么 dark:icon 不生效？
Tailwind 的 dark: 仅作用于它内置的 utility class（如 text-gray-700、bg-blue-100），对 SVG 图标、<img> 或字体图标（如 Font Awesome）完全无效——这些不是 Tailwind 管理的样式属性。
- 写了
dark:invert？Tailwind 默认不提供这个变体，会直接忽略 - 用了
<img src="sun.svg">？深色模式下它还是原图，不会自动换 - 套了
dark:bg-black在图标容器上？只改背景，图标本身颜色不变
用 currentColor 实现 SVG 图标自动适配
把 SVG 写成内联，并把关键颜色设为 currentColor，再用 Tailwind 控制父元素的文本色，图标颜色就跟着变。
示例：
<button class="text-gray-700 dark:text-yellow-300"> <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg></button>
-
fill="currentColor"是关键，让 SVG 颜色继承父级text-*类 -
text-gray-700 dark:text-yellow-300控制浅色模式灰字、深色模式黄字 - 不用 JS、不依赖系统媒体查询，纯 CSS 层叠生效
用 CSS 变量 + filter 替代 invert() 的坑
想对 <img> 或外部 SVG 做滤镜适配？别直接用 filter: invert(1) brightness(0.8) —— 它对彩色图标会失真，对带透明度的 PNG 会变脏。
更可控的做法是定义两套变量，在 :root 和 .dark 下分别设置：
:root {
--icon-filter: none;
}
.dark {
--icon-filter: brightness(0.9) contrast(1.2);
}
然后在元素上写：
@@##@@
-
filter-[var(--icon-filter)]是 Tailwind 的任意值语法，需开启content配置支持 - 避免用
invert()：它翻转所有通道，白色变黑、红变青，不可逆 - 深色模式下加
brightness和contrast更安全，尤其适合单色线性图标
服务端渲染时图标闪白/闪黑怎么办
Next.js、Nuxt 等 SSR 框架首次渲染时没有 JS，document.documentElement.classList 还没加 dark，但 HTML 已经按默认主题生成——图标会先显示错，再跳变。
- 最简解法：在
标签上预设 class，比如服务端读 localStorage 或 Cookie，输出 - 次选：用
style="color-scheme: light dark"告诉浏览器初始偏好，部分图标（如input[type="range"]）能提前响应 - 绝对不要靠 JS onload 后才加 class——用户会看到明显闪烁
真正难的不是怎么切，而是怎么让第一次渲染就对。这要求 HTML 输出前就知道主题倾向，否则任何 CSS 或 filter 方案都救不了首屏闪动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
