W3.CSS 顏色主題
顏色主題
使用 W3.CSS，可以輕鬆地用顏色主題定製你的應用程式。
電影 2014
-
冰雪奇緣
動畫的反應很荒謬
-
星運裡的錯
感人、 gripping 且製作精良
-
復仇者聯盟
對漫威和迪士尼來說是巨大的成功
«»
電影 2014
-
冰雪奇緣
動畫的反應很荒謬
-
星運裡的錯
感人、 gripping 且製作精良
-
復仇者聯盟
對漫威和迪士尼來說是巨大的成功
«»
你所要做的就是新增一個指向預定義（或自制）主題的連結
示例
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<link rel="stylesheet" href="https://w3schools.tw/lib/w3-theme-indigo.css">
預定義的顏色主題
這些是 W3.CSS 中的預定義主題
| w3-theme-red | 試一試 |
| w3-theme-pink | 試一試 |
| w3-theme-purple | 試一試 |
| w3-theme-deep-purple | 試一試 |
| w3-theme-indigo | 試一試 |
| w3-theme-blue | 試一試 |
| w3-theme-light-blue | 試一試 |
| w3-theme-cyan | 試一試 |
| w3-theme-teal | 試一試 |
| w3-theme-green | 試一試 |
| w3-theme-light-green | 試一試 |
| w3-theme-lime | 試一試 |
| w3-theme-khaki | 試一試 |
| w3-theme-yellow | 試一試 |
| w3-theme-amber | 試一試 |
| w3-theme-orange | 試一試 |
| w3-theme-deep-orange | 試一試 |
| w3-theme-blue-grey | 試一試 |
| w3-theme-brown | 試一試 |
| w3-theme-grey | 試一試 |
| w3-theme-dark-grey | 試一試 |
| w3-theme-black | 試一試 |
| w3-theme-w3schools | 試一試 |
新增漸變
一位讀者給我們發來這個建議：您可能想考慮為每個主題新增漸變。
我使用了藍色主題的 l2 和 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%)}
可下載的顏色主題
這裡有一些受 Google Material Design 啟發的、可下載的顏色主題
| 樣式表 | 描述 |
|---|---|
| w3-theme-amber.css | 琥珀色主題 |
| w3-theme-black.css | 黑色主題 |
| w3-theme-blue.css | 藍色主題 |
| w3-theme-blue-grey.css | 藍灰色主題 |
| w3-theme-brown.css | 棕色主題 |
| w3-theme-cyan.css | 青色主題 |
| w3-theme-dark-grey.css | 深灰色主題 |
| w3-theme-deep-orange.css | 深橙色主題 |
| w3-theme-deep-purple.css | 深紫色主題 |
| w3-theme-green.css | 綠色主題 |
| w3-theme-grey.css | 灰色主題 |
| w3-theme-indigo.css | 靛藍色主題 |
| w3-theme-khaki.css | 卡其色主題 |
| w3-theme-light-blue.css | 淺藍色主題 |
| w3-theme-light-green.css | 淺綠色主題 |
| w3-theme-lime.css | 酸橙色主題 |
| w3-theme-orange.css | 橙色主題 |
| w3-theme-pink.css | 粉色主題 |
| w3-theme-purple.css | 紫色主題 |
| w3-theme-red.css | 紅色主題 |
| w3-theme-teal.css | 藍綠色主題 |
| w3-theme-yellow.css | 黃色主題 |
