1. 使用 create-vue 搭建项目

创建项目可以参考这篇文章：用 create-vue 从 0 到 1 搭建一个后台管理系统

2. 为网页“添油加醋”

我们会在网页上看见切换主题的功能，一定会很好奇这个是怎么做的吧？下面就慢慢解析这个功能是怎么实现的。

3. 切换主题构思

3.1 实现方式

切换主题总结起来有以下几种实现方式：结合网页的 localstorge、通过 vuex、通过 vue 组件间的父子通信。大家可以根据自己的业务去使用相应的方式。下面主要讲通过 vue props 来实现一个简易的 Demo。

3.2 vue props 实现简易 Demo

在项目中我们通常会有一个统一的布局界面 ，在这个界面中定义一个默认主题亮色主题 ，然后再写一个切换主题的方法。代码如下：

<script lang="ts">
import Header from './header.vue'

export default {
  components: { Header },
  data () {
    return {
      theme: 'white'
    }
  },
  methods: {
    changeTheme (theme: 'dark' | 'white') {
      this.theme = theme
    }
  }
}

</script>

<template>
  <Header :theme="theme" :changeTheme="changeTheme" />
  <div class='duya-container'>
    <RouterView />
  </div>
</template>

Header 组件的代码如下：

<script lang="ts">
export default {
  name: 'Header',
  props: {
    changeTheme: {
      type: Function,
      requred: true,
      default: () => {}
    },
    theme: {
      type: String,
      required: true
    }
  },
}
</script>

<template>
  <div class='duya-header'>
    <span class='dark theme-box' @click="() => changeTheme('dark')">暗黑主题</span>
    <span class='white theme-box' @click="() => changeTheme('white')">亮色主题</span>
  </div>
</template>

然后，实现网站切换主题的思路是什么呢，就是通过标签的属性和css样式相结合，根据不同的标签属性，来给网站设置不同的css样式。大家下面可以看改造后的代码。

布局界面代码：

<script lang="ts">
import Header from './header.vue'
import './index.less'

export default {
  components: { Header },
  data () {
    return {
      theme: 'white'
    }
  },
  methods: {
    changeTheme (theme: 'dark' | 'white') {
      this.theme = theme
    }
  }
}

</script>

<template>
  <Header :theme="theme" :changeTheme="changeTheme" />
  <div :data-theme="theme" class='duya-container'>
    <RouterView />
  </div>
</template>

Header 组件的代码如下：

<script lang="ts">
export default {
  name: 'Basic',
  props: {
    changeTheme: {
      type: Function,
      requred: true,
      default: () => {}
    },
    theme: {
      type: String,
      required: true
    }
  },
}
</script>

<template>
  <div class='duya-header' :data-theme="theme">
    <span class='dark theme-box' @click="() => changeTheme('dark')">暗黑主题</span>
    <span class='white theme-box' @click="() => changeTheme('white')">亮色主题</span>
  </div>
</template>

可以发现在某些标签的上面多出:data-theme=“theme” 这行代码，这行代码是用来干什么的呢？大家可以再看看css样式中的代码

.duya-header {
  display: flex;
  align-items: center;
  height: 56px;
  box-sizing: border-box;

  &[data-theme='white'] {
    background-color: #fff;
    border-bottom: 1px solid;
  }

  &[data-theme='dark'] {
    background-color: black;
    color: #fff;
  }  

  .theme-box {
    display: inline-block;
    margin-left: 16px;
    height: 26px;
    border-radius: 10px;
    cursor: pointer;
  }
}

.duya-container {
  min-height: calc(100% - 56px);
  padding: 16px;
  box-sizing: border-box;

  &[data-theme='white'] {
    background-color: #fff;
  }

  &[data-theme='dark'] {
    background-color: black;
    color: #fff;
  }  
}

可以发现，在css样式中将背景色拆成了两个white 和dark 跟业务代码遥相呼应。当我们界面属性用亮色主题 的时候会切换到亮色主题 的样式，切换到暗黑主题 亦然。

项目地址：切换主题示例项目

4. 总结

🎉 将的不是很到位，但是大体意思说了，希望对大家有益，如有不明白的可以在下方评论，谢谢大家。

【vue】网站主题色切换