$background varable cannot be set with css variable

[Freymaurer]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.4] This is a Sass issue: I'm using version [1.64.2] I am sure this issue is not a duplicate?

Description

Steps to Reproduce

I want to use css variables with Bulma to create a dark/light mode toggle on via the data-theme attribute. Bulma is referenced as npm package and compiled with sass and vite.

I followed Bulma docs to set custom variables, the following code reduced to minimum:

// 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";

// 2. Set your own initial variables
html[data-theme="dark"] {
    --fs-background: #252529;
}

html[data-theme="light"] {
    --fs-background: #f6f6f7;
}

// 3. Set the derived variables
$background: var(--fs-background);

@import "../../node_modules/bulma/bulma.sass";

I also used the steps above to set other variables which worked fine: (other css variables omitted for shorter code)

$scheme-main: var(--scheme-main);
$scheme-invert: var(--scheme-invert);
$text: var(--text);
$text-light: var(--text-light);
$text-strong: var(--text-strong);
$content-blockquote-background-color: var(--fs-background);
$modal-background-background-color: var(--background);
$tabs-boxed-link-hover-background-color: var(--fs-background);

Expected behavior

I expect $background to be replaced just like the others

Actual behavior

I get a compilation error:

[coderabsolute]

Are you trying to achieve the dark mode?

[Freymaurer]

I am trying to archieve a dark mode, yes 😅 Not sure if there is a "the" darkmode