饿了吗的element-ui使用的是淡蓝色的主题,有时候我们可以自定义主题,官方的文档给我们提供了如何修改主题,介绍的很详细,自己试验过后,觉得很不错,一方面怕忘记,一方面写一写。

方法一是在线生成一套主题:

https://github.com/taylorchen709/vue-admin,git库里给我们详细描述了一套方法,使用在线定制生成一套主题,

自定义生成主题

  1. 打开网址,自定义喜欢的主题,然后下载主题包 https://elementui.github.io/theme-preview/#/
  2. 主题包解压到该文件夹 src/assets/theme/
  3. 编写 src/main.js
   import 'element-ui/lib/theme-default/index.css'
to
import './assets/theme/your-theme/index.css'
  使用你生成的包覆盖默认的包
  1. 编辑src/styles/vars.scss(在里面编写你喜欢的颜色即可)

eleemnt-ui修改主题颜色的更多相关文章

  1. 三、create-react-app新旧版中使用less和antd并修改主题颜色

    引入less 如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行: npm run eject 如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才 ...

  2. Antd 修改主题颜色填坑记录

    首先,让我想说的是,现在有很多的更新,网上的一些也有的没用了, 接下来让我来分享一些我的解决方法,时间:2018.12/18. 1.和网上的一样,我用的是creat-react-app创建的项目,修改 ...

  3. Vscode 修改主题颜色

    首先向大家演示如何使用VSCode自带的颜色主题:依次点击左上角的文件-首选项-颜色主题,出现如下的主题选取界面.

  4. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  5. MahApps.Metro扁平化UI控件库(可修改主题色等)

    一.名词解释 使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...

  6. layer ui插件显示tips时,修改字体颜色

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: ...

  7. Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址

    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...

  8. webstorm的安装、激活码、更换主题颜色的修改、汉化

    一.安装 1.解压webstorm11zh.rar,双击.exe文件,下一步安装,在安装结束前会提示输入激活码,这个从网上随便找一个可用的即可. 二.更换主题颜色: 1.先从网上找一个喜欢的主题颜色, ...

  9. 【Windows 10 应用开发】跟随系统主题颜色

    有些时候,希望应用程序中的某些颜色可以与系统的主题颜色相同,并且当系统主题色改变时进行同步. 实现过程并不复杂,主要用到 UISettings 类,它公开一个 GetColorValue 方法,访问这 ...

随机推荐

  1. Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)

    系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...

  2. phpstorm webstorm 常用快捷键总结

    1.全项目搜索 ctrl + shift + F  这个是window下的快捷键

  3. HTTP简介,http是一个属于应用层的面向对象的协议

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...

  4. iOS WebView中视频横屏播放返回导航栏在状态栏下面

    iOS9以上系统横屏播放UIWebView中的视频返回后会出现以下问题:1.如图,UIWebView中包含一个视频:   1 2.播放web内容中的视频,并横屏观看:   2 3.直接在横屏状态下返回 ...

  5. 主机配置nginx后如何获取访问者IP

    he你早的时候写了一个根据访问者ip查询天气的小接口,那时候还没得买域名,没有搞nginx,测试自然没有问题,然后随着一个小工具一块上线了,今天突然发现我的小工具有好几个人在使用了,就想写一个记录访问 ...

  6. 怎样理解JAVA的“构造方法”和“主方法”

    在类中除了成员方法之外,还存在一种特殊类型的方法,那就是构造方法.主方法是类的入口点,它定义了程序从何处开始: 主方法提供对程序流向的控制,Java编译器通过主方法来执行程序.那么,下面一起来看一下关 ...

  7. [No0000196]一文读懂Java 11的ZGC为何如此高效

    导读:GC是大部分现代语言内置的特性,Java 11 新加入的ZGC号称可以达到10ms 以下的 GC 停顿,本文作者对这一新功能进行了深入解析.同时还对还对这一新功能带来的其他可能性做了展望.ZGC ...

  8. javascript匿名函数 闭包

    匿名函数 (function(){                console.info("111111111");            })(); var my = (fun ...

  9. mongo笔记2

    速度和持久性 用户可以选择写入语义,决定是否开启journaling日志记录,通过这种方式来控制速度和持久性的平衡,默认情况下写入都是fire-and-forget,写操作通过tcp套接字发送,不要求 ...

  10. linux 下的clock_gettime() 获取时间函数

    #include <time.h> int clock_gettime(clockid_t clk_id, struct timespec* tp); 可以根据需要,获取不同要求的精确时间 ...