如何在Bulma 1.0中全局禁用暗黑模式？

你当前的尝试存在两个核心问题：

1. 写的@media (prefers-color-scheme: light)规则内部为空，没有实际覆盖任何样式变量；
2. data-theme="light"没生效，是因为Bulma默认的暗黑模式逻辑并非基于data-theme属性，而是通过系统的prefers-color-scheme媒体查询来切换变量。

以下是两种可靠的全局禁用暗黑模式的方法：

方法一：强制全局使用浅色主题变量 #

在你的base.css最顶部添加以下代码（利用CSS变量优先级，直接覆盖Bulma的暗黑模式变量）：

:root {
  /* 覆盖Bulma核心配色变量，强制使用浅色主题值 */
  --bulma-scheme-main: #fff;
  --bulma-scheme-main-bis: #fafafa;
  --bulma-scheme-main-ter: #f5f5f5;
  --bulma-scheme-invert: #0a0a0a;
  --bulma-scheme-invert-bis: #121212;
  --bulma-scheme-invert-ter: #1a1a1a;
  /* 覆盖文本与背景色 */
  --bulma-text: #4a4a4a;
  --bulma-background: #fff;
  /* 若有需要，可补充覆盖其他Bulma变量，比如按钮、卡片等组件的颜色 */
}

这种方法会忽略系统的配色偏好，无论用户系统是浅色还是深色，页面始终使用浅色主题。

方法二：仅在系统深色模式下强制切换为浅色 #

如果你希望系统浅色模式保持原样，仅禁用系统深色模式对页面的影响，可在base.css中添加：

@media (prefers-color-scheme: dark) {
  :root {
    --bulma-scheme-main: #fff;
    --bulma-scheme-main-bis: #fafafa;
    --bulma-scheme-main-ter: #f5f5f5;
    --bulma-scheme-invert: #0a0a0a;
    --bulma-scheme-invert-bis: #121212;
    --bulma-scheme-invert-ter: #1a1a1a;
    --bulma-text: #4a4a4a;
    --bulma-background: #fff;
  }
}

这样当用户系统设置为深色时，页面仍会强制使用浅色主题，而系统浅色模式下正常显示。

注意事项 #

• 确保base.css的导入顺序在Bulma核心样式之后（你当前的导入顺序是正确的），这样自定义样式才能覆盖Bulma的默认规则；
• 若页面中还有Bulma扩展组件的深色样式未被覆盖，可根据组件对应的CSS变量补充到上述代码中。

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