主色
主题概括 | 弹窗样式
色相度、饱和度、亮度各值占比 | 进度条样式
- 色相度占比
- 饱和度占比
- 亮度值占比
选择按钮
常规按钮
开关按钮
翻页按钮
安全色卡
后色 mainColor
前色 onMainColor
后色 bgColor
前色 linkColor
前色 accentColor
前色 textColor
后色surfaceColor
前色 linkColor
前色 accentColor
前色 textColor
后色 linkColor
前色 bgColor
前色 surfaceColor
后色accentColor
前色 bgColor
前色 surfaceColor
后色 textColor
前色 bgColor
前色 surfaceColor
UI配色应用
CSS定义(您可以复制如下代码到您的项目中,如果您也尊重知识产权,请尽量保留“themeFrom”信息)
html{
--theme:"丛林迷彩";
--from:"www.uielf.cn";
--mainColor:#607234;
--bgColor:#1F231B;
--surfaceColor:#333A2C;
--linkColor:#9E9151;
--accentColor:#8AB234;
--onMainColor:#FFF2DB;
--textColor:#B6BD7F;
--mainAlpha:#607234CD;
--surfaceAlpha:#333A2CAB;
--linkAlpha:#9E9151CD;
--onMainAlpha:#FFF2DBCC;
--textAlpha:#B6BD7FDD;
}
CSS中使用示例
.textColor{
color:var(--textColor)
}
.themeBg{
background:linear-gradient(
to right,
var(--mainColor) 14.28%,
var(--bgColor) 14.28% 28.56%,
var(--surfaceColor) 28.56% 42.84%,
var(--linkColor) 42.84% 57.12%,
var(--accentColor) 57.12% 71.4%,
var(--onMainColor) 71.4% 85.68%,
var(--textColor) 85.68%)
}
除了在CSS文件中使用以外,您还可以在任何定义颜色值时使用“var(--mainColor)”、“var(--bgColor)”等色值。祝您使用愉快!