Introduction
This chapter demonstrates about the CSS themes by using these themes user can easily customize the applications with color themes and following are the concepts covered in this chapter.
- Private Themes
- Adding Gradient
- Predefined Themes
Description
Private themes is defined as the user can user can create own themes instead predefined themes.because W3.CSS have some predefined themes in W3.CSS library instead of these, user can define his own themes the code below demonstrates to creating the Private themes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<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>
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Indigo</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also considered as adding a gradient for each theme here the code below used l2 and l1 colors from the blue theme to create the gradient the gradient. The code below demonstrates to Adding the Gradient as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-blue.css">
<style>
.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%)}
</style>
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Blue</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style="position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4 (w3-theme-dark)</p>
</li>
<li class="w3-theme-gradient">
<p>w3-theme-gradient</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Instead of creating the Private themes W3.CSS have some pre defined themes those are available in W3.CSS Library which are predefined which can be applicable for any web sites. Pre defined themes are developed by the W3.CSS those are shown below.
The code below demonstrates to creating the Red Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-red.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Red</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Purple Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-purple.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Purple</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style="position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the blue Pre-Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-blue.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Blue</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Lime Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-lime.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Lime</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Deep Orange Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-deep-orange.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Deep Orange</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Green Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-green.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Green</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Blue-Grey Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-blue-grey.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Blue Grey</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the Yellow Pre Defined Theme as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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="http://www.w3schools.com/lib/w3-theme-yellow.css">
<body>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
<h1>Yellow</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2></div>
<ul class="w3-ul w3-border-top">
<li class="w3-theme-l5" style="position:relative">
<a class="w3-btn-floating-large w3-theme-action w3-right" style= "position:absolute;top:-28px;right:16px;">+</a>
<p>w3-theme-l5 (w3-theme-light)</p>
</li>
<li class="w3-theme-l4">
<p>w3-theme-l4</p>
</li>
<li class="w3-theme-l3">
<p>w3-theme-l3</p>
</li>
<li class="w3-theme-l2">
<p>w3-theme-l2</p>
</li>
<li class="w3-theme-l1">
<p>w3-theme-l1</p>
</li>
<li class="w3-theme">
<p>w3-theme</p>
</li>
<li class="w3-theme-d1">
<p>w3-theme-d1</p>
</li>
<li class="w3-theme-d2">
<p>w3-theme-d2</p>
</li>
<li class="w3-theme-d3">
<p>w3-theme-d3</p>
</li>
<li class="w3-theme-d4">
<p>w3-theme-d4</p>
</li>
<li class="w3-theme-d5">
<p>w3-theme-d5 (w3-theme-dark)</p>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- W3.CSS have some predefined Theme which are available in W3.CSS Library.
- User can create own Private Themes.