账户中心 退出系统
6.0 版本 5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
6.0 版本 5.0 版本 3.0 版本
快速开始
框架介绍版权要求
更新日志
常见问题
框架部署目录结构
版本差别V 3 ~ 6
主题设置
深色模式
nvue 说明
数据转换格式问题
防抖节流技巧文章
页面布局 ( 12 )
页面组件 独创 · 好用
全屏加载 + 挂件
自定义头部返回 · 主页
动态头部导航
双击返回顶部
单击返回顶部
自定义底部导航
吸顶插槽布局
动态吸顶布局
iPhone 底部适配
小程序胶囊按钮躲避
下拉选择筛选 · 排序
页面背景色设置外链技巧
Flex 布局 ( 2 )
Flex 布局样式模式
Flex 布局组件模式
基础样式 ( 9 )
文本样式
内置颜色
徽章角标
定位样式absolute · fixed
按钮样式
常用标题
动画效果
图标使用使用及扩展
手势操作触屏 · 缩放
Grace.JS ( 18 )
工具介绍
网络请求
页面跳转
数据缓存
图片操作
设备信息
消息提示
头部导航 动态设置
底部导航 动态设置
元素选择
ref 获取 跨生命周期
字符常用
数组操作
随机数据
日期时间
延时循环
对象操作
MD5 加密
请求工具 ( 7 )
请求库介绍
GET 请求
POST 请求
POST 签名验证
文件上传
登录相关
后端代码 php 版本示例
常用组件 ( 12 )
图片组件
搜索组件
标签组件
星级组件
倒计时组件
链接组件
多图选择
多图上传
头像群组
数值动画
PK 投票
抽奖转盘
常用布局 ( 11 )
宫格布局
普通表格
排序组件
数据表格
横向公告
时间轴布局
步骤展示
骨架加载
瀑布流布局
启动页广告
底部分享
列表布局 ( 8 )
普通列表
滑动列表
可选列表
全选列表
树状列表
排序列表
卡片列表
卡片视图
切换布局 ( 9 )
切换导航单行
切换导航多行
局部选项卡
全屏选项卡
分段切换
折叠面板
竖向切换
分类切换
城市选择
滚动 · 轮播 ( 8 )
滚动区域
进度滚动
滚动公告
无缝滚动横向文本形式
无缝滚动横向卡片形式
竖向公告顺序卡片形式
轮播组件
主体滚动
刷新加载 ( 8 )
全屏加载
下拉刷新基于页面组件
加载更多基于页面组件
刷新和加载基于页面组件
返回顶部基于页面组件
刷新和加载自定义组合
刷新和加载原生组合模式
为空展示
弹层 · 对话框 ( 6 )
遮罩弹层
头部消息框
模态对话框
底部操作表
右侧菜单
弹出菜单
表单相关 ( 15 )
表单布局
表单验证
提交按钮
字数限制
功能标签 选择 · 删除
动态表单
分步提交
步进器
数字键盘
车牌键盘
滑动解锁
进度滑块
区间滑块
点选按钮
地区联动 省市区三级
日期时间 ( 6 )
日历日期 带有农历及时间
日期区间 日历形式
日期时间 picker 模式
时间段选择 picker 模式
日程日历 日程 · 提醒
横向日历 布局模式
文章相关 ( 10 )
文章列表 基础用法
文章列表 切换模式
文章列表 全屏选项卡模式
编辑器 自主研发 · 多端兼容
格式转换 后端转换为 HTML
文章详情 编辑器解析
富文本加强 字符串转数组
展开阅读
评论布局
评论提交
媒体播放 ( 2 )
音乐播放器
视频播放器
地图使用 ( 3 )
位置标注
地图周边
拖拽定位
用户模板 ( 10 )
用户登录
手机登录
短信登录
短信验证
用户协议
个人中心
头像剪裁
证件上传
会员排行榜
手写签名
电商常用 ( 9 )
商品列表
商品详情
订单中心
购物车模板
排序与筛选
地址列表
地址添加
抽奖模板
优惠券组件
即时通讯 ( 3 )
消息展示组件
消息输入组件
消息列表布局
画布绘图 ( 3 )
二维码生成
条形码生成
海报生成
深色模式支持

手册版本 V6.0

深色模式支持说明

GraceUI 6.0 开始在 H5 端 和 微信小程序端支持深色模式,内置组件已经全部适配,您在布局时只需要注意设置好文本色和背景色即可。

如何关闭深色模式

app.vue 默认加载了深色模式适配样式,如果想关闭深色模式支持,请打开 app.vue 删除深色模式适配样式即可 :
<style>
/* 加载框架核心样式 */
@import "./Grace6/css/grace.scss";
/* 加载深色模式适配样式 */
@import "./Grace6/css/graceDark.scss";
// 删除 @import "./Grace6/css/graceDark.scss";

注意事项

1 请使用自定义头部及底部导航保证深色适配。
2 微信小程序深色配置见下载的 深色模式 start 包内的 page.json 及 theme.json
3 微信小程序深色适配文档 : https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html

为什么不支持其他平台

1 其他小程序底层不支持,无法实现模式识别机制;
2 app 端为什么不支持 :
2.1 底层不够友好,开发者适配难度较高;
2.2 重点:不适配暗黑模式,一样可以正常上Appstore。但是适配了暗黑模式,没适配利索,页面有黑有白,就可能会被拒绝上架。
uni-app 官方 说明 : https://ask.dcloud.net.cn/article/36995 

开始深色模式

1 在 "GraceUI 付费用户群 群文件 > 6.0 相关 内下载 深色模式 start 包"
2 解压后获得一个项目文件夹
3 将 GraceUI6 框架核心文件夹 ( 下载框架时获得 )复制到此项目目录
4 运行观察效果

深色模式原理

1 使用自定义底部导航,利用框架内置颜色实现动态适配
2 布局过程中背景色使用浅色 深色2 种样式实现动态适配
3 布局过程中文本色使用浅色 深色2 种样式实现动态适配

示例代码

<view class="gui-bg-white gui-dark-bg-level-3">
	<text class="gui-color-black gui-dark-text-level-1">测试</text>
</view>

外层 view 背景色浅色时为白色, 深色时为 gui-dark-bg-level3 [ 灰黑色 ], 文本浅色时为黑色,深色时为白色。

简洁应用

最简单的适配方式就是正常开发浅色模式,在背景和文件处添加深色适配样式即可,框架内置深色适配样式如下 :
/* Grace6/graceDark.scss */
/* 深色模式 */
/* #ifndef APP-NVUE */
@media (prefers-color-scheme: dark){
	.gui-color-gray{color:rgba(188,188,188,1) !important;}
	/* 黑色 */
	.gui-dark-bg{background:#000000 !important;}
	.gui-dark-bg-level-1{background:$dark-l1 !important;}
	.gui-dark-bg-level-2{background:$dark-l2 !important;}
	.gui-dark-bg-level-3{background:$dark-l3 !important;}
	.gui-dark-bg-level-4{background:$dark-l4 !important;}
	.gui-dark-bg-level-5{background:$dark-l5 !important;}
	.gui-dark-bg-level-6{background:$dark-l6 !important;}
	.gui-dark-bg-level-7{background:$dark-l7 !important;} 
	.gui-dark-bg-level-8{background:$dark-l8 !important;}
	.gui-dark-bg-level-9{background:$dark-l9 !important;}
	.gui-dark-bg-level-10{background:$dark-l10 !important;}
	/* 白色 */
	.gui-dark-text-level-1{color:$white-l1 !important;}
	.gui-dark-text-level-2{color:$white-l2 !important;}
	.gui-dark-text-level-3{color:$white-l3 !important;}
	.gui-dark-text-level-4{color:$white-l4 !important;}
	.gui-dark-text-level-5{color:$white-l5 !important;}
	.gui-dark-text-level-6{color:$white-l6 !important;}
	.gui-dark-text-level-7{color:$white-l7 !important;}
	.gui-dark-text-level-8{color:$white-l8 !important;}
	.gui-dark-text-level-9{color:$white-l9 !important;}
	.gui-dark-text-level-10{color:$white-l10 !important;}
	/* 核心文本颜色 */
	.gui-primary-text{color:$white-l2;}
	.gui-secondary-text{color:$white-l3;}
	.gui-third-text{color:$white-l5;}
	.gui-primary-color{color:rgba(238,238,238,1) !important;}
	.gui-bg-primary{background-color:$dark-l4 !important;}
	.gui-color-gray{color:$white-l5 !important;}
	/* 页面内置全屏 Loading 背景颜色 */
	.gui-page-loading-bg{background-color:$dark-l1 !important;}
	/* 页面内置全屏 Loading 颜色 */
	.gui-page-loading-color{background-color:$white-l2 !important;}
	
	/* 底部导航 */
	.gui-footer{background-color:$dark-l2 !important;}
	/* 边框 */
	.gui-border,.gui-border-l,.gui-border-t,.gui-border-r,.gui-border-b{
		border-color:$dark-l4 !important;
	}
	.gui-footer{border-top:0px !important;}
	/* 默认修正 */
	.uni-page-head{background:$dark-l1 !important;} 
	.uni-page-head-hd, .uni-page-head-bd, .uni-page-head-ft{color:#FFFFFF !important;}
	page{background:$dark-l1 !important;}
	.gui-button{border-color:$dark-l2;}
	
	/* 提交按钮 */
	.gui-sbutton-default{background-color:$dark-l3;}
	.gui-sbutton-loading{background-color:$dark-l3; opacity:0.8;}
	.gui-sbutton-success{background-color:$dark-l3 !important;}
	.gui-sbutton-fail{background-color:$dark-l3 !important;}
	
	.gui-gtbg-black{background-image:linear-gradient(to right, #C8C9CC,#333333) !important;}
	.gui-primary-border-color{border-color:#FFFFFF !important;}
	
}
/* #endif */

扩展深色样式

您可以在自定义样式文件内,建议 /custom/custom.scss 种自定义自己的深色模式样式, 语法  :

/* 深色模式 */
/* #ifndef APP-NVUE */
@media (prefers-color-scheme: dark){
	.custom-switch-nav-border{border-color:#888888 !important;}
	.样式名称{只在深色模式下才会生效的样式}
}
/* #endif */