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?

[multiplehats]

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.