手册版本 V6.0

深色模式支持说明

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

如何关闭深色模式

<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 */