Jump to content

About W3.CSS color theme


Recommended Posts


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 


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


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

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


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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...