/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ @import "uview-ui/theme.scss"; /* 覆盖 theme.scs 的值 */ $u-bg-color: #f5f5f5; /* 文字尺寸 */ $uni-font-size-sm: 14px; $uni-font-size-base: 16px; $uni-font-size-lg: 18px; /* 间距 */ $space: 12px; $spacers: ( ssm: calc(#{$space} / 3), sm: calc(#{$space} / 2), base: $space, lg: calc(#{$space} / 3 * 4.5), llg: calc(#{$space} / 3 * 6), ); /* 颜色 */ $colors: ( primary: $u-primary, primary-dark: $u-primary-dark, primary-disabled: $u-primary-disabled, primary-light: $u-primary-light, warning: $u-warning, warning-dark: $u-warning-dark, warning-disabled: $u-warning-disabled, warning-light: $u-warning-light, success: $u-success, success-dark: $u-success-dark, success-disabled: $u-success-disabled, success-light: $u-success-light, error: $u-error, error-dark: $u-error-dark, error-disabled: $u-error-disabled, error-light: $u-error-light, info: $u-info, info-dark: $u-info-dark, info-disabled: $u-info-disabled, info-light: $u-info-light, main: $u-main-color, content: $u-content-color, tips: $u-tips-color, light: $u-light-color, white: #ffffff, background: $u-bg-color, app-blue: #238cfc, // rgb(35,140,252) ); // /* 颜色变量 */ // /* 行为相关颜色 */ // $uni-color-primary: #007aff; // $uni-color-success: #4cd964; // $uni-color-warning: #f0ad4e; // $uni-color-error: #dd524d; // /* 文字基本颜色 */ // $uni-text-color: #333; //基本色 // $uni-text-color-inverse: #fff; //反色 // $uni-text-color-grey: #999; //辅助灰色,如加载更多的提示信息 // $uni-text-color-placeholder: #808080; // $uni-text-color-disable: #c0c0c0; // /* 背景颜色 */ // $uni-bg-color: #ffffff; // $uni-bg-color-grey: #f8f8f8; // $uni-bg-color-hover: #f1f1f1; //点击状态颜色 // $uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色 // /* 边框颜色 */ // $uni-border-color: #c8c7cc; // /* 尺寸变量 */ // /* 图片尺寸 */ // $uni-img-size-sm: 20px; // $uni-img-size-base: 26px; // $uni-img-size-lg: 40px; // /* Border Radius */ // $uni-border-radius-sm: 2px; // $uni-border-radius-base: 3px; // $uni-border-radius-lg: 6px; // $uni-border-radius-circle: 50%; // /* 透明度 */ // $uni-opacity-disabled: 0.3; // 组件禁用态的透明度 // /* 文章场景相关 */ // $uni-color-title: #2c405a; // 文章标题颜色 // $uni-font-size-title: 20px; // $uni-color-subtitle: #555555; // 二级标题颜色 // $uni-font-size-subtitle: 26px; // $uni-color-paragraph: #3f536e; // 文章段落颜色 // $uni-font-size-paragraph: 15px;