uni-app+vue3微信小程序切换主题皮肤

思路来源： https://blog.csdn.net/qq_42611074/article/details/128236458

1. 引用store做全局css变量替换；

• store.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    // default-theme dark-theme
    themeName: 'default-theme',
    themeStyle: {
      'default-theme': `
        --solar-color1: #ff5000;
        --solar-color2: #000000;
        --solar-color3: #b1b1b1;
        --solar-color4: rgba(0, 0, 0, 0.1);
        --solar-back-color1: linear-gradient(270deg, #ff8800 0%, #ff5000 100%);
        --solar-back-color2: rgba(255, 255, 255, 0.9);
        --solar-back-color3: linear-gradient(101deg, #ffffff 0%, #f2f1f6 100%);
        --solar-back-color4: #ffffff;
		`,
      'dark-theme': `
	    --solar-color1: #000000;
        --solar-color2: #000000;
        --solar-color3: #000000;
        --solar-color4: #000000;
        --solar-back-color1: #000000;
        --solar-back-color2: #000000;
        --solar-back-color3: #000000;
        --solar-back-color4: #ffffff;
		  `
    }
  },
  getters: {
    theme(state) {
      return state.themeStyle[state.themeName]
    }
  },
  mutations: {
    setTheme(state, themeName = 'default-theme') {
      state.themeName = themeName
    }
  }
})

export default store

2. 添加全局的监听函数

• common/themeMixin.js

import { mapState, mapGetters } from 'vuex'

export default {
  install(Vue) {
    Vue.mixin({
      computed: {
        ...mapState({
          themeName: 'themeName'
        }),
        ...mapGetters({
          theme: 'theme'
        })
      }
    })
  }
}

• main.js

import store from '@/store/index'
import themeMixin from '@/common/themeMixin.js'

import { createSSRApp } from 'vue'
const app = createSSRApp(App)
app.use(store)
app.use(themeMixin)

3. 给要切换的页面加上css变量

• login.vue

<template>
  <view class="container" :style="theme">
      <view class="btn">
         <button
         class="btn-primary"
         @click="handleSwitch"
         >切换button>
      view>
  view>
template>

<script setup>
import { useStore } from 'vuex'
const store = useStore()

function handleSwitch() {
  store.commit('setTheme', 'dark-theme')
}
script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  background: var(--solar-back-color2);
  backdrop-filter: blur(23px);
}
.btn-primary {
  cursor: pointer;
  width: 670rpx;
  height: 96rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(
    270deg,
    #ff8800 0%,
    #ff5000 100%
  );
  border-radius: 24rpx;
  box-sizing: border-box;
}
style>

升级版

1. 在base.css写好主题配色；

.default-theme {
  --solar-color1: #ff5000;
  --solar-color2: #000000;
  --solar-color3: #b1b1b1;
  --solar-color4: rgba(0, 0, 0, 0.1);
  --solar-back-color1: linear-gradient(270deg, #ff8800 0%, #ff5000 100%);
  --solar-back-color2: rgba(255, 255, 255, 0.9);
  --solar-back-color3: linear-gradient(101deg, #ffffff 0%, #f2f1f6 100%);
  --solar-back-color4: #ffffff;
}

.dark-theme {
  --solar-color1: #000000;
  --solar-color2: #000000;
  --solar-color3: #000000;
  --solar-color4: #000000;
  --solar-back-color1: #000000;
  --solar-back-color2: #000000;
  --solar-back-color3: #000000;
  --solar-back-color4: #ffffff;
}

2. 引用store做全局css变量替换；

• store.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    // default-theme dark-theme
    themeName: 'default-theme'
  },
  mutations: {
    setTheme(state, themeName = 'default-theme') {
      state.themeName = themeName
    }
  }
})

export default store

3. 添加全局的监听函数

• common/themeMixin.js

import { mapState, mapGetters } from 'vuex'

export default {
  install(Vue) {
    Vue.mixin({
      computed: {
        ...mapState({
          themeName: 'themeName'
        })
      }
    })
  }
}

• main.js

import store from '@/store/index'
import themeMixin from '@/common/themeMixin.js'

import { createSSRApp } from 'vue'
const app = createSSRApp(App)
app.use(store)
app.use(themeMixin)

4. 给要切换的页面加上css变量

• login.vue

<template>
  <view class="container" :class="themeName">
      <view class="btn">
         <button
         class="btn-primary"
         @click="handleSwitch"
         >切换button>
      view>
  view>
template>

<script setup>
import { useStore } from 'vuex'
const store = useStore()

function handleSwitch() {
  store.commit('setTheme', 'dark-theme')
}
script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  background: var(--solar-back-color2);
}
.btn-primary {
  cursor: pointer;
  width: 670rpx;
  height: 96rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(
    270deg,
    #ff8800 0%,
    #ff5000 100%
  );
  border-radius: 24rpx;
  box-sizing: border-box;
}
style>