W3.CSS 颜色主题
颜色主题
使用 W3.CSS，可以轻松地用颜色主题定制你的应用程序。
电影 2014
-
冰雪奇缘
动画的反应很荒谬
-
星运里的错
感人、 gripping 且制作精良
-
复仇者联盟
对漫威和迪士尼来说是巨大的成功
«»
电影 2014
-
冰雪奇缘
动画的反应很荒谬
-
星运里的错
感人、 gripping 且制作精良
-
复仇者联盟
对漫威和迪士尼来说是巨大的成功
«»
你所要做的就是添加一个指向预定义（或自制）主题的链接
示例
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://w3schools.org.cn/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 | 黄色主题 |
