W3.CSS Color Themes
Color Themes
With W3.CSS, it is easy to customize your applications with color themes.
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
«»
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
«»
All you have to do is add a link to a predefined (or homemade) theme:
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">
Predefined Themes
These are the predefined themes in W3.CSS:
| w3-theme-red | Try it |
| w3-theme-pink | Try it |
| w3-theme-purple | Try it |
| w3-theme-deep-purple | Try it |
| w3-theme-indigo | Try it |
| w3-theme-blue | Try it |
| w3-theme-light-blue | Try it |
| w3-theme-cyan | Try it |
| w3-theme-teal | Try it |
| w3-theme-green | Try it |
| w3-theme-light-green | Try it |
| w3-theme-lime | Try it |
| w3-theme-khaki | Try it |
| w3-theme-yellow | Try it |
| w3-theme-amber | Try it |
| w3-theme-orange | Try it |
| w3-theme-deep-orange | Try it |
| w3-theme-blue-grey | Try it |
| w3-theme-brown | Try it |
| w3-theme-grey | Try it |
| w3-theme-dark-grey | Try it |
| w3-theme-black | Try it |
| w3-theme-w3schools | Try it |
Adding Gradients
One reader sent us this suggestion: You might want to consider adding a gradient for each theme.
I used the l2 and l1 colors from the blue theme to create this gradient:
Example
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
Downloadable Color Themes
Here are some downloadable color themes inspired by Google's Material Design:
| Style Sheet | Description |
|---|---|
| w3-theme-amber.css | Color Theme Amber |
| w3-theme-black.css | Color Theme Black |
| w3-theme-blue.css | Color Theme Blue |
| w3-theme-blue-grey.css | Color Theme Blue Grey |
| w3-theme-brown.css | Color Theme Brown |
| w3-theme-cyan.css | Color Theme Cyan |
| w3-theme-dark-grey.css | Color Theme Dark Grey |
| w3-theme-deep-orange.css | Color Theme Deep Orange |
| w3-theme-deep-purple.css | Color Theme Deep Purple |
| w3-theme-green.css | Color Theme Green |
| w3-theme-grey.css | Color Theme Grey |
| w3-theme-indigo.css | Color Theme Indigo |
| w3-theme-khaki.css | Color Theme Khaki |
| w3-theme-light-blue.css | Color Theme Light Blue |
| w3-theme-light-green.css | Color Theme Light Green |
| w3-theme-lime.css | Color Theme Lime |
| w3-theme-orange.css | Color Theme Orange |
| w3-theme-pink.css | Color Theme Pink |
| w3-theme-purple.css | Color Theme Purple |
| w3-theme-red.css | Color Theme Red |
| w3-theme-teal.css | Color Theme Teal |
| w3-theme-yellow.css | Color Theme Yellow |
