vue3+element Plus+ts 自定义主题色,以及生成主题色各种透明度

news2025/1/15 20:52:58

目录

思路 

安装css-color-function【接收一个颜色值,生成不同的透明度】

获取后台配置的主题色或者使用ColorPicker修改主题色

 最终结果如下


思路 

本篇文章的主体思路是从element Plus官网引申而来。结合了我以前用vue2+element-ui配置主题色生成透明度(light-1至linght-9)的方法。

安装css-color-function【接收一个颜色值,生成不同的透明度】

pnpm i css-color-function

utils/color.ts


import color from 'css-color-function'
const formula = {
    "dark-2": "color(primary shade(10%))",
    "light-1": "color(primary tint(10%))",
    "light-2": "color(primary tint(20%))",
    "light-3": "color(primary tint(30%))",
    "light-4": "color(primary tint(40%))",
    "light-5": "color(primary tint(50%))",
    "light-6": "color(primary tint(60%))",
    "light-7": "color(primary tint(70%))",
    "light-8": "color(primary tint(80%))",
    "light-9": "color(primary tint(90%))"
}
const generateColors = primary => {
    const colors = {}
    Object.keys(formula).forEach(key => {
      const value = formula[key].replace(/primary/g, primary)
      colors[key] = color.convert(value)
    })
    return colors
  }
  
  export default generateColors
  

tsconfig.json需要加入以下两个配置(因为css-color-function不是ts写的)

    "allowJs": true,
    "checkJs": false

获取后台配置的主题色或者使用ColorPicker修改主题色

 XXXX.vue

<script lang='ts' setup>
//更换主题色
import generateColors from '@/utils/color'
let themeColor = ref('#FF8040')//假装这个是从后台获取的主题色
function toggleTheme(){
  let colorMap:any = generateColors(themeColor.value)
  const el = document.documentElement
  el.style.setProperty('--el-color-primary',themeColor.value)

  //生成不同1-9的透明度
  Object.keys(colorMap).forEach(key => {
     el.style.setProperty(`--el-color-primary-${key}`, colorMap[key])
  })
    
}
</script>
<template>
    <el-color-picker v-model="themeColor" @change="toggleTheme" />
</template>

 最终结果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1459028.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

fastApi笔记01-路径参数

路径参数 使用与 Python 格式化字符串相同的语法来声明路径"参数"或"变量" from fastapi import FastAPIapp FastAPI()app.get("/items/{item_id}") def read_item(item_id):return {"item_id": item_id} http://127.0.0.1:8000/i…

年薪最高开到160万,鸿蒙开发人才紧缺!

华为鸿蒙开发人才紧缺 如今&#xff0c;鸿蒙与安卓彻底切割时间似乎越来越近&#xff0c;一批嗅觉灵敏的互联网厂商已经完成或开始启动开发鸿蒙原生App&#xff0c;包括美团、网易、今日头条、钉钉等。随着头部App厂商启动鸿蒙&#xff08;HarmonyOS&#xff09;原生应用开发&…

智慧公厕管理系统:让城市智慧驿站更加智慧舒适

智慧公厕管理系统是城市智慧驿站中不可或缺的一部分&#xff0c;它通过全方位的信息化解决方案&#xff0c;为公共厕所的使用、运营和管理提供了一种智能化的方式。作为城市智慧驿站的重要组成部分&#xff0c;智慧公厕管理系统发挥着重要的作用&#xff0c;为城市社会民生提供…

提升生产3D渲染效率与品质:挖掘渲染农场的潜力

在当今数字化时代&#xff0c;3D渲染已成为跨越多个领域不可缺少的技术&#xff0c;无论是在建筑视觉化、电影制作、互动媒体还是虚拟现实领域。随着对动态、逼真视觉效果的需求不断增长&#xff0c;3D渲染农场因其出色的运算能力和经济性成为行业中的关键解决方案。本篇文章旨…

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出

使用LangChain结合通义千问API基于自建知识库的多轮对话和流式输出 本文章的第三弹&#xff0c;由于LangChain本文不支持直接使用通义千问API进行多轮对话和流式输出&#xff0c;但是自建知识库呢&#xff0c;还需要LangChain,因此我尝试了一下&#xff0c;自建知识库用LangCh…

Spring源码:手写SpringIOC

文章目录 一、分析二、实现1、版本1&#xff1a;实现Bean注入IOC容器&#xff0c;并从容器中获取1&#xff09;定义BeanDefinition2&#xff09;定义BeanDefinition实现类3&#xff09;定义BeanDefinitionRegistry4&#xff09;定义Beanfactory5&#xff09;定义默认Beanfactor…

学会Requests库,就学会了Python接口自动化

在 Python 中进行网络请求是日常开发中的一个常见任务&#xff0c;而 requests 库是处理这类任务的一种强大工 具。requests 提供了简单而灵活的接口&#xff0c;使得发送 HTTP 请求和处理响应变得非常容易。在这篇文章中&#xff0c;我们将深入研究如何使用 requests 库执行各…

grid新建主从一对多

目录 总结一、步骤前端1.第一步-编写tabs的modelBody2.第二步编辑表扩展js 后端--重写表的add和Update方法1.第一步 总结 编写tabs的modelBody后编辑表扩展js在重写后端partial的Service 一、步骤 前端 1.第一步-编写tabs的modelBody 复制下面代码该改的改 <template&…

Golang for 循环

从基础知识到高级技术、并发和通道 Go&#xff08;Golang&#xff09;编程语言中的“for”循环是一个基本而多功能的结构&#xff0c;用于迭代集合、重复执行代码块以及管理循环控制流。Golang的“for”循环语法简洁却强大&#xff0c;为处理多样的循环场景提供了一系列能力。无…

【2024软件测试面试必会技能】adb命令操作

前言&#xff1a; adb的全称为(Android Debug Bridge&#xff09;就是调试桥的作用。Adb 命令存放在 SDK 的Tools文件夹下&#xff0c;又称为手机和电脑连接的桥梁命令。 借助这个工具&#xff0c;我们可以管理设备或手机模拟器的状态。还可以进行以下的操作&#xff1a; 快…

计算机功能简介:EC, NVMe, SCSI/ISCSI与块存储接口 RBD,NUMA

一 EC是指Embedded Controller 主要应用于移动计算机系统和嵌入式计算机系统中&#xff0c;为此类计算机提供系统管理功能。EC的主要功能是控制计算机主板上电时序、管理电池充电和放电&#xff0c;提供键盘矩阵接口、智能风扇接口、串口、GPIO、PS/2等常规IO功能&#xff0c;…

C#分部类的应用:记录学生信息

目录 一、分部类及其用途 二、实例 再发一个分部类的应用&#xff0c;巩固一下。 一、分部类及其用途 C#中的部分类也被称为分部类。 C#中的部分类是一种将类的定义分成多个部分&#xff0c;每个部分都位于自己的文件中&#xff0c;然后在编译时合并在一起的机制。 部分类…

SNAT与DNAT公私网地址转换

前言 SNAT和DNAT是两种重要的网络地址转换技术&#xff0c;它们允许内部网络中的多个主机共享单个公共IP地址&#xff0c;或者将公共IP地址映射到内部网络中的特定主机。这些技术在构建企业级网络和互联网应用程序时非常重要&#xff0c;因为它们可以帮助保护内部网络安全&…

75.SpringMVC的拦截器和过滤器有什么区别?执行顺序?

75.SpringMVC的拦截器和过滤器有什么区别&#xff1f;执行顺序&#xff1f; 区别 拦截器不依赖与servlet容器&#xff0c;过滤器依赖与servlet容器。拦截器只能对action请求(DispatcherServlet 映射的请求)起作用&#xff0c;而过滤器则可以对几乎所有的请求起作用。拦截器可…

阿里云服务器操作系统有哪些?如何选择?

阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文版&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器操…

深入理解java虚拟机---自动内存管理

2.2 运行时数据区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域有各自的用途&#xff0c;以及创建和销毁的时间&#xff0c;有的区域随着虚拟机进程的启动而一直存在&#xff0c;有些区域则是依赖用户线程的启动和结束而建立和销…

[word] word定时自动保存功能的作用是什么 #知识分享#学习方法#媒体

word定时自动保存功能的作用是什么 word定时自动保存功能的作用是什么 这是word提供的一个保护用户文档的功能&#xff0c;一般情况下是为了预防在未知原因的情况下&#xff0c;用户电脑关闭&#xff0c;或者不小关掉Word&#xff0c;导致正在使用的文档丢失&#xff0c;给用户…

华清远见作业第三十九天——Qt(第一天)

思维导图&#xff1a; 登录界面&#xff1a; 代码&#xff1a; #include "mainwindow.h" #include<QToolBar> #include<QPushButton> MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {this->resize(600,400);this->setFixedSize…

Vue+SpringBoot打造生活废品回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨在鼓…

C++拷贝构造函数与赋值运算符重载

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、拷贝构造函数 1.概念 在现实生活中&#xff0c;可能存在一个与你一样的自己&#xff0c;我们称其为双胞胎。 那在创…