elementplus 换肤

Element Plus提供了一键换肤的功能，可以通过自定义主题色来改变项目的外观。在Vue3中使用Element Plus进行换肤的过程可以通过修改代码文件来实现。

首先，在layout/index.vue文件中，可以看到通过监听主题的变化来加载对应的主题样式。通过设置document.documentElement的style属性和body元素的class属性来改变页面的主题样式。

其次，在layout/header.vue文件中，可以看到通过el-dropdown和el-dropdown-menu实现了一个下拉菜单，用于选择不同的主题。每个主题都对应着一个颜色和一个标签，在点击菜单项时可以触发handleCommandTheme方法来切换主题。

通过修改这些代码文件中的相关部分，你可以自定义Element Plus的主题色，并实现一键换肤的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3+element-plus自定义主题色，一键换肤](https://blog.csdn.net/wuufeii/article/details/120038295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3 + element-plus 实现一键换肤](https://blog.csdn.net/maoeye283301717/article/details/128149978)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]