elementPlus修改主题颜色(含暗夜模式切换) 直接调用 setThemeColor(color) 函数,color为传入的主题颜色 exportfunctionsetThemeColor(color) {constel =document.documentElement;constbody =document.querySelector("body");// const nprogress = document.querySelector("#nprogress .bar");// console.log(nprogress...
直接编辑element-variables.scss文件,例如修改主题色为红色。 $--color-primary: red; 1. 4. 编译主题 保存文件后,到命令行里执行et编译主题,如果你想启用watch模式,实时编译主题,增加-w参数;如果你在初始化时指定了自定义变量文件,则需要增加-c参数,并带上你的变量文件名 et > ✔ build theme font > ✔...
element-plus官网给的方案是在html上添加dark类名,在项目中创建个响应变量去修改css变量,可以添加很多种配色方案吧。 document.querySelector(':root').computedStyleMap().get("--el-text-color-primary") 补充element-plus网站的代码 (() => { const e = localStorage.getItem("el-theme-appearance"); (e...
:root{--el-color-primary:#d5140f} 在main.js 或者 main.ts 中引入文件 import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'importinitPluginsfrom'@/plugins';import'element-plus/dist/index.css'import'@/assets/style...
网上有的修改主题的思路都是自定义样式文件,全局引入,动态修改根dom的Class命名空间,然而这种方式非常麻烦,并且不能动态更改,目前根据官方网站推荐的做法,最佳实践就是直接覆盖全局变量。 /* element官网指南 */// document.documentElement is globalconstel=document.documentElement// const el = document.getElementByI...
//引入elementUIimport ElementPlus from 'element-plus'import zhCn from'element-plus/dist/locale/zh-cn.mjs'//引入暗黑模式import 'element-plus/theme-chalk/dark/css-vars.css' 在TopNav组件中实现,我这里搞复杂了,在两个vue文件里面修改,在一个里面就行(太懒了,不想改了) ...
有时候一个项目的主题并不能满足所有人的审美, 所以这个时候就需要换肤功能登场了。 下面是一个换肤demo, 思路很简单,定义一个全局css变量,然后在页面根元素获取变量并动态修改这个变量值即可完成。 效果 具体实现 1.准备项目 准备一个含有less、vuex的项目 ...
Web前端界面切换主题/皮肤,是一个常见的需求。如果希望在打包部署后实现皮肤的修改甚至增加皮肤,不需要修改源码或者重新打包,类似于我们常见的皮肤包扩展,又该如何实现呢?我使用类似上一期多语言包功能中介绍的方法来实现。 这个方法对Vue2和Vue3都适用,甚至可以适用于非Vue的前端框架。但是如果项目使用了组件库,皮肤...
Element-Plus支持通过修改主题配置文件来自定义主题。你可以使用vue-cli-plugin-element-plus插件来生成主题配置文件,并编辑这些文件来自定义主题。 6. 修改Element-Plus滚动条样式 如果你需要修改Element-Plus表格的滚动条样式,需要针对el-scrollbar组件进行样式定制。例如: css /* 滚动条整体部分 */ ::v-deep .el...
修改主题颜色 Element-Plus 提供了修改主题颜色的功能,可以通过配置theme和dark属性来实现: import{createApp}from'vue';importAppfrom'./App.vue';import'element-plus/dist/index.css';import{createApp,h}from'vue';import{ElButton}from'element-plus';import{createSSRApp}from'vue';constapp=createApp(App)...