How do I change the background color? about bulma HOT 3 CLOSED

Wondering whether a "better" approach for me would be to update the CSS vars directly e.g. I found --bulma-body-background-color and --bulma-scheme-main but I didn't find a list of CSS vars and their definitions in the docs.

from bulma.

Honestly there's a bunch of different ways to change the background color of the page, however, if I was you I would leave $scheme-main and $scheme-invert alone as those are used throughout and

I think the safest way is to modify $body-background-color, but this would apply the background to both light and dark modes.

$my-awesome-background-color: rgb(0,0,1); // most awesome dark color with ever so slight hint of blue
// Changing the body background-color through *sass/base*
@use "..//node_modules/bulma/sass/base" with (
  $body-background-color: $my-awesome-background-color,
);

// Then import the rest using @forweard if not customizing any variables in the corresponding CSS or use @use
@forward "bulma/sass/components/card";
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/notification";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/layout/footer";
...

You can also change it through derived-variables, but that wouuld definitely upset the built-in themes mechanism. Changing it through $body-background-color is independent, regardless of light mode or dark mode :)

You can also change it manually like:

body {
   background-color: rgb(0,0,1);
}

And you can of course do it through CSS variables, but sounds like you want to setup a custom bulma theme, rather than rely on the light or dark presets.

But, $background to my understanding is more of a background for menus, panels, buttons, etc.

from bulma.

Thanks so much for the detailed reply and advice @digitigradeit. In the end, I went for the 'low tech' option of changing the CSS Variables.

:root {
  --bulma-body-background-color: #fffcf0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bulma-body-background-color: #100f0f;
  }
}

from bulma.