創建主題
主題在使用中：
生成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 | 顏色主題黃 |