如何在Bulma 1.0中使用Sass设置默认浅色模式？

核心问题分析 #

Bulma v1.0默认通过prefers-color-scheme媒体查询自动适配系统主题，直接引入完整包会触发深色模式切换；单独引入light.scss仅包含主题变量，缺少基础重置、工具类等核心样式，导致深色模式下无样式加载。

可行解决方案 #

方案一：通过变量覆盖强制浅色主题 #

在引入Bulma前定义$scheme变量为light，直接禁用系统主题适配逻辑，同时保留完整样式：

// 先声明变量覆盖默认配置
@use "bulma/sass" with (
  $scheme: light
);

方案二：手动按需引入基础样式+浅色主题 #

如果需要更精细的样式控制，按顺序引入基础依赖和浅色主题，确保样式完整性：

// 引入基础工具类、重置样式和通用基础样式
@use "bulma/sass/utilities/_all";
@use "bulma/sass/base/_all";
// 引入浅色主题变量
@use "bulma/sass/themes/light";
// 按需引入组件和布局样式
@use "bulma/sass/components/_all";
@use "bulma/sass/layout/_all";

关键注意事项 #

• 禁止单独仅引入light.scss，它仅提供主题色变量，不包含Bulma的核心基础样式。
• 设置$scheme: light会全局禁用prefers-color-scheme的自动适配，无论系统主题如何，网站始终使用浅色模式。

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