18. Vue-element-template白天黑夜模式动态切换_elementui 切换暗黑模式 动画是如何实现的

两套主题动态切换

1. 去官网生成两套主题拷贝到 resources/src/assets/theme

https://element.eleme.cn/#/zh-CN/theme

2. 也可以本地修改 element-variables.scss 然后运行et生成

1. 安装 （注意Node版本）

➜  Genes-Admin git:(ogenes) sudo n 10.16.0
➜  Genes-Admin git:(ogenes) npm -v
6.9.0
➜  Genes-Admin git:(ogenes) node -v
v10.16.0
➜  Genes-Admin git:(ogenes) sudo npm i element-theme -g --unsafe-perm=true --allow-root
1
2
3
4
5
6

2. 初始化变量文件

➜  Genes-Admin git:(ogenes) ✗ et -i element-variables-light.scss
➜  Genes-Admin git:(ogenes) ✗ et -i element-variables-dark.scss
1
2

3. 分别修改变量文件来修改样式，然后运行 et 命令先后生成两套主题拷贝到 resources/src/assets/theme

#light
➜  Genes-Admin git:(ogenes) ✗ mkdir -p resources/src/assets/theme/dark resources/src/assets/theme/light
➜  Genes-Admin git:(ogenes) ✗ et -c element-variables-light.scss

✔ build element theme
✔ build theme font
➜  Genes-Admin git:(ogenes) ✗ mv theme/fonts resources/src/assets/theme/light 
➜  Genes-Admin git:(ogenes) ✗ mv theme/index.css resources/src/assets/theme/light
➜  Genes-Admin git:(ogenes) ✗ rm -rf theme

#dark
➜  Genes-Admin git:(ogenes) ✗ et -c element-variables-dark.scss 

✔ build element theme
✔ build theme font

➜  Genes-Admin git:(ogenes) ✗ mv theme/fonts resources/src/assets/theme/dark 
➜  Genes-Admin git:(ogenes) ✗ mv theme/index.css resources/src/assets/theme/dark 
➜  Genes-Admin git:(ogenes) ✗ rm -rf theme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 以上两步目的都是得到两套主题，最终目录结构为

4. 引入深色主题测试

#vim resources/src/main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
#加入自定义主题样式
import '@/assets/theme/dark/index.css'

import '@/styles/index.scss' // global css
1
2
3
4
5
6
7

5. 动态切换

1. 添加默认setting.theme

  #vim resources/src/settings.js ,加上以下配置
  /**
   * @type {string} light | dark
   * @description theme
   */
  theme: 'dark'
1
2
3
4
5
6

2. 修改setting module，支持获取和修改theme，并保存到 localStorage

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo, theme } = defaultSettings

function getItem(key, def) {
  return localStorage.getItem(key) === null ? def : localStorage.getItem(key);
}

function setItem(key, value) {
  localStorage.setItem(key, value);
}

const state = {
  showSettings: getItem('showSettings', showSettings),
  fixedHeader: getItem('fixedHeader', fixedHeader),
  sidebarLogo: getItem('sidebarLogo', sidebarLogo),
  theme: getItem('theme', theme),
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
      setItem(key, value);
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

3. 修改引入css的逻辑，基于setting.theme 引入css文件

#新建文件 resources/src/styles/index.js
import store from '@/store'

if (store.state.settings.theme === 'dark') {
  import('@/assets/theme/dark/index.css');
} else {
  import('@/assets/theme/light/index.css');
}

import '@/styles/index.scss' // global css

1
2
3
4
5
6
7
8
9
10
11

#修改main.js
// import '@/styles/index.scss' // global css
import '@/styles' // global css
1
2
3

4. 测试

   #临时测试，可以模拟语言切换的下拉框  
   #vim resources/src/components/Theme/index.vue
   <template>
     <el-dropdown @command="handleCommand">
     <span class="el-dropdown-link">
       {{ theme }}
     </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item
           v-for="(val, key) in themes"
           :disabled="val===theme"
           :key="key"
           :command="key">
           {{ val }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </template>
   
   <script>
     export default {
       name: "Theme",
       data() {
         return {
           themes: {
             light: '白天模式',
             dark: '黑夜模式',
           },
         }
       },
       computed: {
         theme() {
           return this.themes[this.$store.state.settings.theme];
         }
       },
       methods: {
         handleCommand(val) {
           this.$store.dispatch('settings/changeSetting', {
             key: 'theme',
             value: val
           })
           this.$message.success('switch theme success')
           location.reload()
         }
       }
     }
   </script>
   
   <style scoped>
   
   </style>
   
   
   #然后放到 resources/src/layout/components/Navbar.vue
         <theme id="header-theme" class="right-menu-item"/>
   import Theme from "@/components/Theme";
   
   export default {
     components: {
       Breadcrumb,
       Hamburger,
       Languages,
       Theme
     },
   ……
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66