设置

刀刀

1/2/2025

0 字

0 分钟

暗黑模式

Element-Plus 中，官方提供更便捷的方法设置暗黑模式，步骤如下：

1. 引入暗黑模式样式文件

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

2. 通过为 HTML 标签添加 dark 类名即可

   // 切换暗黑模式
   const changeDarkFn = () => {
     let html = document.documentElement
     black.value ? html.className = 'dark' : html.className = ''
   }

主题色设置

一般情况下可通过修改主题色来设置，比如一开始项目设置一个主题色 $default-color ，后续修改该 CSS 变量即可。官方文档指令：主题色

Element-Plus 中，官方提供更便捷的方法修改主题色，步骤如下：

1. 使用颜色选择器组件选择颜色

   <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="changeColorFn" />
   
   <script setup>
   const color = ref('#409EFF')
   const predefineColors = ref([
     '#ff4500',
     '#ff8c00',
     '#ffd700',
     '#90ee90',
     '#00ced1',
     '#1e90ff',
     '#c71585',
     'rgba(255, 69, 0, 0.68)',
     'rgb(255, 120, 0)',
     'hsv(51, 100, 98)',
     'hsva(120, 40, 94, 0.5)',
     'hsl(181, 100%, 37%)',
     'hsla(209, 100%, 56%, 0.73)',
     '#c7158577',
   ])
   
   const changeColorFn = (e) => {
   }
   </script>

2. 获取全局 HTML 元素，设置 CSS 变量

   // 设置主题颜色
   const changeColorFn = (e) => {
     let html = document.documentElement
     html.style.setProperty('--el-color-primary', e)
   }