W3.CSSColor 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 home made) theme:
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.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%)}
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 |
