如何为Bulma的自定义颜色配置浅色与深色模式的不同取值

嘿，我来帮你搞定这个问题！Bulma 1.0的暗模式支持其实已经为自定义颜色的明暗切换预留了非常便捷的配置方式，你只需要调整一下$custom-colors的结构就能实现需求。

你之前是给自定义颜色设置了单一值，现在只需要把它改成包含light和dark键的嵌套映射就行，具体代码修改如下：

// 先分别定义浅色和深色模式下的groovy颜色值
$groovy-light: #4298B8;
$groovy-dark: #286B86;

// 调整自定义颜色的配置结构，为groovy指定两种模式的取值
$custom-colors: (
  'groovy': (
    'light': $groovy-light,
    'dark': $groovy-dark
  )
);

@use "bulma/sass" with (
  $custom-colors: $custom-colors,
);

这样配置之后，Bulma会自动帮你生成对应的CSS变量：在浅色模式下，var(--bulma-color-groovy)会指向#4298B8；当系统切换到深色模式（或者你通过Bulma的暗模式开关手动触发）时，这个变量会自动替换成#286B86，完全不需要你额外写媒体查询来手动切换。

如果你之后需要用这个自定义颜色，比如给元素加has-text-groovy或者has-background-groovy类，它们都会自动根据当前模式适配对应的颜色值，非常省心。

备注：内容来源于stack exchange，提问作者Leonard Brünnings