How to use Nuxt Color Mode with Bulma?

Question

I recently tried this awesome @nuxtjs/color-mode module. It works great on every sandbox I did.

Now, I would like to integrate this on my real project with Bulma as UI framework. I already add color-mode as the module and configure my nuxt.config.js. When I change the theme color (from light to dark), every Bulma components stay the same but all other (like <span> for example) change from light to dark mode.

Does anyone have some tips about how to use properly color-mode with Bulma?

Answer 1

I just created a tutorial on how I did it with nuxt-color-mode and Bulma: https://github.com/kensixx/nuxt-color-mode-with-bulma

Basically you would want to create some .scss files that will override Bulma's scss variables.

It would be really great if Bulma has implemented their own dark mode versions of the components to make it easier, though. But I believe it's one of their pending tickets.