进入实现方法和讲解
<view class="dark-bg" :style="{'--text-color': color}">
<view class="h2">测试组件</view>
<select-theme></select-theme>
</view>
<view class="h2">背景测试</view>
<view class="bg-test"></view>
<view class="h2">字体测试</view>
<view class="font-test">
<view>普通字体</view>
<view class="font-btn">按钮字体</view>
</view>
</view>
--text-color :
可以理解为一个style的属性变量,只要操作后边的color变量就可以实现颜色动态改变
声明变量:
theme.scss
$text-color: var(--text-color);
$text-color-reverse: var(--text-color-reverse);
$text-color-tab: var(--text-color-tab);
$bg-color: var(--bg-color);
$bg-shadow: var(--bg-shadow);
$theme-color: var(--theme-color);
vuex 中定义主题颜色和方案
export default {
namespaced: true,
state: {
dark: {
'--text-color': '#000000',
'--text-color-reverse': '#ccc9bd',
'--text-color-tab': '#ddd8be',
'--bg-color': '#0000004d',
'--bg-shadow': '#e9ead82e'
light: {
'--text-color': '#ffffff',
'--text-color-reverse': '#333642',
'--text-color-tab': '#222741',
'--bg-color': '#ffffff4d',
'--bg-shadow': '#1615272e'
scheme: ['dark', 'light'],
theme: 'light'
getters: {
theme(state) {
return state[state.theme]
mutations: {
updateTheme(state, { theme, message = '主题切换完成' }) {
if (state.scheme.includes(theme)) {
state.theme = theme
message &&
uni.showToast({
title: message,
icon: 'none'
} else {
console.warn(new Error('不存在的主题类型'))
由上可见:
getters中会根据state中当前的主题方案theme来读取state中的不同方案;
给到页面中的style就可以了,这样这个有style属性的子级元素就可以使用此变量
<template>
<view class="dark-bg" :style="theme">
<view class="h2">测试组件</view>
<select-theme></select-theme>
</view>
<view class="h2">背景测试</view>
<view class="bg-test"></view>
<view class="h2">字体测试</view>
<view class="font-test">
<view>普通字体</view>
<view class="font-btn">按钮字体</view>
</view>
</view>
</template>
<script>
import SelectTheme from '@/components/select-theme'
import { mapGetters } from 'vuex'
export default {
components: {
SelectTheme
computed: {
...mapGetters('theme', ['theme'])
</script>
<style scoped lang="scss">
.dark-bg {
width: 100vw;
height: 100vh;
font-size: 16px;
background: #33333390;
color: $text-color;
.h2 {
font-size: 20px;
font-weight: bold;
.px-class {
width: 100px;
height: 100px;
background: $success-color;
.bg-test {
width: 300px;
height: 160px;
border-radius: 10px;
background: $bg-color;
.font-test {
color: $text-color;
.font-btn {
color: $text-color-reverse;
</style>
select-theme组件:
<template>
<view class="select">
:class="[{ 'active-ele': theme === item }]"
v-for="item in scheme"
:key="item"
@click="selectChange(item)"
>{{ item }}</view
</view>
</view>
</template>
<script>
import { mapMutations, mapGetters, mapState } from 'vuex'
export default {
computed: {
...mapGetters('theme', ['theme']),
...mapState('theme', ['theme', 'scheme'])
methods: {
...mapMutations('theme', ['updateTheme']),
selectChange(theme) {
this.updateTheme({ theme })
</script>
<style scoped lang="scss">
.select {
> view {
padding: 5px 15px;
border-radius: 10px;
display: inline-block;
cursor: pointer;
.active-ele {
background: $success-color;
color: $text-color-tab;
</style>
卖女孩的小火柴_
粉丝