uni-app 动态修改主题色

张惠国 發表於 2022-12-14 13:58:00

老是碰到初版制作完成没多久，就整一出说什么要更改整个项目的色彩体系。真的是宝宝心里苦啊!
 起初都是通过uni项目自带的uni.scss中定义，在替换页面上对应的css。以便于达到一次性修改整体布局的样式。
<h2 class="md-end-block md-heading">一.uni.scss 使用方式</h2>
在该文件里定义： $名字：颜色值；
<img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214134507384-1261779450.png" alt="">
使用时需要在 style 节点上加上 lang=“scss”
<div class="cnblogs_code">
<pre><style lang="scss" scoped>
.bg {
 height: 120px;
 width: 100%;
 background-color: $uni-color-primary;
}
</style></pre>
</div>
该方法使用，适合单一颜色修改，一次修改全局统一。
<h2 class="md-end-block md-heading">二.暗黑主题</h2>
暗黑模式（Dark Mode），也被称为夜间模式或深色模式，是一种高对比度，或者反色模式的显示模式。是一种有利于在黑暗环境下观看手机的高对比度的模式。uni-app的暗黑模式，是帮助开发者完成自己应用的暗黑模式的一批配置和API。开发者可以参考本文实现自己应用的暗黑模式。
注：HBuilder X 3.6.9+ 支持目前只支持深色和浅色
具体介绍看官网地址：https://uniapp.dcloud.net.cn/tutorial/darkmode.html
<h2 class="md-end-block md-heading">三.自定义主题配置</h2>
可自行定义多种主题配色，通过js动态修改导航栏等色彩。缺点在于，页面加载缓慢时前期会显示出原有的色彩。整体上不影响使用。
注：在APP 微信小程序 H5 都行
<img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214134558805-1568388512.png" alt="">
<h3 class="md-end-block md-heading">1.在根目录下新建 theme 文件夹</h3>
<code>css-theme.scss</code> 主题适配主要css
<code>css-variate.scss</code> 统一颜色值配置
<code>cue-theme.js</code> vue 混入js
<code>system-theme.js</code> 自定义的相关配置
<img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214134616162-815922249.png" alt="">
<h4 class="md-end-block md-heading md-focus">css-theme </h4>
主要为使用sass切换主题，百度一下大部分都是按照以下配置，这里不过多介绍
注：uni中使用时建议这个scss 在 uni.scss 中引入该scss
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_64df70fd-7faf-4df8-ae5b-92ebd4f09d37" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_64df70fd-7faf-4df8-ae5b-92ebd4f09d37" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_64df70fd-7faf-4df8-ae5b-92ebd4f09d37" class="cnblogs_code_hide">
<pre>/*
* @author: Jay
* @description: 通过监听 css 变量切换主题色
* @createTime: 2022-12-13 11:29:00
* @introduce: 需要在 uni.scss 中引入该scss
*/

//统一配置色彩
@import "./css-variate.scss";

/*---------------------方法一使用css 控制变量---------------------------*/
/*
使用方法
.css-theme {
 width: 100%;
 @include text-color();
 @include base-background();
 @include border-color();
 @include shadow-color();
}
*/

/* 白天主题颜色集合 */
$day-theme:(
bg-color:$day-bg,
text-color:$day-text,
border-color: $day-border,
shadow-color:$day-shadow
);

/* 夜间主题颜色集合 */
$night-theme:(
bg-color:$night-bg,
text-color:$night-text,
border-color: $night-border,
shadow-color: $night-shadow
);

/* 玉红主题颜色集合 */
$jade-theme:(
bg-color:$jade-bg,
text-color:$jade-text,
border-color: $jade-border,
shadow-color: $jade-shadow
);

//定义主题对象
$themes: (
day-theme: $day-theme,
night-theme: $night-theme,
jade-theme: $jade-theme
);

// 生成主题背景色样式
@mixin base-background(){
@each $themename , $theme in $themes {
 &.#{$themename} {
 background-color: map-get($map: $theme, $key: bg-color);
 }
}
}

// 生成主题字体色样式
@mixin text-color(){
@each $themename , $theme in $themes {
 &.#{$themename} {
 color: map-get($map: $theme, $key: text-color) !important;
 }
}
}

// 生成主题边框色样式
@mixin border-color($opa: 1.0){
@each $themename , $theme in $themes {
 &.#{$themename} {
 border-color: rgba(map-get($map: $theme, $key: border-color), $opa) !important;
 }
}
}

// 生成主题阴影
@mixin shadow-color(){
@each $themename , $theme in $themes {
 &.#{$themename} {
 box-shadow: 0 16rpx 32rpx rgba(map-get($map: $theme, $key: shadow-color), 0.4);
 }
}
}

/*---------------------方法二使用css 属性选择器---------------------------*/
/*
使用方法
 <view class="padding-sm" :data-theme="cueTheme">
 暗黑模式-官方自带:(只支持白天黑夜)
 </view>
*/

/* 白天主题 */
{
background-color: $day-bg;
color: $day-text;
border-color: $day-border !important;
shadow-color: $day-shadow;
}

/* 夜间主题 */
{
background-color: $night-bg;
color: $night-text;
border-color: $night-border !important;
shadow-color: $night-shadow;
}

/* 玉红主题 */
{
background-color: $jade-bg;
color: $jade-text;
border-color: $jade-border !important;
shadow-color: $jade-shadow;
}</pre>
</div>
css-theme </div>
<h4 class="md-end-block md-heading md-focus">uni.scss中引入</h4>
<div class="cnblogs_code">
<pre>/* 主题相关颜色 */
@import './theme/css-theme.scss';</pre>
</div>
<h4 class="md-end-block md-heading md-focus">css-variate</h4>
主要为配置主题所需css 颜色值，方便统一修改。
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_0983347f-5da7-41bd-9c6e-9b1014911494" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_0983347f-5da7-41bd-9c6e-9b1014911494" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_0983347f-5da7-41bd-9c6e-9b1014911494" class="cnblogs_code_hide">
<pre>/*
主题统一配置色彩
*/

//页面背景色
$page-bg:var(--page-bg,#FFFFFF);

// 白天主题
$day-bg: #FFFFFF;
$day-text: #333333;
$day-border: #c8c7cc;
$day-shadow: #c8c7cc;

// 夜间主题
$night-bg: #292929;
$night-text: #FFFFFF;
$night-border: #c8c7cc;
$night-shadow: #FFFFFF;

// 玉红主题
$jade-bg: #c04851;
$jade-text: #FFFFFF;
$jade-border: #eea2a4;
$jade-shadow: #f1939c;

/*
需要在js 中使用的css 导出
 APP 无法使用
 h5 微信小程序有值
*/

:export {
dayBg: $day-bg;
nightBg: $night-bg;
jadeBg: $jade-bg;
}</pre>
</div>
css-variate</div>
<h4 class="md-end-block md-heading md-focus">cue-theme</h4>
主要使用混入 (mixin) ，方便与在页面中复用相同的功能。
该方法主要调用vuex的数据和 system-theme 中的方法
注：需要在main.js 导入该js
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_ed65b8b5-ddfd-4d40-a4c1-f303404b3013" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_ed65b8b5-ddfd-4d40-a4c1-f303404b3013" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_ed65b8b5-ddfd-4d40-a4c1-f303404b3013" class="cnblogs_code_hide">
<pre>/*
* @author: Jay
* @description: 监听主题变化
* @createTime: 2022-12-12 15:22:19
*/
import system from '../theme/system-theme'
import {
mapMutations,
mapGetters
} from 'vuex'
export default {
install(Vue) {
 Vue.mixin({
 onShow() {
 //修改导航栏底部 tab
 system.setSystemTheme(this.cueTheme)
 //获取缓存背景色
 let bgColor = uni.getStorageSync('pageColor') || '';
 if (bgColor) {
 this.getSystemBg(bgColor)
 }
 //获取缓存主题名字
 let themeType = uni.getStorageSync('themeType') || '';
 if (themeType) {
 this.cueGetTheme(themeType)
 }
 // 监听主题状态变化
 uni.onThemeChange((res) => {
 // console.log("监听主题状态变化", res.theme);
 //黑夜
 if (res.theme == 'dark') {
 this.cueGetTheme('night-theme')
 }
 //白天
 if (res.theme == 'light') {
 // 有多个主题时判断缓存是否为白色主题
 let type = uni.getStorageSync('themeType');
 if (type != 'day-theme') {
 this.cueGetTheme(type)
 } else {
 this.cueGetTheme('day-theme')
 }
 }
 });
 },
 computed: {
 // 获取vuex 主题参数
 ...mapGetters({
 cueTheme: 'theme/theme',
 pageBg: 'theme/pageColor',
 }),
 },
 methods: {
 // 修改主题
 ...mapMutations({
 cueGetTheme: 'theme/GET_THEME',
 themeCache: 'theme/SET_THEME_CACHE',
 pageColorCache: 'theme/SET_PAGE_COLOR'
 }),
 // 设置全局背景色
 getSystemBg() {
 //从主题列表获取页面颜色
 let bgColor = system.systemThemeBg(this.cueTheme)
 // console.log(bgColor);
 //缓存已设置背景色
 this.pageColorCache(bgColor)
 }
 }
 })
}
}</pre>
</div>
cue-theme</div>
<h4 class="md-end-block md-heading md-focus">main.js 导入</h4>
<div class="cnblogs_code">
<pre>//监听主题变化
import theme from './theme/cue-theme.js'
Vue.use(theme)</pre>
</div>
<h4 class="md-end-block md-heading md-focus">system-theme</h4>
主要用来放置一些需要重复使用的js。可根据需求自行添加
注： themeList 为系统主题列表参数相关配置，用于全局设置系统导航栏，底部tab颜色值的存放。
注：其中导入 css-variate.scss 在app 没有相关数据返回，h5,微信小程序则有数据返回。其他平台自行测试。
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_7a4dae3b-69f4-489f-84c5-4b8693817f7d" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_7a4dae3b-69f4-489f-84c5-4b8693817f7d" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_7a4dae3b-69f4-489f-84c5-4b8693817f7d" class="cnblogs_code_hide">
<pre>/*
* @author: Jay
* @description: 主题相关配置
* @createTime: 2022-12-12 17:45:09
*/

/*
variables APP 拿不到值
h5 微信小程序有值返回
*/
import variables from './css-variate.scss'
export default {
/*
 系统主题列表
*/
themeList() {
 return [{
 title: "白天",
 name: "day-theme",
 navBg: variables.dayBg,
 navBgApp: "#FFFFFF",
 tabBg: "",
 tabSeleText: "",
 tabText: "",
 }, {
 title: "黑夜",
 name: "night-theme",
 navBg: variables.nightBg,
 navBgApp: "#292929",
 tabBg: "",
 tabSeleText: "",
 tabText: "",
 }, {
 title: "玉红",
 name: "jade-theme",
 navBg: variables.jadeBg,
 navBgApp: "#c04851",
 tabBg: "",
 tabSeleText: "",
 tabText: "",
 }]
},
//根据主题返回背景色
 systemThemeBg(name) {
 let color = ''
 this.themeList().map((item, index) => {
 if (item.name === name) {
 color = item.navBgApp
 }
 })
 return color
},
//根据主题修改系统导航栏底部 tab
 setSystemTheme(name) {
 this.themeList().map((item, index) => {
 if (item.name === name) {
 // 设置页面导航条颜色
 this.setNavigationColor(item.name, item.navBgApp)
 // 设置 tabBar 样式
 this.setTabBarColor(item.tabBg, item.tabSeleText, item.tabText)
 }
 })
},
/*
 设置页面导航条颜色
 name 主题名字该颜色值只支持2种故判断对于白天为 #000 其他均为 #FFF
 bgClor 背景色可以随意修改
*/
setNavigationColor(name, bgClor) {
 let navigationBar = {
 // 前景颜色值仅支持 #ffffff 和 #000000
 frontColor: name == 'day-theme' ? "#000000" : "#ffffff",
 // 背景颜色值
 backgroundColor: bgClor || "#FFFFFF",
 // fail(err) {
 // console.error(err)
 // }
 }
 uni.setNavigationBarColor(navigationBar)
},

/*
 动态设置 tabBar 样式
*/
setTabBarColor(bgColor, seleColor, color) {
 let tabBar = {
 // 背景色
 backgroundColor: bgColor || '#ffffff',
 // 文字选中时的颜色
 selectedColor: seleColor || '#3cc51f',
 // 文字默认颜色
 color: color || '#7A7E83',
 }
 uni.setTabBarStyle(tabBar)
}
}</pre>
</div>
system-theme</div>
<h3 class="md-end-block md-heading">2.vuex 配置</h3>
使用vuex模块化开发（module）用于区分主题相关设置与其他需求。
<img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214134926878-1141666419.png" alt="">
<h4 class="md-end-block md-heading md-focus">theme.js 模块</h4>
注：<code>namespaced: true</code> 主要为 cue-theme 用于模块化调用。缺少这个，在调用cue-theme中的方法时，拿不到所需参数
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_57d9c0ff-a639-455c-b119-db7683227b7c" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_57d9c0ff-a639-455c-b119-db7683227b7c" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_57d9c0ff-a639-455c-b119-db7683227b7c" class="cnblogs_code_hide">
<pre>//主题相关配置
import system from '../../theme/system-theme'

const theme = {
namespaced: true,
state: {
 theme: "day-theme",
 //主题列表
 theme: system.themeList(),
 //页面背景色
 pageColor: "",
},
mutations: {
 //设置主题色
 GET_THEME(state, provider) {
 state.theme = provider
 //修改导航栏底部 tab
 system.setSystemTheme(state.theme)
 },
 //设置主题缓存
 SET_THEME_CACHE(state, provider) {
 uni.setStorage({
 key: 'themeType',
 data: provider
 });
 },
 //设置主题缓存
 SET_PAGE_COLOR(state, provider) {
 state.pageColor = provider
 //缓存
 uni.setStorage({
 key: 'pageColor',
 data: provider
 });
 },
},
getters: {
 theme: state => state.theme,
 pageColor: state => state.pageColor
},
actions: {

}
}

export default theme</pre>
</div>
theme.js</div>
<h4 class="md-end-block md-heading md-focus">index.js 全局导出</h4>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_7349b6a6-7918-45e8-9eed-1fc3529781c7" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_7349b6a6-7918-45e8-9eed-1fc3529781c7" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_7349b6a6-7918-45e8-9eed-1fc3529781c7" class="cnblogs_code_hide">
<pre>import Vue from "vue"
import Vuex from "vuex"
//登录
import logIn from "./modules/login.js"
//主题切换
import theme from "./modules/theme.js"

Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
 theme,
 logIn
}
})

export default store</pre>
</div>
index.js</div>
<h4 class="md-end-block md-heading md-focus">main.js中导入</h4>
<div class="cnblogs_code">
<pre>//引入store
import store from 'store/index.js'
Vue.prototype.$store = store</pre>
</div>
<h3 class="md-end-block md-heading md-focus">3.页面中使用</h3>
<code>class="conter" :style="{'--page-bg':pageBg}"</code> 为该页面单独设置背景色，需要配合 page 设置页面高度使用
<code>:data-theme="cueTheme"</code> 给view设置data-theme属性,根据名字匹配对应颜色
<code>:class=""</code> 设置对应的名字， css 中使用 <code>@include text-color();</code>
案例地址： https://gitee.com/jielov/uni-app-tabbar
插件市场地址：https://ext.dcloud.net.cn/plugin?id=10498
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_d6d2002f-4945-4f77-bce6-f74f9394a015" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_d6d2002f-4945-4f77-bce6-f74f9394a015" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_d6d2002f-4945-4f77-bce6-f74f9394a015" class="cnblogs_code_hide">
<pre>
<template>
<view class="conter" :style="{'--page-bg':pageBg}">
 <view class="padding margin-bottom-xl css-theme" :class="">
 <view class="text-lg text-center text-bold">
 暗黑模式
 </view>
 <view class="margin-top-sm" @click="openDoc">
 uni-app的暗黑模式。<text class="text-blue">点击查看官方文档</text>
 </view>
 </view>

 <view class="css-theme padding" :class="">
 <view class="text-center text-bold text-lg">
 通过判断css 名字修改主题!!!
 </view>
 <view class="margin-tb-sm text-lg text-center">
 当前主题:{{cueTheme}}
 </view>
 <view class="margin-tb-sm text-lg text-center">
 当前页面背景色:{{pageBg}}
 </view>
 <view class="flex align-center justify-around">
 <button class="cu-btn round" @click="cssEditThemeBut('day-theme')">白天</button>
 <button class="cu-btn round" @click="cssEditThemeBut('night-theme')">黑夜</button>
 <button class="cu-btn round" @click="cssEditThemeBut('jade-theme')">玉红</button>
 </view>
 </view>

 <view class="padding margin-top-xl" :data-theme="cueTheme">
 <view class="text-center text-bold text-lg">
 通过 data-theme 判断名字修改主题!!!
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {
 url: 'https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode'
 };
 },
 onLoad() {
 console.log("当前主题:", this.cueTheme);
 },
 onShow() {},
 methods: {
 cssEditThemeBut(e) {
 //修改主题
 this.cueGetTheme(e)
 //设置主题缓存
 this.themeCache(e)
 //设置全局背景色
 this.getSystemBg()
 // js自改变量值h5 可用
 // document.getElementsByTagName('body').style.setProperty('--page-bg', 'red');
 },
 openDoc() {
 // #ifdef APP
 plus.runtime.openWeb(this.url);
 // #endif
 // #ifdef H5
 let a = document.createElement('a');
 a.href = this.url;
 a.target = '__blank';
 a.click();
 a = null;
 // #endif
 }
 }
}
</script>
<style>
/* 全局背景色 */
page {
 height: 100%;
}
</style>
<style lang="scss" scoped>
// 全局背景色
.conter {
 height: 100%;
 background-color: $page-bg;
}

.css-theme {
 // border: 2px solid;
 @include text-color();
 @include base-background();
 @include border-color();
 @include shadow-color();
}
</style></pre>
</div>
页面代码</div>
<h2>四.黑夜白天主题展示</h2>
<img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214135154123-2042313512.png" alt="" loading="lazy"><img src="https://img2023.cnblogs.com/blog/2237618/202212/2237618-20221214135209631-313876479.png" alt="" loading="lazy">
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/16981875.html 
来源：https://www.cnblogs.com/lovejielive/p/16981875.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 动态修改主题色