概念
首先明白什么是主题色,主题色是指一个网站或应用的主色调,是体现整体风格的一个重要标志。
比如京东,淘宝,b站,都有各自的主题色,今天就带大家手动实现一下我们自己系统的主题色!
效果
先看一下实现效果,当点击相应主题色的时候,页面相应控件的颜色都会改变。
对比图
可以看到我们网站的主题色也已经实现了,接下来就带大家手动实现一下~
实现
注:setThemeColor 是我们设置好的主题色
el-button按钮 icon图标
el-button
这里我们采用 element-plus 所提供的按钮自定义颜色,它将自动计算按钮处于 hover 和 active 状态时的颜色。这样的一个好处就在于无论是显示,hover,active都会随着变化。代码也比较简单,只需要修改 color 属性为我们自己设置的颜色属性即可。
<el-button :color&