vue-主題切換.gif
themeName/index.vue頁面:
<template>
<div class="theme-view">
<div @click="themeClick" class="theme-btn">切換顏色</div>
<br>
{{themeName == 'white' ? '白色' : '深色'}}主題頁面
</div>
</template>
<script>
export default {
data(){
return {
// themeName: 'white', // 白色主題
}
},
computed: {
// 獲取store中的主題色
themeName() {
return this.$store.state.user.themeName
}
},
mounted() {
// 給body添加類名
document.body.classList.add(this.themeName);
},
methods: {
themeClick(){
if(this.themeName == 'white'){
// 存儲主題色到全局
this.$store.commit('saveTheme', 'black')
// 移除已有主題顏色
document.body.classList.remove('white')
}else{
this.$store.commit('saveTheme', 'white')
document.body.classList.remove('black')
}
// 新增主題類名
document.body.classList.add(this.themeName)
},
},
}
</script>
<style>
.theme-view{
width: 100%;
height: 80vh;
/* 如果css樣式權(quán)重值不夠幕侠，需要加 !important */
background: var(--theme-bg);
color: var(--theme-color);
}
.theme-btn{
margin: 0 auto;
height: 30px;
width: 100px;
background: var(--theme-btn);
line-height: 30px;
cursor: pointer;
user-select: none;
}
</style>
styles/white.css文件:
.white {
/* 定義css白色主題顏色 */
--theme-bg: #f2f2f2;
--theme-color: #333;
--theme-btn: #0ff;
}
styles/black.css文件:
.black {
/* 定義css黑色主題顏色 */
--theme-bg: #3b6188;
--theme-color: #fff;
--theme-btn: #0f0;
}
store/modules/user.js文件:
const state = {
themeName: 'white', // 白色主題菠剩，全局共用同一個主題類型
}
const mutations = {
saveTheme(state, params){
state.themeName = params;
},
}
export default {
state,
mutations,
}
main.js文件:
// 引入主題顏色
import './styles/white.css'
import './styles/black.css';
