Jump to content
Sign in to follow this  
juan-car

About W3.CSS color theme

Recommended Posts

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...