// 主题CSS变量
|
:root,
|
page {
|
// 主色调
|
--theme-primary: #21d59d;
|
--theme-success: #3ed268;
|
--theme-warning: #fe9831;
|
--theme-error: #fa4e62;
|
|
// 文字颜色
|
--theme-main-color: #1b233b;
|
--theme-content-color: #60687e;
|
--theme-tips-color: #7e869a;
|
--theme-light-color: #bdc3d2;
|
--theme-disabled-color: #dce0eb;
|
|
// 背景颜色
|
--theme-bg-color: #ffffff;
|
--theme-bg-color-secondary: #f8f9fa;
|
|
// 边框颜色
|
--theme-border-color: #e9ecef;
|
}
|
|
.theme-dark {
|
// 主色调
|
--theme-primary: #3c9cff;
|
--theme-success: #5ac725;
|
--theme-warning: #f9ae3d;
|
--theme-error: #f56c6c;
|
|
// 文字颜色
|
--theme-main-color: #ffffff;
|
--theme-content-color: #b0b8c1;
|
--theme-tips-color: #8a8f95;
|
--theme-light-color: #6c757d;
|
--theme-disabled-color: #495057;
|
|
// 背景颜色
|
--theme-bg-color: #1a1a1a;
|
--theme-bg-color-secondary: #2d2d2d;
|
}
|
|
// 主题工具类
|
.theme-bg {
|
background-color: var(--theme-bg-color);
|
}
|
|
.theme-bg-secondary {
|
background-color: var(--theme-bg-color-secondary);
|
}
|
|
.theme-text {
|
color: var(--theme-main-color);
|
}
|
|
.theme-text-content {
|
color: var(--theme-content-color);
|
}
|
|
.theme-text-tips {
|
color: var(--theme-tips-color);
|
}
|
