Customize colors and themes for Bulma

Question

I am currently trying to make a multi-theme design system based on bulma. But I'm currently working on adding a multi-theme system.

I added this to my customstyle scss file but it doesn't seem to work

@charset "utf-8";


:root {
    --primary: red;
    --secondary: #068295;
}

body[class="light"] {
    --primary: #F7A800;
    --secondary: #068295;
}

body[class="dark"] {
    --primary: blue;
    --secondary: #068295;
}

$primary: var(--primary); // this works 
$background: blue;
$text-strong: red;

$secondary: #8BC91D; // this works but without theming
// $secondary: var(--secondary); // this doesn't work 
$secondary-invert: findColorInvert($secondary) !default;

$custom-colors: (
    "secondary":($secondary, $secondary-invert),
);

@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";

When I run the node sass command to generate the css file I can see the is-secondary attribute generated when I don't use the variable, but when I use the variable to define my $secondary variable, the is-secondary attribute is not generated

Answer 1

The current major version of Bulma does not support css variables.

I made it work by using the css-variables branch. npm I https://github.com/jgthms/bulma/tree/bulma-v1-css-variables;

First import:

@import 'bulma/sass/utilities/_all';
@import 'bulma/sass/base/_all';
@import 'bulma/sass/elements/_all';
@import 'bulma/sass/form/_all';
@import 'bulma/sass/components/_all';
@import 'bulma/sass/grid/_all';
@import 'bulma/sass/helpers/_all';
@import 'bulma/sass/layout/_all';
@import 'bulma/sass/themes/default.scss';

themes/default.scss bases all css variables on sass variables.

You can then use CSS variables to modify the defaults so you can have dark mode, theme switchers and other things.

:root {
  --bulma-danger-h: 190;
}