SuperAPI AI 工具集

bootstrap-color-system

通用与其它

查看项目

更新于 10-15 23:57

技能介绍

用途:在 Bootstrap 6 中定制颜色系统。颜色走固定管线:scss/_colors.scss 定义 16 个 oklch() 基础色相并生成 025–975 色阶;scss/_theme.scss 将语义名(primary、danger 等)映射到色阶令牌;scss/_root.scss 输出 --<name>-<role> 与层级颜色令牌;helpers 输出 .theme-<name> 类;组件与工具类只读 --theme-* 与层级令牌,不读原始色相。定制时先定位要改的层。

主要能力:基础色相与色阶(改色相即重算整条色阶,可向 $colors 合并新增色相);主题色 $theme-colors 含 primary、accent、success、danger、warning、info、inverse、secondary,每个含 base、bg、bg-subtle、bg-muted、fg、fg-emphasis、contrast、border、focus-ring 九个角色,多为 light-dark() 对;层级颜色 $theme-bgs、$theme-fgs、$theme-borders 覆盖中性表面、前景与边框;颜色模式通过 color-scheme 与 light-dark() 解析,用 [data-bs-theme="dark"] 切换,无需 JavaScript;编译期用 defaults() 合并覆盖,运行期直接改 CSS 自定义属性。

使用方式:编译期示例 @use "bootstrap/scss/bootstrap" with ($blue: oklch(58% 0.21 250)); 或传入部分 $theme-colors 映射。运行期在 :root、:host 或子树覆盖 --bs-* 令牌(源码编译用无前缀名)。工具类按角色命名:.fg-primary、.bg-subtle-primary、.border-primary 等,透明度为 10 步进阶梯。

限制:primary、success、danger 为必需键,重命名或删除会破坏构建;嵌套主题色映射只合并一层,改一个角色需传整个子映射;color-contrast() 只作用于 Sass 颜色值而非 var() 引用;仅手写 .theme-brand 类时不会生成 .bg-brand 与 --brand-* 令牌。验证:npm run css-lint、npm run css,并检查两种颜色模式与对比度。