2

I'm trying to implement a dark and light theme using bulma. The approach I was thinking of is to assign classes to elements dynamically using vue (e.g .dark-theme or .light-theme) and then use different colours depending on those themes. However, customising the bulma variables based on class selectors in main.scss doesn't seem to be working, for example:

.dark-theme {
    $primary: /* some colour; */
}
.light-theme {
    $primary: /* some other colour; */
}

@import "~bulma/bulma"

The closest question I could find was this one but the solution does not work for me as I need to modify the actual $ variables based on class selectors.

If my approach is stupid and there is a better one please let me know. Note that my bulma setup appears to be working correctly, and changing the variable outside of selectors works as expected.

Piturnah
  • 494
  • 1
  • 4
  • 11
  • 1
    https://stackoverflow.com/questions/8796107/how-to-make-changeable-themes-using-css-and-javascript – Bert W Jul 17 '21 at 18:38
  • 1
    https://stackoverflow.com/questions/37801882/how-to-change-css-root-color-variables-in-javascript – Bert W Jul 17 '21 at 18:39

1 Answers1

2

You could compile two css files from the bulma scss files, one for dark mode & one for light mode. Then if dark mode is enabled just reload the page with the dark css file or use the method in the first comment to change theme without reloading.

Here it suggests swapping the $scheme-main & $scheme-invert values to generate a dark mode.

I do not have experience with Vue but I know that it would be possible to implement this in JavaScript.

avt613
  • 309
  • 2
  • 5