码农教程 - 一技在手,衣食无忧! tools

W3.CSS Color Themes

❮ Previous Next ❯

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.91xjr.com/w3css/4/w3.css">
<link rel="stylesheet" href=" https://www.91xjr.com/lib/w3-theme-indigo.css">

Try It Yourself »

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-91xjr 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%)}

Try It Yourself »

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


❮ Previous Next ❯