Bulma: Customize all colors without sass?

[DarrylD]

Wondering if anyone found a decent way to override all of the colors without needing sass to override variables.

Looking to change the colors dynamically via js upon page load. Trying to get around having multiple "theme" stylesheet overrides.

I may be reaching but, figured I'd ask.

[jgthms]

Try using CSS variables:

$green: var(--green)

:root {
  --green: #23d160;
}

[whawker]

Would love this functionality too, unfortunately IE11's lack of support for CSS variables kills it 😢

[sandrina-p]

I've tried using CSS variables but then it doesn't know the variable's real value (color) is...

Running "sass:dev" (sass) task
>> Error: argument `$color` of `red($color)` must be a color
>>         on line 46 of node_modules/bulma/sass/utilities/functions.sass, in function `red`
>>         from line 46 of node_modules/bulma/sass/utilities/functions.sass, in function `colorLuminance`
>>         from line 59 of node_modules/bulma/sass/utilities/functions.sass, in function `findColorInvert`
>>         from line 15 of node_modules/bulma/sass/utilities/derived-variables.sass
>>         from line 25 of frontend/simple/sass/bulma_overrides/utilities/variables.scss
>>         from line 1 of frontend/simple/sass/bulma_overrides/utilities/_index.scss
>>         from line 2 of frontend/simple/sass/bulma_overrides/index.scss
>>         from line 9 of frontend/simple/sass/main.sass
>> >>   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color

Is there a workaround?

[dom96]

It would be nice to be able to do this. Not all of us want to get dragged into the node/npm ecosystem ;)

[sandrina-p]

Would love this functionality too, unfortunately IE11's lack of support for CSS variables kills it 😢

@whawker Not really...

.foo {
  color: red;
  color: var(--primary);
}

You can use fallback when the browser doesn't support css variables, it will read the previous matched property. Bulma could follow this approach. What do you think @jgthms ?

[wtho]

@sandrina-p It would bloat up the css by adding the fallback to every color in css, which is still reasonable in my opinion.

More critical is that

• it would make the colorscheme easier changeable by browser plugins or end-users with little effort
• it would make sass-functions like darken not usable anymore, which are currently used in most CSS-Frameworks like Bulma to manipulate colors for things like hover-effects. As far as I know there is no function available or proposed to replace it 'online' in CSS. E. g. instead of one $primary-color, several lighter and darker shades of that color have to be declared to override it.

[sandrina-p]

As far as I know there is no function available or proposed to replace it 'online' in CSS. E. g. instead of one $primary-color, several lighter and darker shades of that color have to be declared to override it.

@wtho you can accomplish this using [PostCSS] with the plugin postcss-color-mod-function:

[PostCSS color-mod() Function] lets you modify colors using the color-mod()
function in CSS, following the [CSS Color Module Level 4] specification.

[jgthms]

You can go without npm by using the Sass gem: https://bulma.io/documentation/customize/with-sass-cli/

[rhwilr]

I'm working on a project where the user can change the primary color of the ui. So it would be really useful to be able to do this with css-variables.
I noticed that this feature is on the roadmap for v1. Has there already been some progress on this?
I'm able to invest a few hours into this feature if you want me to give it a try.

[NullVoxPopuli]

What if the next version of bulma:

• supports css variables
• does not support any browser that does not support css variables.

Personally, this would allow my app to have dynamic themes, without silly JavaScript hacks

[oddjobz]

Currently I can change the theme on my app selecting an option from a drop-down menu .. all happens instantly in real-time. However, I'm doing this by overriding styles and using css variables, rather than via the Bulma variable system .. so it's the "right" effect, but the "wrong" method. I'm now torn between doing it "properly" with Bulma variables, and doing it in a way the user finds intuitive. If there is a way to get Bulma to use css variables, that would save many headaches. It seems like it almost works, but I always end up running into something like "Error: argument $color of red($color) must be a color" .. i.e. rather than allowing the css variable to pass-through, there's something in the code that 'needs' a literal colour ... is there an easy way to bypass the functions with this requirement?

[sandrina-p]

@oddjobz this error

"Error: argument $color of red($color) must be a color"

happens because when using css variables $color is var(--something) instead of an actual hexadecimal value #000000. SCSS is not ready by default to transpile css variables.

One of the ways of this is to rethink all the color structure or even use something else than SCSS. Probably with PostCSS this would be fixable.

[wtho]

If I'm right one long-term working solution (which bloats up the resulting css a bit) would be:

• Pass a default fallback color to bulma to generate a default theme as-is
• Override all locations where this default color is used with a variable

If the default color is also processed via scss functions like lighten, a corresponding color-mod() has to be used on the variable.

This might create problems in browsers that implement css variables, but not color-mod.

Edit: this could be avoided by wrapping the unmodified color in a noop-color-mod.

Please correct me if I'm wrong.

[oddjobz]

Mmm, not sure I follow .. but if you can point me at an example I'd be more than happy to give it a try?

[chrisschwartze]

I'd love to know more people with experience on using this in conjunction with Bulma.

I'm trying to create a dark mode, but not completely bloat my app with unused styles.

[oddjobz]

I implemented a mechanism based on CSS variables to allow me to change "theme" in real-time without loading or re-loading anything, but this sort of "overrides" the Bulma designed way of working. (and it's a little bit "long-winded") It would be really cool if we could do this by using CSS variables in Bulma CSS such that we could re-theme using the "proper" Bulma colouring scheme .. but I'm this could be quite a bit of work.

Currently it "looks" like the proper way to do a theme switch in Bulma involves reloading a different CSS sheet (or similar) .. but if anyone has a more dynamic approach I'd love to take a look ..
(yeah, and I love Bulma / Buefy too! :) )

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dom96]

Not something that should be closed due to staleness I think.

[wtho]

Ok, so I gave it a try: bulma-css-vars npm | github

You have to

• use Node.js to use this tool
• declare your variables in js with initial colors
• generate two files using the tool, a sass file (.sass can also be included from .scss), and a js file, and include them in your sass compilation / your website
• Use dart sass

Then you can

• set these declared variables to arbitrary color values like #553938, rgba(225, 23, 152, 0.4), aquamarine, from inside the web application
• all derived variables will be recalculated and updated automatically as well

Demo - especially check how e. g. hover shades or button texts are adjusted when making the color very dark/light.

Disclaimer

• It is still a prototype
• Note that no fallbacks are provided, so a non-css-var-capable browser cannot handle the colors

How it works

It patches sass functions like darken, saturate, as well as bulma sass functions like findLightColor and findColorInvert, by adding new variables for each function call with a variable.
This only works using dart sass and as long as bulma uses global functions (not the new use syntax), as they can be overridden.
These derived variables are then recalculated as well at runtime. See the project description for more information.

I am happy for every feedback!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[NullVoxPopuli]

I switched from bulma to shoelace. Couldn't be happier. Native CSS variables!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JoshClose]

Bump

[T1960CT]

Bump