使用CSS自定义BulmaCSS主色失效的技术咨询

你在使用Bulma 1.0.0时遇到的问题是：通过:root定义--bulma-primary变量修改主色没生效，但修改--bulma-size-medium能正常改变按钮尺寸。

问题原因 #

当你给<html>标签添加data-theme="light"属性强制指定主题时，Bulma会把主题相关的颜色变量（比如--bulma-primary）挂载在html[data-theme="light"]选择器下，这个选择器的优先级比:root高，所以你在:root里定义的--bulma-primary会被默认的主题变量覆盖。而尺寸类变量（比如--bulma-size-medium）不属于主题特定变量，默认就在:root下定义，所以你的自定义能生效。

解决方法 #

有两种方式可以解决这个问题：

方法一：针对指定主题定义变量

把变量定义从:root改成对应主题的选择器：

<!DOCTYPE html>
<!-- Force the light theme: -->
<html data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">

    <style>
        html[data-theme="light"] {
            --bulma-primary: red;
            --bulma-size-medium: 0.5rem;
        }
    </style>
</head>
<body>
    <button class="button is-primary is-medium">Button</button>
</body>
</html>

方法二：移除强制主题属性

如果不需要固定使用light主题，可以删掉<html>标签上的data-theme="light"，这样:root下定义的--bulma-primary就能正常覆盖默认值：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">

    <style>
        :root {
            --bulma-primary: red;
            --bulma-size-medium: 0.5rem;
        }
    </style>
</head>
<body>
    <button class="button is-primary is-medium">Button</button>
</body>
</html>

内容的提问来源于stack exchange，提问作者Desmes