150 lines
4.7 KiB
SCSS
150 lines
4.7 KiB
SCSS
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
|
|
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
|
|
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
|
|
|
|
:root,
|
|
page {
|
|
/* 纯色 */
|
|
--u-white-color: #ffffff;
|
|
--u-white-color-rgb: 255, 255, 255;
|
|
--u-black-color: #000000;
|
|
--u-black-color-rgb: 0, 0, 0;
|
|
|
|
// 字体色
|
|
--u-main-color: #303133;
|
|
--u-main-color-rgb: 48, 49, 51;
|
|
--u-content-color: #606266;
|
|
--u-content-color-rgb: 96, 98, 102;
|
|
--u-tips-color: #909399;
|
|
--u-tips-color-rgb: 144, 147, 153;
|
|
--u-light-color: #c0c4cc;
|
|
--u-light-color-rgb: 192, 196, 204;
|
|
|
|
// 边框色
|
|
--u-border-color: #dcdfe6;
|
|
--u-border-color-rgb: 220, 223, 230;
|
|
--u-divider-color: #e4e7ed;
|
|
--u-divider-color-rgb: 228, 231, 237;
|
|
|
|
// 遮罩色
|
|
--u-mask-color: rgba(0, 0, 0, 0.4);
|
|
--u-shadow-color: rgba(0, 0, 0, 0.1);
|
|
|
|
/* 背景色 */
|
|
--u-bg-color: #f3f4f6;
|
|
--u-bg-color-rgb: 243, 244, 246;
|
|
--u-bg-white: #ffffff;
|
|
--u-bg-white-rgb: 255, 255, 255;
|
|
--u-bg-gray-light: #f1f1f1;
|
|
--u-bg-gray-light-rgb: 241, 241, 241;
|
|
--u-bg-gray-dark: #2f343c;
|
|
--u-bg-gray-dark-rgb: 47, 52, 60;
|
|
--u-bg-black: #000000;
|
|
--u-bg-black-rgb: 0, 0, 0;
|
|
|
|
/* 主色 */
|
|
--u-type-primary: #2979ff;
|
|
--u-type-primary-rgb: 41, 121, 255;
|
|
--u-type-primary-disabled: #a0cfff;
|
|
--u-type-primary-disabled-rgb: 160, 207, 255;
|
|
--u-type-primary-dark: #2b85e4;
|
|
--u-type-primary-dark-rgb: 43, 133, 228;
|
|
--u-type-primary-light: #ecf5ff;
|
|
--u-type-primary-light-rgb: 236, 245, 255;
|
|
|
|
/* 警告色 */
|
|
--u-type-warning: #ff9900;
|
|
--u-type-warning-rgb: 255, 153, 0;
|
|
--u-type-warning-disabled: #fcbd71;
|
|
--u-type-warning-disabled-rgb: 252, 189, 113;
|
|
--u-type-warning-dark: #f29100;
|
|
--u-type-warning-dark-rgb: 242, 145, 0;
|
|
--u-type-warning-light: #fdf6ec;
|
|
--u-type-warning-light-rgb: 253, 246, 236;
|
|
|
|
/* 成功色 */
|
|
--u-type-success: #19be6b;
|
|
--u-type-success-rgb: 25, 190, 107;
|
|
--u-type-success-disabled: #71d5a1;
|
|
--u-type-success-disabled-rgb: 113, 213, 161;
|
|
--u-type-success-dark: #18b566;
|
|
--u-type-success-dark-rgb: 24, 181, 102;
|
|
--u-type-success-light: #dbf1e1;
|
|
--u-type-success-light-rgb: 219, 241, 225;
|
|
|
|
/* 错误色 */
|
|
--u-type-error: #fa3534;
|
|
--u-type-error-rgb: 250, 53, 52;
|
|
--u-type-error-disabled: #fab6b6;
|
|
--u-type-error-disabled-rgb: 250, 182, 182;
|
|
--u-type-error-dark: #dd6161;
|
|
--u-type-error-dark-rgb: 221, 97, 97;
|
|
--u-type-error-light: #fef0f0;
|
|
--u-type-error-light-rgb: 254, 240, 240;
|
|
|
|
/* 信息色 */
|
|
--u-type-info: #909399;
|
|
--u-type-info-rgb: 144, 147, 153;
|
|
--u-type-info-disabled: #c8c9cc;
|
|
--u-type-info-disabled-rgb: 200, 201, 204;
|
|
--u-type-info-dark: #82848a;
|
|
--u-type-info-dark-rgb: 130, 132, 138;
|
|
--u-type-info-light: #f4f4f5;
|
|
--u-type-info-light-rgb: 244, 244, 245;
|
|
}
|
|
|
|
// 纯色
|
|
$u-white-color: var(--u-white-color);
|
|
$u-black-color: var(--u-black-color);
|
|
|
|
// 字体色
|
|
$u-main-color: var(--u-main-color);
|
|
$u-content-color: var(--u-content-color);
|
|
$u-tips-color: var(--u-tips-color);
|
|
$u-light-color: var(--u-light-color);
|
|
|
|
// 边框色
|
|
$u-border-color: var(--u-border-color);
|
|
$u-divider-color: var(--u-divider-color);
|
|
|
|
// 遮罩色
|
|
$u-mask-color: var(--u-mask-color);
|
|
$u-shadow-color: var(--u-shadow-color);
|
|
|
|
// 背景色
|
|
$u-bg-color: var(--u-bg-color);
|
|
$u-bg-white: var(--u-bg-white);
|
|
$u-bg-gray-light: var(--u-bg-gray-light);
|
|
$u-bg-gray-dark: var(--u-bg-gray-dark);
|
|
$u-bg-black: var(--u-bg-black);
|
|
|
|
// 主色
|
|
$u-type-primary: var(--u-type-primary);
|
|
$u-type-primary-light: var(--u-type-primary-light);
|
|
$u-type-primary-disabled: var(--u-type-primary-disabled);
|
|
$u-type-primary-dark: var(--u-type-primary-dark);
|
|
|
|
// 警告色
|
|
$u-type-warning: var(--u-type-warning);
|
|
$u-type-warning-disabled: var(--u-type-warning-disabled);
|
|
$u-type-warning-dark: var(--u-type-warning-dark);
|
|
$u-type-warning-light: var(--u-type-warning-light);
|
|
|
|
// 成功色
|
|
$u-type-success: var(--u-type-success);
|
|
$u-type-success-disabled: var(--u-type-success-disabled);
|
|
$u-type-success-dark: var(--u-type-success-dark);
|
|
$u-type-success-light: var(--u-type-success-light);
|
|
|
|
// 错误色
|
|
$u-type-error: var(--u-type-error);
|
|
$u-type-error-disabled: var(--u-type-error-disabled);
|
|
$u-type-error-dark: var(--u-type-error-dark);
|
|
$u-type-error-light: var(--u-type-error-light);
|
|
|
|
// 信息色
|
|
$u-type-info: var(--u-type-info);
|
|
$u-type-info-disabled: var(--u-type-info-disabled);
|
|
$u-type-info-dark: var(--u-type-info-dark);
|
|
$u-type-info-light: var(--u-type-info-light);
|