创建主题
主题在使用中：
生成CSS：
五渔村
五渔村（5地政）是意大利里维埃拉的一部分。 与五村海岸线：蒙特罗索，韦尔纳扎，柯尔尼利亚，马纳罗拉和里奥马焦雷被联合国教科文组织列为世界遗产。
蒙特罗索
五渔村坐落在一个小海湾自然的中心，由一个小人工鱼礁保护，在拉斯佩齐亚的海滨。 这是五渔村最北端的村庄。
韦尔纳扎
韦尔纳扎是另一个在五渔村地区的五个城镇。 韦尔纳扎是第四个镇向北。 它没有汽车通行，并且是意大利里维埃拉最真实的“渔村”之一。
颜色主题
随着W3.CSS，很容易用自己的颜色主题自定义您的应用程序。
例
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href=" /lib/w3-theme-indigo.css ">预定义的主题
在HTML应用程序，您可以通过选择预定义的颜色不同的色调限制使用颜色：
| W3红 | 尝试一下 |
| W3粉色 | 尝试一下 |
| W3紫色 | 尝试一下 |
| W3-深紫色 | 尝试一下 |
| W3-靛蓝 | 尝试一下 |
| W3蓝色 | 尝试一下 |
| W3-淡蓝色的 | 尝试一下 |
| W3-青 | 尝试一下 |
| W3-水鸭 | 尝试一下 |
| W3绿色 | 尝试一下 |
| W3-浅绿 | 尝试一下 |
| W3石灰 | 尝试一下 |
| W3-卡其 | 尝试一下 |
| W3黄色 | 尝试一下 |
| W3-琥珀 | 尝试一下 |
| W3橙色 | 尝试一下 |
| W3深橙色 | 尝试一下 |
| W3-蓝灰色 | 尝试一下 |
| W3褐色 | 尝试一下 |
| W3灰色 | 尝试一下 |
| W3-深灰色 | 尝试一下 |
| W3黑 | 尝试一下 |
| W3-w3ii | 尝试一下 |
2014年电影
冻结的
以动画的反应是荒谬的
在我们的明星故障
触摸，握持，真正制作精良
复仇者
为奇迹和迪士尼一个巨大的成功
«»
2014年电影
冻结的
以动画的反应是荒谬的
在我们的明星故障
触摸，握持，真正制作精良
复仇者
为奇迹和迪士尼一个巨大的成功
«»
私人主题
随着W3.CSS，很容易带有私人色彩主题，以自定义的应用程序。
您可以链接到一个私人的主题在<link>标记，或者你可以把私人的主题在<style>标记：
例
<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>添加渐变
一位读者给我们发这个建议：你可能要考虑增加一个坡度为每个主题。
我用12和L1的颜色从蓝色主题创建这个渐变：
例
.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%)}
颜色主题
下面是谷歌的材质设计灵感来自一些可下载的颜色主题：
| 样式表 | 描述 |
|---|---|
| W3-主题amber.css | 颜色主题琥珀 |
| W3-主题black.css | 颜色主题黑色 |
| W3-主题blue.css | 颜色主题蓝色 |
| W3主题-蓝- grey.css | 颜色主题蓝灰 |
| W3-主题brown.css | 颜色主题布朗 |
| W3-主题cyan.css | 颜色主题青色 |
| W3-主题暗grey.css | 颜色主题深灰色 |
| W3-主题深orange.css | 颜色主题深橙色 |
| W3-主题深purple.css | 颜色主题深紫 |
| W3-主题green.css | 颜色主题绿色 |
| W3-主题grey.css | 颜色主题灰色 |
| W3-主题indigo.css | 颜色主题靛蓝 |
| W3-主题khaki.css | 颜色主题卡其 |
| W3-主题光blue.css | 颜色主题浅蓝 |
| W3-主题光green.css | 颜色主题浅绿色 |
| W3-主题lime.css | 颜色主题石灰 |
| W3-主题orange.css | 颜色主题橙色 |
| W3-主题pink.css | 颜色主题粉红 |
| W3-主题purple.css | 颜色主题紫 |
| W3-主题red.css | 颜色主题红 |
| W3-主题teal.css | 颜色主题蒂尔 |
| W3-主题yellow.css | 颜色主题黄 |