​

 概念

首先明白什么是主题色，主题色是指一个网站或应用的主色调，是体现整体风格的一个重要标志。

比如京东，淘宝，b站，都有各自的主题色，今天就带大家手动实现一下我们自己系统的主题色！

效果

先看一下实现效果，当点击相应主题色的时候，页面相应控件的颜色都会改变。

对比图

 可以看到我们网站的主题色也已经实现了，接下来就带大家手动实现一下~

实现

注：setThemeColor 是我们设置好的主题色

el-button按钮+icon图标

el-button

这里我们采用 element-plus 所提供的按钮自定义颜色，它将自动计算按钮处于 hover 和 active 状态时的颜色。这样的一个好处就在于无论是显示，hover，active都会随着变化。代码也比较简单，只需要修改 color 属性为我们自己设置的颜色属性即可。

 <el-button :color="setThemeColor ">Default</el-button>

iconfont

这里对 icon 图标也进行主题色变化，方法很简单只需要将其 color 属性设置为主题色即可。

                <i
                class="iconfont icon-tishi"
                :style="{
                  color: setThemeColor,
                  marginRight: '3px',
                }"
              ></i>

 el-tag 标签 + Pagination 分页 + el-menu菜单

 

这个设置和上面有所不同，在页面中初始化主题色即可 

设置--el-color-primary，--el-color-primary-light-5两个属性

<script lang="ts" setup>
setElementStyle() //初始化主题色
function setElementStyle() {
  const el = document.documentElement
  el.style.setProperty('--el-color-primary', setThemeColor.value)
  el.style.setProperty('--el-color-primary-light-5', setThemeColor.value)
}
</script>

Pinia状态管理

使用 pinia 进行状态管理设置主题色，在页面加载时先判断本地是否已经设置主题色，如果没有就取默认值，如果有进行设置即可。

每次点击设置主题色进行颜色修改即可，pinia 结合storeToRefs也是响应式的，页面可以实时相应你所设置的主题色。

这一块就不进行代码实现了，如果有需要的小伙伴可以进行留言，我后续再补上呢~

总结

我对主题色分为三种情况处理：

1. el-button 的特殊处理，采用 el-button 自带的 color 属性。
2. 非控件修改，根据 color 或者 background-color 进行手动修改即可。
3. 直接修改--el-color-primary以及--el-color-primary-light-5，这对大部分控件都起作用。

有不足或者没写到的地方欢迎大家进行补充，欢迎大家留言讨论。

如果觉得对你有帮助，就点个赞吧~

​