Support for css variables #3028
Comments
|
agreed, nowadays custom property support is must-have. |
|
It is planned. I have a few branches working on it. I only need to find the best way to implement it. There are a few options. |
|
@jgthms That's great to hear! Anything we could help you with? |
|
If you could provide an example of how you would use CSS variables, or how you already use them, that would be great. |
|
I would use css variables for theming my application (classic use case would be a light/dark theme). CSS variables let me do stuff like this: :root, [data-theme="default"] {
--color-primary: black;
--color-bg: white;
}
[data-theme="dark"] {
--color-primary: white;
--color-bg: black;
}
body {
background-color: var(--color-bg);
color: var(--color-contrast-high);
}That way, when a user changes their theme I (or rather, a js snippet) would add a I know I achieve the same with sass or less but that would require me to have essentially two versions of the whole site stylesheet, which can get quite big. |
|
Ok great. Your approach is exactly what I do for my own website: https://jgthms.com/ The CSS is built on top of Bulma, which I had to tweak to add the CSS variables. I agree we should focus on colours first. I hope to make it easy to implement a dark mode like this. |
|
@kolaente, wouldn’t you rather use SASS variables? Those are more popular and easier use than CSS’s variables. |
|
@BraydenTW CSS variables are as easy to use as SASS variables IMHO but SASS variables would require me to ship one full css bundle for each theme whereas I can only change the variables with css variables and have the browser do all the work for me - only requiring me to ship one css bundle. |
|
Ok no worries then. I completely understand that using SASS would take more work. |
|
@BraydenTW Oh it wouldn't even take more work, it would just mean shipping a css bundle twice the size to my users. |
|
Oh ok sorry about this. I’m new to the “Bulma party” so it doesn’t make much sense at first. |
|
No worries, and welcome! 🙂 |
|
#2981 does. exactly. this. |
|
@jgthms Any update on this? |
|
@jgthms do you have an update on timing for this? |
|
This is fixed I guess. |
This is about Bulma.
Overview of the problem
This is about the Bulma CSS framework
Description
I think using css variables in bulma would greatly enhance the framework since they allow things like easier theming with less boilerplate - other more "mainstream" frameworks like bootstrap are also using them.
CSS variables can be considered stable to use since most browsers seem to support them since a while now.
I've looked at #2342 which seems to be related to this but is more precisely about dark themes while I hope this issue is a more general look at css variables in bulma - I wasn't able to find a broader issue about this topic. Please tell me if I should rather close this issue.
The text was updated successfully, but these errors were encountered: