直接改$primary等Sass变量不能直接换主题，需在@import框架前声明变量；Tailwind中theme.extend.colors仅追加颜色名，需配合插件生成工具类；运行时切换主题依赖框架是否使用CSS变量。
直接改 $primary 等 Sass 变量就能换主题？别急，先看编译链路
多数 CSS 框架（如 Bootstrap、Bulma、Tailwind 的早期版本）用 Sass/Less 定义颜色变量，但@import顺序和变量作用域决定你能不能“覆盖成功”。常见错误是：在框架源码之后才定义$primary，结果被框架的默认值覆盖——Sass 中变量一旦被赋值，后续同名!default声明无效。
正确做法是：在@import框架前，先声明你的变量：
$primary: #3b82f6; $secondary: #6b7280; @import "bootstrap/scss/bootstrap";
注意：!default只在变量未定义时生效；若框架内部用了$primary: #0d6efd !default，你必须在它之前定义$primary，否则无效。
Tailwind 的 theme.extend.colors 和 theme.colors 有本质区别
在 tailwind.config.js 中，theme.colors 是完全替换内置调色板，theme.extend.colors 是追加新颜色名（如brand: "#1e40af"），但不会影响bg-blue-500这类已有类名的含义。
立即学习“前端免费学习笔记（深入）”；
想让bg-primary生效，得同时做两件事：
- 在
theme.extend.colors里加primary: "#3b82f6" - 在
plugins中注册自定义类，或用addUtilities注入.bg-primary { background-color: theme('colors.primary') }
否则bg-primary根本不会生成 CSS 规则——Tailwind 默认不为扩展色生成工具类。
运行时切换主题？别硬套 CSS 变量覆盖框架类
想用prefers-color-scheme或按钮切换深色模式，直接给:root设--bs-primary: #3b82f6对 Bootstrap 5.3+ 有效（它已全面迁移到 CSS 变量），但对旧版或 Bulma 这类纯 Sass 框架无效——它们编译后就没了变量。
可行路径只有两条：
- 用构建时多主题输出：为每个主题生成独立 CSS 文件，按需加载
- 用 JS 动态写入 style 标签，覆盖所有关键 CSS 变量（如
document.documentElement.style.setProperty('--bs-primary', '#3b82f6')），前提是框架本身依赖这些变量
盲目在:root里塞一堆--my-primary，却不改框架源码引用逻辑，等于白忙。
自定义类名冲突风险比想象中高
比如你定义了.text-brand，但框架未来版本也加了同名类，就可能覆盖或被覆盖。更稳妥的方式是加命名空间前缀：
.my-text-brand { color: var(--my-primary); }
.my-bg-accent { background-color: var(--my-accent); }
再配合!important慎用——它会破坏框架原有的优先级设计，导致响应式断点类（如md:text-lg）失效。
真正要小心的是那些隐式依赖颜色语义的组件：Alert 的.alert-success背景色、Button 的.btn-outline-primary边框色……改了变量后，务必手动检查这些组件渲染是否符合预期。
