W3.CSS 颜色主题

颜色主题

借助 W3.CSS，可以轻松地使用颜色主题自定义您的应用程序。

电影 2014

冷冻

对动画的反应很荒谬
我们星球上的错

触摸、抓握且制作精良
复仇者

漫威和迪士尼的巨大成功

« »

电影 2014

冷冻

对动画的反应很荒谬
我们星球上的错

触摸、抓握且制作精良
复仇者

漫威和迪士尼的巨大成功

« »

您所要做的就是添加一个指向预定义（或自制）主题的链接：

示例

亲自试一试»

预定义主题

这些是 W3.CSS 中预定义的主题：

w3-主题-红色	尝试一下
w3-主题-粉色	尝试一下
w3-主题-紫色	尝试一下
w3-主题-深紫色	尝试一下
w3-主题-indigo	尝试一下
w3-主题-蓝色	尝试一下
w3-主题-浅蓝色	尝试一下
w3-主题-青色	尝试一下
w3-主题-青色	尝试一下
w3-主题-绿色	尝试一下
w3-主题-浅绿色	尝试一下
w3-主题-石灰	尝试一下
w3-主题-卡其色	尝试一下
w3-主题-黄色	尝试一下
w3-主题-琥珀色	尝试一下
w3-主题-橙色	尝试一下
w3-主题-深橙色	尝试一下
w3-主题-蓝灰色	尝试一下
w3-主题-棕色	尝试一下
w3-主题-灰色	尝试一下
w3-主题-深灰色	尝试一下
w3-主题-黑色	尝试一下
w3-主题-91xjr	尝试一下

添加渐变

一位读者向我们发送了这样的建议：您可能需要考虑为每个主题添加渐变。

我使用蓝色主题中的 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-主题-amber.css	颜色主题琥珀色
w3-主题-black.css	颜色主题黑色
w3-主题-blue.css	颜色主题蓝色
w3-主题-蓝-灰.css	颜色主题蓝灰色
w3-主题-棕色.css	颜色主题棕色
w3-主题-cyan.css	颜色主题青色
w3-主题-深灰色.css	颜色主题深灰色
w3-主题-深橙色.css	颜色主题深橙色
w3-主题-深紫色.css	颜色主题深紫色
w3-主题-green.css	颜色主题绿色
w3-主题-grey.css	颜色主题灰色
w3-主题-indigo.css	颜色主题靛蓝
w3-主题-卡其色.css	颜色主题卡其色
w3-主题-浅蓝色.css	颜色主题浅蓝色
w3-主题-浅绿色.css	颜色主题浅绿色
w3-主题-lime.css	颜色主题石灰
w3-主题-orange.css	颜色主题橙色
w3-主题-粉红色.css	颜色主题粉色
w3-主题-紫色.css	颜色主题紫色
w3-主题-red.css	颜色主题红色
w3-主题-青色.css	颜色主题青色
w3-主题-yellow.css	颜色主题黄色

W3.CSS 颜色主题

颜色主题

电影 2014

冷冻

我们星球上的错

复仇者

电影 2014

冷冻

我们星球上的错

复仇者

示例

预定义主题

添加渐变

示例

可下载的颜色主题