W3.CSS Color Themes
Color Themes
With W3.CSS, it is easy to customize your applications with your own color themes.
Example
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="/lib/w3-theme-indigo.css">
Predefined Themes
In HTML applications, you can limit the use of colors by choosing different hues from predefined colors:
| w3-red | Try it |
| w3-pink | Try it |
| w3-purple | Try it |
| w3-deep-purple | Try it |
| w3-indigo | Try it |
| w3-blue | Try it |
| w3-light-blue | Try it |
| w3-cyan | Try it |
| w3-teal | Try it |
| w3-green | Try it |
| w3-light-green | Try it |
| w3-lime | Try it |
| w3-khaki | Try it |
| w3-yellow | Try it |
| w3-amber | Try it |
| w3-orange | Try it |
| w3-deep-orange | Try it |
| w3-blue-grey | Try it |
| w3-brown | Try it |
| w3-grey | Try it |
| w3-dark-grey | Try it |
| w3-black | Try it |
| w3-w3schools | Try it |
☰ W3Schools
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
☰ W3Schools
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
Private Themes
With W3.CSS, it is easy to customize an applications with a private color theme.
You can link to a private theme in a <link> tag, or you can put the private theme in a <style> tag:
Example
<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5
!important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9
!important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da
!important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb
!important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0
!important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab
!important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f
!important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593
!important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-action {
color:#fff !important;background-color:#311b92
!important}
.w3-text-theme {
color:#1a237e !important}
</style>
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 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 |
