I am currently working on implementing a dark and light theme using bulma. My plan is to dynamically assign classes to elements using vue (such as .dark-theme or .light-theme) and then apply different colors based on these themes. However, I am facing an issue when trying to customize the bulma variables in main.scss using class selectors, as shown below:
.dark-theme {
$primary: /* some color; */
}
.light-theme {
$primary: /* some other color; */
}
@import "~bulma/bulma"
I have researched similar questions like the one found here, but the solutions provided do not seem to work for me because I specifically need to adjust the actual $ variables based on class selectors.
If my current approach seems ineffective and there is a better solution available, please feel free to share your insights. It is worth noting that my bulma setup is functioning properly, and altering the variable outside of selectors produces the desired results.