序文
切り替えるときはインターフェースを再調整しないでください
実装
1. まず、パブリック CSS 変数を格納する js ファイルを作成します
定義する必要がある CSS 変数を js ファイルに保存します (例:variable.js)
2. ページでこれらの CSS 変数を使用します
3.css-vars-ponyfillプラグインをインストールする
npm i css-vars-ponyfill
" css-vars-ponyfill" 公式コンセプト: 従来および最新のブラウザーで CSS カスタム プロパティ (別名「CSS 変数」) のクライアント側サポートを提供するポニーフィル。（具体的な使い方や考え方については公式サイトをご覧ください）
4.テーマを切り替えるjsをカプセル化し、main.jsで初期化呼び出しを行う
テーマ.js
// theme.js
import {
lightTheme, darkTheme } from "@/assets/js/variable"
import cssVars from "css-vars-ponyfill"
export const initTheme = (theme) => {
document.documentElement.setAttribute("data-theme", theme ? "dark" : "light")
cssVars({
watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
variables: theme ? darkTheme : lightTheme, // variables 自定义属性名/值对的集合
onlyLegacy: false, // false 默认将css变量编译为浏览器识别的css样式 true 当浏览器不支持css变量的时候将css变量编译为识别的css
})
}
5. main.js呼び出し
import {
initTheme } from './theme'
let theme = localStorage.getItem('theme') === 'light' ? false : true
initTheme(theme)
6. Home.vue スイッチテーマ (ここのフォルダーに写真があります)
<template>
<div class="home">
<div>
<el-switch
v-model="theme"
@change="changeSkin"
active-text="黑色背景"
inactive-text="白色背景"
>
</el-switch>
</div>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="less_box add">
<img :src="avatar" alt="" />
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</div>
</template>
<script>
import {
initTheme } from '@/theme'
import {
mapState, mapMutations } from 'vuex'
// import BUS from '@/utils/bus'
export default {
data () {
return {
theme: true,
input: ''
}
},
computed: {
...mapState({
sysTheme: 'theme' }),
avatar () {
// let theme = this.sysTheme === false ? 'light' : 'dark'
return require(`@/assets/images/logo-${
this.sysTheme}.png`)
}
},
watch: {
},
mounted () {
console.log(this.sysTheme);
this.theme = this.sysTheme === 'dark' ? true : false
// document.body.style.setProperty('--bottom-bg', '#0094ff');
// initTheme(this.theme)
// console.log(1111);
},
methods: {
...mapMutations({
setTheme: 'setTheme'
}),
changeSkin () {
localStorage.setItem('theme', this.theme ? 'dark' : 'light')
this.setTheme(this.theme ? 'dark' : 'light')
initTheme(this.theme)
},
// setThemeValue (theme) {
// theme = theme ? "light" : "dark";
// this.avatar = require(`@/assets/images/logo-${theme}.png`);
// }
}
}
</script>
<style lang="less" scoped>
.home {
.box {
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
.left {
background-color: var(--left-bg);
height: 500px;
flex: 1;
}
.right {
background-color: var(--right-bg);
height: 500px;
flex: 1;
}
}
.less_box {
height: 200px;
width: 1500px;
display: flex;
}
}
</style>
7.app.vueで使用する
8. vuex の永続化
import Vue from "vue";
import Vuex from "vuex";
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
theme: localStorage.getItem('theme') === 'light' ? 'light' : 'dark'
},
mutations: {
setTheme (state, data) {
state.theme = data
}
},
actions: {
},
modules: {
},
// plugins: [
// createPersistedState({
// storage: window.localStorage,
// reducer (val) {
// // console.log(val);
// return val
// }
// })]
});
ここまでで、すべての色の切り替えと画像の切り替えが完了しました。画像の切り替えのアイデアについて説明します。画像のパスは主に computed を使用して取得されるため、テーマを変更するときは、によって保存されたテーマの値が使用されます。 vuex が変更され、計算されたこの変更は、イメージ パスを置き換える効果を達成するために監視されます。