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

这篇具有很好参考价值的文章主要介绍了uni-app+vue3微信小程序切换主题皮肤。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

思路来源： https://blog.csdn.net/qq_42611074/article/details/128236458文章来源地址https://www.toymoban.com/news/detail-517238.html

引用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

添加全局的监听函数

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)

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

<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>

升级版

在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;
}

引用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

添加全局的监听函数

common/themeMixin.js

import { mapState, mapGetters } from 'vuex'

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

main.js

import '@/common/base.scss'
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)

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

<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>