在Vite项目中修改Element-Plus的主题色,可以按照以下步骤进行: 1. 确定Element-Plus主题色修改方法 Element-Plus支持通过覆盖默认样式变量来修改主题色。你可以使用Element-Plus提供的主题生成工具,或者直接在项目中覆盖样式变量。 2. 在Vite项目中安装Element-Plus和必要的插件 首先,你需要在Vite项目中安装Element-Plus。
element-plus官网给的方案是在html上添加dark类名,在项目中创建个响应变量去修改css变量,可以添加很多种配色方案吧。 document.querySelector(':root').computedStyleMap().get("--el-text-color-primary") 补充element-plus网站的代码 (() => { const e = localStorage.getItem("el-theme-appearance"); (e ...
1、新建scss文件:src/styles/element/index.scss // @/styles/element/index.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ( "primary": ("base": #0052D9), "success": ("base": #67c23a), "warning": ("base": #e6a23c), "danger": ("base": #E34D59)...
新建src/store/color.ts,内容如下。主要是有一个primary主颜色的属性并且默认是element-plus的主颜色,持久化数据,预定义了7个颜色,primaryChange是颜色选择器实时改变更新网页属性的回调,primarySave是颜色选择器确定颜色时的回调。 import{ defineStore }from'pinia' constuseColorStore = defineStore('appcolor', {...
编辑src/style.css,添加如下样式,自定义一个主颜色,在亮色和暗黑模式下都使用这个主颜色。 :root{ --el-color-primary: green; } :root.dark{ --el-color-primary: green; } 亮色模式 亮色模式 暗黑模式 暗黑模式 我们再换个主颜色比如红色看下。
按照element官网的流程,把按需引入配置好,这里不进行多余的赘述 自定义element主题色 安装sass 代码语言:javascript 复制 npm install sass 新建scss文件:src/assets/style/element-theme.scss 代码语言:javascript 复制 @forward"element-plus/theme-chalk/src/common/var.scss"with($colors:("primary":("base":#2260...
vue3 + vite 项目搭建 - 全局修改ElementPlus主题 1、安装以下插件 "unplugin-auto-import": "^0.5.11","unplugin-vue-components": "^0.17.14","unplugin-element-plus": "^0.2.0" 2、在assets下的styles文件夹新建文件:element.scss,内容如下...
Element Plus: 其中Element Plus官方也说明了这种换肤方式: (主题| Element Plus) 构建包(dist)中的皮肤目录 为了统一后端寻址,dist中的皮肤文件默认统一放置在`dist/assets/skin`,也可以存放到其他位置。目录中即是开发`src/skin`中的每个皮肤的文件夹,内容也一致。 ├─dist | ├─index.html | └─assets ...
解决方案:修改npm脚本,package.json中 "scripts": { "dev": "vite --host", "build": "vite build", "preview": "vite preview" }, 三、安装element-plus npm install element-plus --save main.js import { createApp } from 'vue' // import './style.css' import App from './App.vue' imp...