在Vue.js项目中，用CSS和JS实现网页深浅颜色主题切换的一种方式

本文中的代码是在vuejs框架中写的，还略微涉及到了element-plus。

思路

设置css颜色变量，其他标签通过该变量来设置颜色，然后通过JS代码修改css颜色变量的值。

代码

1、CSS

该代码单独在一个文件中的。

:root {
  /*浅色主题颜色*/
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;
  /*深色主题颜色*/
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;
}

:root {
  /*默认使用浅色主题颜色*/
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);
}

:root.dark {
  /*使用深色主题颜色*/
  --color-background-soft: var(--vt-c-black-soft);
  --color-background-mute: var(--vt-c-black-mute);
}

2、Vue文件代码

<script setup lang="ts">
import { Moon, Sunny } from '@element-plus/icons-vue'

const changeToDark = () => {
  // 使根元素使用类选择器dark
  document.documentElement.classList.add('dark')
}
const changeToLight = () => {
  // 不让根元素使用类选择器dark
  document.documentElement.classList.remove('dark')
}
</script>

<template>
  <div style="display: flex">
    <div style="width: 150px; height: 100vh; background-color: var(--color-background-soft)">
      侧边栏
    </div>
    <div style="flex: 1; height: 100vh; background-color: var(--color-background-mute); padding: 10px">
      <h1>黑白模式设置</h1>
	  <el-divider />
	  <el-button circle :icon="Moon" type="info" @click="changeToDark" />
	  <el-button circle :icon="Sunny" @click="changeToLight" />
    </div>
  </div>
</template>

不足

本文主要说的是如何切换，没有做缓存，和初始化设置，所以页面一刷新就会恢复成原样。但在Vue.js项目中，可以通过localStorage存储设置的主题，并在App.vue中编写运行初始化主题的代码。