Vue3 + Element Plus 项目实现自定义主题切换

Vue3 + Element Plus 项目实现自定义主题切换_vue.js_m0_65029152-开放原子开发者工作坊

引入 Element Plus

1、安装element-plus 依赖

在终端输入命令【 npm i element-plus --save】，安装element plus；

 npm i element-plus --save

2、main.js引入element-plus

这里我们先不考虑大小问题，采用完整引入，在项目的入口文件【main.js】中，代码如下：

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(ElementPlus)

app.mount('#app');

切换暗黑模式

 1、引入样式文件

在项目的入口文件【main.js】文件中，引入样式文件

import 'element-plus/theme-chalk/dark/css-vars.css'

【mian.js】完整代码

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

import 'element-plus/theme-chalk/dark/css-vars.css'

const app = createApp(App);

app.use(ElementPlus)

app.mount('#app');

动态切换

1、【HelloWorld.vue】组件代码 

添加一个el-switch开关组件，实现两种模式的自由切换； 

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <el-switch
        v-model="isDark"
        :active-icon="Moon"
        :inactive-icon="Sunny"
        inline-prompt
        @change="toggleDark"
      />
    </div>
  </div>
</template>

<script setup>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
const props = defineProps({
  msg: String,
});
const isDark = useDark();

const toggleDark = useToggle(isDark);
</script>

<style scoped>
</style>

自定义样式

有时候难免会遇到需要改变暗黑模式下的样式的问题；

例如：【要求背景颜色可以自定义】；

这里介绍两种简单的实现方式：css样式覆盖、css变量覆盖；

1、css样式覆盖

采用css样式覆盖的方式比较简单，只需要重写我们需要的样式即可；

（1）新建css样式文件

在项目的【src】文件夹下创建一个样式文件夹【styles】，在样式文件夹中新建【dark.css】样式文件；

（2）引入样式文件

在【main.js】中引入【dark.css】文件；

import '@/styles/dark.css'  // 引入自定义样式文件

这里一定要注意引入的顺序，必须在之前引入的暗黑模式样式文件之后，才能对其中的样式进行自定义覆盖；

（3）编写样式文件

在【dark.css】中编写自己的目标样式即可； 

/* 自定义暗黑模式样式 */
html.dark {
  background: #3f8173;
}