引子

总是遭遇第一版制作完成没多久，就整一出说什么要调动总共这个词项概念色调体系。确切是宝宝心里苦啊!

开端齐是通过uni名目自带的uni.scss中界说，在替换页面上对应的css。以便于达到一次性修改举座布局的姿首。

一.uni.scss 使用情势

在该文献里界说： $名字 ：神采值；

使用时需要在 style 节点上加上 lang=“scss”

该设施使用，合适单一神采修改，一次修改全局长入。

二.暗黑主题

暗黑模式（Dark Mode），也被称为夜间模式或深色模式，是一种高对比度，大致反色模式的显现模式。是一种成心于在昏暗环境下不雅看手机的高对比度的模式。uni-app的暗黑模式，是匡助开采者完成我方诓骗的暗黑模式的一批建树和API。开采者不错参考本文齐备我方诓骗的暗黑模式。

注：HBuilder X 3.6.9+ 扶植 当今只扶植深色和淡色

具体先容看官网地址：uniapp.dcloud.net.cn/tutorial/da…

三.自界说主题建树

可自行界说多种主题配色，通过js动态修改导航栏等色调。盘曲在于，页面加载逐渐时前期会显现出原有的色调。举座上不影响使用。

注：在APP 微信小门径 H5 齐行

1.在根目次下新建 theme 文献夹

css-theme.scss 主题适配主要css美腿丝袜

css-variate.scss 长入神采值建树

cue-theme.js vue 混入js

system-theme.js 自界说的相干建树

css-theme

主要为使用sass切换主题，百度一下大部分齐是按照以下建树，这里不外多先容

注：uni中使用时 提倡这个scss 在 uni.scss 中 引入该scss

taylor swift ai换脸

uni.scss中引入

css-variate

主要为建树主题所需css 神采值，浅近长入修改。

cue-theme

主要使用 混入 (mixin) ，浅近与在页面中复用交流的功能。

该设施主要调用vuex的数据 和 system-theme 中的设施

注：需要在main.js 导入该js

main.js 导入

system-theme

主要用来甩掉一些需要重迭使用的js。可凭据需求自行添加

注： themeList 为系统主题列表参数相干建树，用于全局成立系统导航栏，底部tab神采值的存放。

注：其中导入 css-variate.scss 在app 莫得相干数据复返，h5，微信小门径则寥落据复返。其他平台自行测试。

2.vuex 建树

使用vuex模块化开采（module）用于辞别主题相干成立 与其他需求。

theme.js 模块

注：namespaced: true 主要为 cue-theme 用于模块化调用。短少这个，在调用cue-theme中的设施时，拿不到所需参数

index.js 全局导出

main.js中导入

3.页面中使用

class="conter" :style="{'--page-bg':pageBg}" 为该页面单独成立背闲逸 ，需要合作 page 成立页面高度使用

:data-theme="cueTheme" 给view成立data-theme属性，凭据名字匹配对应神采

:class="[cueTheme]" 成立对应的名字， css 中使用 @include text-color();

案例地址： gitee.com/jielov/uni-…

四.暮夜 白上帝题展示

回归

到此这篇对于uni-app动态修改主题色的著作就先容到这了美腿丝袜，更多相干uni-app动态修改主题色实质请搜索剧本之家曩昔的著作或链接浏览底下的相干著作但愿环球以后多多扶植剧本之家！