手册版本 V6.0

皮肤介绍

GraceUI 6.0 使用了主题样式模式（ 基于 scss ），可以快速地实现主题色及一些常用尺寸的配置。 

主题文件

|_ custom
    |_ custom.scss // 自定义主题样式， 推荐开发者以此为基础进行样式添加
    |_ theme.scss // 核心主题样式，您可以通过修改此文件快速实现主题颜色、主题相关尺寸等配置

样式代码

/* 主题色 */
$primaryColor:#008AFF;

/* 黑色 */
$dark-l1:rgba(50, 50, 50, 1);
$dark-l2:rgba(55, 55, 55, 1);
$dark-l3:rgba(59, 59, 59, 1);
$dark-l4:rgba(68, 68, 68, 1);
$dark-l5:rgba(100, 100, 100, 1);
$dark-l6:rgba(116, 116, 116, 1);
$dark-l7:rgba(129, 129, 129, 1);
$dark-l8:rgba(150, 150, 150, 1);
$dark-l9:rgba(135, 135, 135, 1);
$dark-l10:rgba(120, 120, 120, 1);

/* 白色 */
$white-l1:rgba(252,252,252, 1);
$white-l2:rgba(238,238,238, 1);
$white-l3:rgba(222,222,222, 1);
$white-l4:rgba(205,205,205, 1);
$white-l5:rgba(190,190,190, 1);
$white-l6:rgba(175,175,175, 1);
$white-l7:rgba(160,160,160, 1);
$white-l8:rgba(138,138,138, 1);
$white-l9:rgba(120,120,120, 1);
$white-l10:rgba(108,108,108, 1);

/* 圆角尺寸 */
$gui-radius-sm:6rpx;
$gui-radius:10rpx;
$gui-radius-lg:20rpx;

/* 文本尺寸 */
$gui-text:28rpx;
$gui-text-small:22rpx;
$gui-h1:80rpx;
$gui-h2:60rpx;
$gui-h3:45rpx;
$gui-h4:36rpx;
$gui-h5:32rpx;
$gui-h6:30rpx;

/* 核心布局左右间距 */
$gui-main-padding:30rpx;
/* 通用外间距 */
$gui-common-margin:30rpx;
/* 边框颜色 */
$border-color:#F2F2F2;

/* 按钮尺寸 */
$gui-button-text-size:30rpx;
$gui-button-size:82rpx;
$gui-button-border-radius:8rpx;
$gui-button-mini-text-size:22rpx;
$gui-button-mini-size:66rpx;