vue3+elementPlus 如何定制化主题

前言

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

自定义主题原理

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

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

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

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

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

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

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

技术栈

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

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

实现历程

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

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

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

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

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

@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进行切换

<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:非暗黑模式下的值

效果图

vue3+elementPlus 如何定制化主题

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

vueuse的useCssVar 去改变css的变量

<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:修改变量名

效果图

vue3+elementPlus 如何定制化主题

原文链接:https://juejin.cn/post/7343131959826890762 作者:Yoge

(0)
上一篇 2024年3月6日 下午4:00
下一篇 2024年3月6日 下午4:10

相关推荐

发表回复

登录后才能评论