openblog

Appearance

css主题笔记（二）：vuex切换主题 ​

图片

基于vuex切换主题

之前切换主题的方法在uniapp无效，因为真机测试是没有dom的，所以改用vuex方法实现

vuex

js
import {createStore} from 'vuex'

const themes = {
  linght: {
    appcolor: '#FC5531',
    appbgcolor: '#EDEDED',
    appboxcolor: '#FFF',
    fontcolorbase: '#555',
    fontcolorshallow: '#aaa',
    fontcolordeep: '#333',
    fontsizesmall: '13px',
    fontsizebase: '15px',
    fontsizelg: '17px',
  },
  draw: {
    appcolor: '#FC5531',
    appbgcolor: '#111',
    appboxcolor: '#282828',
    fontcolorbase: '#555',
    fontcolorshallow: '#aaa',
    fontcolordeep: '#fff',
    fontsizesmall: '13px',
    fontsizebase: '15px',
    fontsizelg: '17px',
  }
};
const store = createStore({
  state: {
    themeMark: 'linght',
    theme: themes.linght,
  },
  mutations: {
    // 切换不同主题
    changeTheme(state){
      if(state.themeMark == 'linght'){
        state.theme = themes.draw
        state.themeMark = 'draw'
      }else{
        state.theme = themes.linght
        state.themeMark = 'linght'
      }
    }
  }
})

export default store;
import {createStore} from 'vuex'

const themes = {
  linght: {
    appcolor: '#FC5531',
    appbgcolor: '#EDEDED',
    appboxcolor: '#FFF',
    fontcolorbase: '#555',
    fontcolorshallow: '#aaa',
    fontcolordeep: '#333',
    fontsizesmall: '13px',
    fontsizebase: '15px',
    fontsizelg: '17px',
  },
  draw: {
    appcolor: '#FC5531',
    appbgcolor: '#111',
    appboxcolor: '#282828',
    fontcolorbase: '#555',
    fontcolorshallow: '#aaa',
    fontcolordeep: '#fff',
    fontsizesmall: '13px',
    fontsizebase: '15px',
    fontsizelg: '17px',
  }
};
const store = createStore({
  state: {
    themeMark: 'linght',
    theme: themes.linght,
  },
  mutations: {
    // 切换不同主题
    changeTheme(state){
      if(state.themeMark == 'linght'){
        state.theme = themes.draw
        state.themeMark = 'draw'
      }else{
        state.theme = themes.linght
        state.themeMark = 'linght'
      }
    }
  }
})

export default store;

使用

html
<template>
  <view class="index" :style="{background:state.theme.appbgcolor}">
  </view>
</template>
<script setup lang="ts">
  import { useStore } from 'vuex'
  const { state,commit } = useStore();
 </script>
<template>
  <view class="index" :style="{background:state.theme.appbgcolor}">
  </view>
</template>
<script setup lang="ts">
  import { useStore } from 'vuex'
  const { state,commit } = useStore();
 </script>

切换主题

html
<template>
  <view class="index" :style="{background:state.theme.appbgcolor}">
    <view class="list-item" @click="onChangeTheme()">
          <text :style="{color:state.theme.fontcolordeep}">主题</text>
      </view>
  </view>
</template>
<script setup lang="ts">
  import { useStore } from 'vuex'
  const { state,commit } = useStore();
  const onChangeTheme = ()=>{
    commit('changeTheme');
  }
  
</script>
<template>
  <view class="index" :style="{background:state.theme.appbgcolor}">
    <view class="list-item" @click="onChangeTheme()">
          <text :style="{color:state.theme.fontcolordeep}">主题</text>
      </view>
  </view>
</template>
<script setup lang="ts">
  import { useStore } from 'vuex'
  const { state,commit } = useStore();
  const onChangeTheme = ()=>{
    commit('changeTheme');
  }
  
</script>

本文仅用作学习交流，谢谢观看

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com