vue3+elementPlus 如何定制化主题

前言

最近在学习vue3及其周围的生态,然后想做一个自定义主题的后台管理系统。

自定义主题原理

俗话说工欲善其事必先利其器,做这个之前我们得先了解其背后的原理。

CSS 自定义主题的原理是基于 CSS 变量的动态性和可重用性。通过修改这些变量的值,可以轻松地在整个网站或应用中实现主题切换或样式调整,而无需直接修改多处 CSS 代码。

自定义主题的实现步骤大致如下:

  1. 定义 CSS 变量: 在 CSS 中,可以在 :root 选择器或其他作用域内定义变量。例如,可以定义一组代表颜色、字体大小、边距等的变量。

    css 复制代码
    :root {
        --color-primary: #007bff;
        --color-secondary: #6c757d;
        --font-size-base: 16px;
        --spacing-base: 1rem;
    }
  2. 使用 CSS 变量: 在样式表的其他部分,使用 var(--variable-name) 函数引用这些变量。这样,所有使用这些变量的样式都会自动应用变量的值。

    css 复制代码
    body {
        font-size: var(--font-size-base);
        background-color: var(--color-primary);
    }
  3. 动态修改变量值: 通过 JavaScript,可以在运行时动态修改 CSS 变量的值。这常通过修改 :root 或其他元素的样式属性来实现。

    javascript 复制代码
    document.documentElement.style.setProperty('--color-primary', '#ff4500');
  4. 实现自定义主题: 通过为不同主题预定义一组变量值,并在选择主题时动态应用这些值。

技术栈

介绍完原理介绍一下我实现用到的技术栈

  • vue3
  • vue-router
  • pinia
  • element-plus
  • unocss
  • sass
  • vueuse
    • 它提供了一套可重用的 Composition API 函数。这些函数覆盖了各种常见的 Web 应用需求,比如状态管理、DOM 操作、事件监听、生命周期管理等(总之大佬牛)。

实现历程

目前element-puls已经提供了暗黑模式只需要引入暗黑模式的样式并且改变html的class即可切换。

html 复制代码
<html class="dark">
  <head></head>
  <body></body>
</html>
js 复制代码
import 'element-plus/theme-chalk/dark/css-vars.css'

如何去覆盖暗黑模式的css变量呢? 创建css-vars.css文件

css 复制代码
html.dark {
  /* 自定义深色背景颜色 */
  --el-bg-color: #626aef;
}

按照官网的思路实现了自定义暗黑主题

scss 复制代码
@use 'sass:map';
@use 'sass:math';

html.dark {
  $colors:(
  'white': #ffffff,
  'black': #000000,
  'primary': (
    'base': pink,
  ),
  'success': (
    'base': #67c23a,
  ),
  'warning': (
    'base': #e6a23c,
  ),
  'danger': (
    'base': #f56c6c,
  ),
  'error': (
    'base': #f56c6c,
  ),
  'info': (
    'base': #909399,
  ),
);
  @mixin set-color-type($type,$color,$value){
      --el-#{$type}-#{$color}:#{$value};
  }
  $types: primary, success, warning, danger, error, info;
  @each $type in $types{
    @include set-color-type('color',$type,map.get($colors,$type,'base'))
  }
};
  • 这里是在html.dark类名下生成了几个主体色的颜色--el-color-primary、--el-color-success等。

当然这里只是对element的color进行了重写,还有bg text等需要的可以自己重写。

并且使用vueuse中的useDark去对html的class进行切换

xml 复制代码
<template>
  <el-button @click="toggleDark()">切换</el-button>
</template>

<script setup lang="ts">
const isDark = useDark({
  selector: "html",
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light',
})
const toggleDark = useToggle(isDark)
</script>

<style></style>
  • selector:选择器
  • attribute:修改的属性
  • valueDark:暗黑模式下的值
  • valueLight:非暗黑模式下的值

效果图

到此为止已经实现了暗黑和光亮的两个主体,离我们自定义主题还有点距离。

vueuse的useCssVar 去改变css的变量

js 复制代码
<template>
  <i class="i-carbon:aperture text-[30px] mt-3" @click="showDrawer" />
  <el-drawer v-model="drawer" title="I am the title" :direction="direction" :before-close="handleClose">
    <div class="demo-color-block">
      <span class="demonstration">primary</span>
      <el-color-picker v-model="color" @active-change="changeColor" />
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
const drawer = ref(false)
const color = ref()
const setPrimaryColor = useCssVar("--el-color-primary", document.documentElement)
const showDrawer = () => {
  drawer.value = true
}
const changeColor = (c) => {
  setPrimaryColor.value = c
}
</script>

<style></style>
  • useCssVar:设置改变的变量名和作用在什么位置上
  • changeColor:修改变量名

效果图

相关推荐
mubeibeinv3 分钟前
分页/列表分页
java·前端·javascript
林太白8 分钟前
js属性-IntersectionObserver
前端·javascript
爱吃羊的老虎16 分钟前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
妙哉73632 分钟前
零基础学安全--HTML
前端·安全·html
咔叽布吉40 分钟前
【前端学习笔记】AJAX、axios、fetch、跨域
前端·笔记·学习
GISer_Jing1 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
Dragon Wu1 小时前
TailwindCss 总结
前端·css·前端框架
bpmf_fff1 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
计算机学姐1 小时前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
泰山小张只吃荷园1 小时前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器