Using Bulma variables changes accordint to color-mode

[pedropcruz]

Hey guys 👋

I have the problem of changing bulma variables according to each color mode. Example:

| assets
-- | scss
-- -- | override
-- -- -- | bulma.scss
-- -- | themes
-- -- -- | dark.scss
-- -- -- | light.scss

On my bulma file i have this:

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

// Here nothing happens. Any solutions for this?

html {
	&.light-mode {
		@import '../themes/light';
	}

	&.dark-mode {
		@import '../themes/dark';
	}
}

// here i can change any variable i want;

$navbar-item-img-max-height: $size-2;
$navbar-background-color: transparent;

@import '~bulma';

the dark.scss and light.scss have bulma variables inside (assuming they are the opposite) for example:

$primary: $secondary-color;

// customize styles
$body-color: $secondary-color;

I already try the solution with prefers-color-scheme but nothing happens as well. Any solution?

Thanks!

[pedropcruz]

I found a solution, but i think it's a little bit hacky. but share your thoughts about this:

thanks

[Atinux]

Thank you for sharing your solution @pedropcruz

I believe using CSS variable is the way to go here 😄