About W3.CSS color theme

[juan-car]

Hello

Just a suggestion about colors. I think it would be a good idea to define colors as css vars in theme css files, instead of just hardcoded 

So we can use the color by its name in any style rule, and if we change the theme all colors are updated right.

Now if we define our own style rule I have to use color code 

.myBoxnew{

background-color: #f2f9fe !important;

color: #000 !important;

}

If I change de W3.css theme colors, we have to search and replace every code color, used in our own styles rules, for a proper value from the new theme colors. 

With this modification all would be easier. Even w3.css could use colors from the theme colors css definitions.

For example, from this rule

.w3-theme-l5 {color:#000 !important; background-color:#f2f9fe !important}

we can extract this vars 

--l5-c0: #000;

--l5-bk :#f2f9fe

And the class became:

.w3-theme-l5 {

color:var(--l5-co) !important;

background-color: var(--l5-bk)  !important

}

So we could use this color definition  in any style rule defined in our own CSS styles sheet, not just as a class. 

Teh .myBoxnew example could became

.myBoxnew{

background-color: var(--l4-bk) !important;

color: var(--l4-co) !important;

}

 Of course, even w3.css definitios could use the colors vars.

Thanks.

[Ingolme]

The main reason to avoid new features such as var() is so that your website won't break in browsers that don't have proper support. It is your choice to use new technologies on your website, but generally libraries and frameworks try to be compatible with as many browsers as reasonably possible so that they can meet the needs of all of the people who use them.

It's a matter of how much you value your convenience over the accessibility of a percentage of the users on your websites.

[juan-car]

OK, I understand.

Thanks.

[Grego]

I am only able to use the basic W3 css colors.

Does anyone know why the libraries such as vivid don't work? 

I placed the link rel="stylesheet" href="../lib/w3-colors-vivid.css" at the top with other links and the color w3-vivid-reddish-purple in my div but it goes transparent. Basics such as w3-purple work.