Bulma Color Palettes:从 7 个主题色到 21 级色阶的 CSS 变量体系与自动对比度算法【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma本文基于 Bulma 官方文档 Color Palettes in Bulma 展开系统讲解 Bulma 调色板Color Palettes的完整机制7 个主题色如何自动派生出一整套 CSS 变量、soft/bold 语义色在深色模式下为何会自动互换、每色 21 级色阶shade及其-invert对比色是如何按 WCAG 对比度算法计算出来的。读完后你可以直接复用 Bulma 的--bulma-*变量编写自己的 CSS并理解其底层 Sass 实现从而正确自定义或扩展配色。一、7 个主题色与调色板变量Bulma 内置 7 个主题色primary colors颜色名说明text正文文字色link链接色primary主色info信息提示色success成功提示色warning警告提示色danger危险/错误色这些默认值定义在 derived-variables.scss 中底层对应 initial-variables.scss 的 HSL 常量// sass/utilities/derived-variables.scss $primary: iv.$turquoise !default; $info: iv.$cyan !default; $success: iv.$green !default; $warning: iv.$yellow !default; $danger: iv.$red !default; $link: iv.$blue !default;Bulma 会为每个主题色自动生成一组 CSS 变量这组变量构成一个可玩弄同一颜色不同深浅shade的调色板。例如当primary为hsl(171, 100%, 41%)即默认的$turquoise时会生成以下变量变量含义--bulma-primary基础色--bulma-primary-rgbRGB 三元组用于自定义 RGBA如rgba(var(--bulma-primary-rgb), 0.5)--bulma-primary-h色相hue--bulma-primary-s饱和度saturation--bulma-primary-l明度lightness--bulma-primary-base等于--bulma-primary仅作引用--bulma-primary-invert放在 primary 上视觉效果合适的对比色前景/背景组合--bulma-primary-light明度 90% 的 primary--bulma-primary-light-invert在-light版本上表现良好的颜色--bulma-primary-dark明度 20%源码中取-10-l对应的色阶的 primary--bulma-primary-dark-invert在-dark版本上表现良好的颜色--bulma-primary-soft浅色模式下取light色、深色模式下取dark色--bulma-primary-bold浅色模式下取dark色、深色模式下取light色--bulma-primary-soft-invert与bold版本相同--bulma-primary-bold-invert与soft版本相同--bulma-primary-on-scheme在scheme-main默认白色即页面背景色上表现良好的颜色此外还有文档中「21 shades」一节列出的--bulma-primary-00到--bulma-primary-100全部 21 级色阶变量及各自的-invert变量后文详述。源码中的变量注册流程从源码结构看上述变量并非手工枚举而是由 css-variables.scss 中的register-hsl/register-rgb等 mixin 统一注册register-hsl把一个颜色拆成-h、-s、-l三个变量并取整register-rgb拆出-rgb三元组generate-color-palettecss-variables.scss#L191-L487则串联起整个调色板生成流程。浅色主题的入口在 light.scss它对$colorsmap 中每个颜色调用generate-color-palette再调用generate-on-scheme-colors计算 on-scheme 颜色其中white、black、light、dark四个无调色板颜色只走简化的generate-basic-palettelight.scss#L99-L133。二、Soft 与 Bold为深色模式设计的语义色Bulma 引入 Dark Mode 后带来一个新概念soft与bold颜色。soft是与背景对比度很低的柔和浅淡色。在浅色模式下它是浅色最适合做背景span classhas-background-primary-softThe quick brown fox jumps over the lazy dog/spanbold是与背景形成强烈对比的醒目深色。在浅色模式下它是深色最适合做文字颜色span classhas-text-primary-boldThe quick brown fox jumps over the lazy dog/span最佳实践是把两者组合使用soft 作背景、bold 作前景span classhas-text-primary-bold has-background-primary-soft The quick brown fox jumps over the lazy dog /span深色模式下的自动互换在 light/dark 之间切换时soft 和 bold 的取值会互换这样无需改动任何 CSS 类就能保持设计观感不变。源码层面的依据是light.scss 注册soft-l: $light-l、bold-l: $dark-l浅色模式下 soft 亮、bold 暗而 dark.scss 中反向注册soft-l: $dark-l、bold-l: $light-ldark.scss#L36-L39。由于 soft/bold 的颜色最终由「当前主题的soft-l/bold-l明度」加该色自己的 hue/saturation 合成见 css-variables.scss#L471-L485 中的buildHslaString主题一变输出自然互换。三、Invert 颜色为每种背景自动挑选前景色-invert系列变量的用途是与对应的基础色搭配比如用primary-light作背景色时就用primary-light-invert作前景色。同理还有primary-invert、primary-light-invert、primary-dark-invert以及每个数字色阶00–100都各有一个-invert伙伴色。对比度算法源码级原理这些 invert 颜色不是简单取黑/白而是由 css-variables.scss 中generate-color-palette的 STEP 3 计算得出对每个背景色阶用bulmaColorLuminancefunctions.scss#L102-L134计算 WCAG 相对亮度遍历所有前景色阶候选计算对比度(L1 0.05) / (L2 0.05)参考 W3C G17 公式只保留对比度大于 7即 WCAG AAA 级别的组合浅色背景优先选浅色前景更柔和否则持续替换为对比度更高的前景色阶若某背景找不到对比度 7 的前景则回退亮背景配00号最暗前景暗背景配100号最亮前景最终把结果写成--bulma-{color}-{digits}-invert-l: var(--bulma-{color}-{fg}-l)形式见 css-variables.scss#L351-L373即每个色阶的 invert 都指向某个色阶的 lightness 变量保证变量之间可追溯。on-scheme颜色采用类似但更宽松的机制generate-on-scheme-colorscss-variables.scss#L82-L134以页面主背景scheme-main默认白色为参照从基础色出发每次调整 5% 明度最多 20 步直到与背景达到对比度 5为止。四、每个颜色的 21 级色阶Bulma 会自动为每个颜色生成21 级色阶从「大约 0%」开始以 5% 为步长递增直到 100%。之所以说大约 0%是因为最后一位数字由基础色自身明度决定——若基础色明度是 42%那么--bulma-primary-00实际是2%而不是0%。色阶编号为00 05 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100源码中该列表与 helpers/color.scss 顶部的$digits列表完全一致color.scss#L5-L27。每个色阶都带一个-invert伙伴色例如/* 概念示意light/dark 主题中都会为每个 digits 注册成对变量 */ --bulma-primary-75: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1); --bulma-primary-75-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-invert-l), 1);对应地has-text-primary-75/has-background-primary-75、has-text-primary-75-invert/has-background-primary-75-invert等辅助类也全部可用生成逻辑见 color.scss#L219-L251。Lightness CSS 变量手写 CSS 时单独取明度如果写自定义 CSS 想直接复用某个色阶可以通过带-l后缀的专用明度变量单独访问其 lightness 值。例如--bulma-primary-75的定义形如:root { --bulma-primary-75: hsla( var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1 ); }其中--bulma-primary-75-l等于一个百分比值例如默认主色下约为76%可以直接用var(--bulma-primary-75-l)取值参与自己的hsl()计算。这正是 css-variables.scss 中buildHslaString函数L13-L19的产物每个色阶颜色都不写死完整 HSL而是引用共享的-h/-s与自身的-l变量。五、CSS 辅助类helper classes除了直接写color: var(--bulma-primary)Bulma 还为每个颜色提供成对的has-text-*前景与has-background-*背景辅助类。对 primary 来说可用名称覆盖以下所有取值颜色color类background类基础色has-text-primaryhas-background-primary反转色has-text-primary-inverthas-background-primary-invert浅色has-text-primary-lighthas-background-primary-light浅色反转has-text-primary-light-inverthas-background-primary-light-invert深色has-text-primary-darkhas-background-primary-dark深色反转has-text-primary-dark-inverthas-background-primary-dark-invert页面背景适配色has-text-primary-on-schemehas-background-primary-on-scheme21 级色阶has-text-primary-00…has-text-primary-100has-background-primary-00…has-background-primary-100色阶反转has-text-primary-00-invert…has-text-primary-100-inverthas-background-primary-00-invert…has-background-primary-100-invert柔和/醒目has-text-primary-soft/has-text-primary-boldhas-background-primary-soft/has-background-primary-bold柔和/醒目反转has-text-primary-soft-invert/has-text-primary-bold-inverthas-background-primary-soft-invert/has-background-primary-bold-invert其余 6 个主题色text、link、info、success、warning、danger遵循完全相同的命名规则只需替换前缀。这些类全部由 helpers/color.scss 通过循环生成并带有额外细节交互态作用于a、button或加了is-hoverable的元素时hover/focus-visible 与 active 状态会按主题变量hover-color-l-delta/active-color-l-delta浅色主题分别为 -5%、-10%见 light.scss#L31-L41自动加深color.scss#L253-L304局部调色板bulma-palette-primary类会在元素作用域内把该色暴露为--h、--s、--l、--color以及--color-00…--color-100局部变量方便在自定义组件里直接引用整组色阶color.scss#L306-L317。六、扩展调色板自定义颜色上述机制对自定义颜色同样生效。derived-variables.scss 提供$custom-colors钩子通过 functions.scss 的mergeColorMaps合并进$colors// 在你的自定义 _variables.scss 中 $custom-colors: ( brand: ( hsl(200, 80%, 45%), // base hsl(200, 80%, 95%), // 可选 invert hsl(200, 80%, 92%), // 可选 light hsl(200, 80%, 25%) // 可选 dark ) );mergeColorMapsfunctions.scss#L8-L84支持 1~4 个分量的列表只给 base 时invert/light/dark 由bulmaFindColorInvert等函数自动推算。合并后brand会像 7 个内置主题色一样在浅色/深色主题中获得完整调色板、21 级色阶、has-text-brand-*/has-background-brand-*辅助类。类似地$custom-shades可扩展灰阶 shades$shadesmap 同样经由mergeColorMaps合并。七、主题切换入口变量在哪些选择器下生效理解调色板变量何时、在哪一层被定义对调试自定义主题很有帮助。themes/_index.scss 展示了完整结构变量宿主默认:root直接输出浅色主题全套变量 计算后的setup-theme链接、阴影、代码色等派生变量见 themes/setup.scssmedia (prefers-color-scheme: light|dark)下按系统偏好重注册变量[data-themelight]/.theme-light/[data-themedark]/.theme-dark四个显式切换选择器同样会重新注入对应主题的变量css-variables.scss 中的bulma-thememixinL489-L494。这就是文档中切到深色模式 soft/bold 自动互换、-on-scheme颜色随之重算的实现路径深色主题通过dark-thememixin 重注册soft-l/bold-l与全部*-on-scheme变量而颜色类本身hue/saturation 部分保持不变。小结Bulma 调色板以 7 个主题色为种子通过 css-variables.scss 的generate-color-palette自动生成基础变量、-rgb、H/S/L 分量、light/dark/soft/bold/on-scheme系列以及 21 级数字色阶和全部-invert变量invert 色阶按 WCAG 相对亮度、以对比度 7AAA为目标自动挑选on-scheme 以对比度 5 为目标逐步逼近全部逻辑在编译期完成运行时只是纯 CSS 变量引用soft/bold 通过主题级soft-l/bold-l明度变量在 light.scss 与 dark.scss 间互换实现深色模式零改动适配helpers/color.scss 把整组变量映射为has-text-*/has-background-*辅助类并附带交互态加深与bulma-palette-*局部变量需要新颜色时通过$custom-colors/$custom-shades注入即可获得与内置颜色完全一致的完整调色板能力。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
