Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
5c1a5ce6
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
5c1a5ce6
编写于
5月 31, 2024
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(theme.json): 新增theme.json 说明,待完善
上级
b8ac93c5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
148 addition
and
0 deletion
+148
-0
docs/collocation/themejson.md
docs/collocation/themejson.md
+148
-0
未找到文件。
docs/collocation/themejson.md
0 → 100644
浏览文件 @
5c1a5ce6
# theme.json
> HBuilder X 4.18+ 支持
### app
使用步骤
1.
在
`theme.json`
中定义相关变量
2.
在
`pages.json`
中以@开头引用变量
3.
可选在
`manifest.json -> app`
中配置主题默认值
`"defaultAppTheme": "light"`
, 支持通过
[
主题API
](
https://doc.dcloud.net.cn/uni-app-x/api/theme.html
)
动态设置
**注意:**
-
`iOS 13+`
、
`Android 10+`
设备上才支持
支持通过变量配置的属性如下所示:
-
全局配置 globalStyle 与页面支持
-
navigationBarBackgroundColor
-
navigationBarTextStyle
-
backgroundColor
-
backgroundTextStyle
-
全局配置 tabbar 属性:
-
color
-
selectedColor
-
backgroundColor
-
borderStyle
-
list
-
iconPath
-
selectedIconPath
## 变量配置文件 theme.json@themejson
`theme.json`
用于颜色主题相关的变量定义,包含以下属性:
| 属性 | 类型 | 必填 | 描述 |
| :---- | :----- | :--- | :------------------- |
| light | Object | 是 | 浅色模式下的变量定义 |
| dark | Object | 是 | 深色模式下的变量定义 |
示例如下:
```
json
{
"light"
:
{
"navBgColor"
:
"#f8f8f8"
,
"navTxtStyle"
:
"black"
},
"dark"
:
{
"navBgColor"
:
"#292929"
,
"navTxtStyle"
:
"white"
}
}
```
完成定义后,可在
`pages.json`
中全局配置或页面配置的相关属性中以
`@`
开头引用,例如:
```
json
//
全局配置
{
"globalStyle"
:
{
"navigationBarBackgroundColor"
:
"@navBgColor"
,
"navigationBarTextStyle"
:
"@navTxtStyle"
}
}
//
页面配置
{
"path"
:
"pages/index/index"
,
"style"
:{
"navigationBarBackgroundColor"
:
"@navBgColor"
,
"navigationBarTextStyle"
:
"@navTxtStyle"
}
}
```
配置完成后,调用相应 api 框架会自动所设属性,展示对应主题下的颜色。
## 配置示例@themeconfig
pages.json(示例省略了主题相关以外的配置项)
```
json
{
"globalStyle"
:
{
"navigationBarBackgroundColor"
:
"@navBgColor"
,
"navigationBarTextStyle"
:
"@navTxtStyle"
,
"backgroundColor"
:
"@bgColor"
,
"backgroundTextStyle"
:
"@bgTxtStyle"
},
"tabBar"
:
{
"color"
:
"@tabFontColor"
,
"selectedColor"
:
"@tabSelectedColor"
,
"backgroundColor"
:
"@tabBgColor"
,
"borderStyle"
:
"@tabBorderStyle"
,
"list"
:
[
{
"iconPath"
:
"@iconPath1"
,
"selectedIconPath"
:
"@selectedIconPath1"
},
{
"iconPath"
:
"@iconPath2"
,
"selectedIconPath"
:
"@selectedIconPath2"
}
]
}
}
```
theme.json
```
json
{
"light"
:
{
"navBgColor"
:
"#f8f8f8"
,
"navTxtStyle"
:
"black"
,
"bgColor"
:
"#ffffff"
,
"bgTxtStyle"
:
"light"
,
"bgColorTop"
:
"#eeeeee"
,
"bgColorBottom"
:
"#efefef"
,
"tabFontColor"
:
"#000000"
,
"tabSelectedColor"
:
"#3cc51f"
,
"tabBgColor"
:
"#ffffff"
,
"tabBorderStyle"
:
"black"
,
"iconPath1"
:
"/static/icon1_light.png"
,
"selectedIconPath1"
:
"/static/selected_icon1_light.png"
,
"iconPath2"
:
"/static/icon2_light.png"
,
"selectedIconPath2"
:
"/static/selected_icon2_light.png"
},
"dark"
:
{
"navBgColor"
:
"#292929"
,
"navTxtStyle"
:
"white"
,
"bgColor"
:
"#1f1f1f"
,
"bgTxtStyle"
:
"dark"
,
"bgColorTop"
:
"#292929"
,
"bgColorBottom"
:
"#1f1f1f"
,
"tabFontColor"
:
"#ffffff"
,
"tabSelectedColor"
:
"#51a937"
,
"tabBgColor"
:
"#292929"
,
"tabBorderStyle"
:
"white"
,
"iconPath1"
:
"/static/icon1_dark.png"
,
"selectedIconPath1"
:
"/static/selected_icon1_dark.png"
,
"iconPath2"
:
"/static/icon2_dark.png"
,
"selectedIconPath2"
:
"/static/selected_icon2_dark.png"
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录