修改element-plus主题颜色

丢了小熊o

于 2022-11-24 13:40:50 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_54218079/article/details/124613463

Vue3 专栏收录该内容

23 篇文章

订阅专栏

在本文中，作者介绍了如何在Vue应用的App.vue组件中使用<script setup>语法来导入onMounted钩子，并在页面加载完成后修改全局CSS变量，实现自定义主题颜色。通过设置--el-color-primary及其变体，可以改变Element UI库的默认颜色，允许用户自由选择和更换颜色方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在App.vue中加入：

<script setup>
import { onMounted } from 'vue'
 
onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#56AB2F');
  document.body.style.setProperty('--el-color-primary-light-9', '#F5FBF0');
  document.body.style.setProperty('--el-color-primary-light-3', '#95d475');
})
</script>

颜色可以自己自由更换。
————————————————
版权声明：本文为CSDN博主「我先润了」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_54218079/article/details/124613463