Multi-theme support with css variables (and auto dark-mode) (WIP)

[bvandevliet]

This is a new feature, but not a complete solution (yet) / it's a work in progress. But I wanted to share my idea about how we may add multi-theme support and auto dark-mode using CSS variables to allow for easy theme switching at run-time.

Fixes #1775, #1837, #2342 and #3028

Tradeoffs

• Some colors are designed to be calculated at compile-time.
  These colors may have to manually be defined for different themes.
• Commented two background-color properties in tag.sass as I do not directly have a good solution here.
• All bulmaRgba() calls are replaced with css native rgba(),
  but most of them may be broken since most css variables evaluate to a hex color.
  (ctrl+shift+F for rgba(var(-- and you will know what I mean)
• I did not change the dark theme yet, it's now more or less the same as the light theme.

Testing Done

So far I did npm run build without errors and verified the css variables are generated correctly.
I also tested this on a project I'm working on and most of it seems to work just fine.

Changelog updated?

No.

[Tofandel]

You may want to check https://github.com/jgthms/bulma/compare/css-variables as this was already explored and didn't see the light of day. I had a full solution which didn't get approved (#1837), if anybody want to take it over and fix the conflicts be my guest, I stopped using bulma after that, so I'm not going to touch this PR anymore

But if you are putting work, just in the hope to get this merged and not for your own use, please don't waste another minute, as it was already made clear that those PRs will not be accepted

[bvandevliet]

Hi @Tofandel, I see, your PR looks very similar indeed. And it solves the same issue of which I think is worthy to include in Bulma. I will not be making much more effort improving any PR on this topic as I just needed it for my own use but didn't want to keep this just to myself, it may be another trigger to review it or serve as inspiration, or not.. I'll just leave it open for just a bit longer, maybe me or someone else decides to get back to it. Thanks for your reply!

[daniil4udo]

@bvandevliet great job

I'd love your contribution in BULVAR. That's a complete rewrite of Bulma & Buefy to use CSS variables and replace @import with @use & @forward

I've started to work on light-dark them.