elementui更改主题颜色

古城微笑少年丶 2023-06-25 03:23 39阅读 0赞

1.用vue-cli安装一个新项目  
2.安装elementUI及sass-loader, node-sass

// 安装elementUI
    	npm i element-ui -S
    // 安装sass
    	npm i sass-loader node-sass -D

3.安装elementUI的自定义主题工具

// 首先安装主题工具
    	npm i element-theme -g
    // 然后安装chalk主题
    	npm i element-theme-chalk -D

4.初始化变量文件，修改主题颜色  
`et -i`  
`这时根目录下会出现element-variables.scss 修改主题颜色#--color--primary: 你想要的更改的颜色`  
![在这里插入图片描述][20191225151100250.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1OTAyNA_size_16_color_FFFFFF_t_70]  
5.修改之后编译主题  
`et`

编译完成之后会在根目录生成theme文件夹

6.最后一步：把编译好的主题颜色引入项目，在main.js引入  
![在这里插入图片描述][20191225151703182.png]

[20191225151100250.png]: https://img-blog.csdnimg.cn/20191225151100250.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1OTAyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225151002505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1OTAyNA==,size_16,color_FFFFFF,t_70
[20191225151703182.png]: https://img-blog.csdnimg.cn/20191225151703182.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关更改app的主题

![Center][] ![Center 1][] 如图，背景色为桌面背景，在manifest.xml文件中更改： <application

以你之姓@/ 2024年02月18日 18:56/ 0 赞/ 59 阅读

相关 layui主题颜色

layui主题颜色 //配置主题颜色 //写入localStorage function setStorage(key,value) {

分手后的思念是犯贱/ 2023年10月05日 23:16/ 0 赞/ 25 阅读

相关 elementui更改主题颜色

1.用vue-cli安装一个新项目 2.安装elementUI及sass-loader, node-sass // 安装elementUI npm i

古城微笑少年丶/ 2023年06月25日 03:23/ 0 赞/ 40 阅读

相关 elementUI自定义主题颜色

1、官方在线主题编辑器，下载自定义主题：[在线主题编辑器][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

柔光的暖阳◎/ 2023年01月22日 05:00/ 0 赞/ 256 阅读

相关 java颜色主题_android 设置应用主题颜色

【实例简介】【实例截图】 ![68e7a4839d3e7d8b37ca104c17ef6ffe.png][] ![136b93b3f6ede5813c9e86ffdfc

朱雀/ 2022年10月22日 14:58/ 0 赞/ 309 阅读

相关 ElementUI - 定制（自定义）全部组件主题及颜色配置（更改整套组件样式及主题）

前言如果你的项目基于 `ElementUI`，但设计师给你的界面，与 `ElementUI` 默认的组件主题色与颜色不符合。例如，框架默认的主题色是蓝色，而我的项目

╰半夏微凉°/ 2022年10月13日 05:19/ 0 赞/ 1348 阅读

相关更改背景颜色

<html> <head> <title>更改背景颜色</title> <script> functio

向右看齐/ 2022年09月19日 12:06/ 0 赞/ 229 阅读

相关 Hexo更改主题

1. 起因 \最近在折腾自己的的博客，因为服务器到期了，只好用GitHub page +Hexo来搭建了 \如果想安装hexo的话，可以看一下下面的文章 [

「爱情、让人受尽委屈。」/ 2022年05月09日 06:26/ 0 赞/ 366 阅读

相关更改IntelliJ IDEA主题

第一步：进入Color Themes官网：[http://color-themes.com/?view=index][http_color-themes.com_view_in

布满荆棘的人生/ 2021年09月28日 20:00/ 0 赞/ 496 阅读

相关使用Folderico更改文件夹颜色和主题

If you are tired of the bland vanilla folders in Windows or want to color code them for

太过爱你忘了你带给我的痛/ 2021年07月26日 17:26/ 0 赞/ 488 阅读