vue项目更换主题色

最新推荐文章于 2025-06-09 11:19:37 发布

weixin_45108907

最新推荐文章于 2025-06-09 11:19:37 发布

阅读量853

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45108907/article/details/112275063

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在Vue项目中如何根据不同项目的需求动态设置UI主题色。通过后端提供接口，前端获取主题色并将其设置在less文件中，实现在main.js中请求接口动态更新主题色的功能。

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

需求：不同的项目需要引入同一个模块，但是ui主题色需要修改

解决：

1，后端提供接口，前端动态设置主题色

2，前端主题色配置在less文件中

/** 用于less变量声明 */
@border_color: #e6e6e6;    // 边框颜色
@main_theme: var(--mainTheme, #50CFA0);    // 按钮颜色 字体颜色
@main_backdrop_theme: var(--mainBackdropTheme, rgba(23, 94, 250, 0.1));      // 半透明背景色

3，main.js文件请求主题色接口设置主题色

async function getThem() {
  const params = {
    codes: ['mainTheme', 'mainBackdropTheme']
  };
  //axios 请求接口
  const result = await CommonServe.getTheme('INDEX_ID', params);

  if (result.code === 0) { // 登陆成功
  //设置主题色
    document.getElementsByTagName('body')[0].style.setProperty('--mainTheme', result.data.mainTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值，就默认一个颜色
    document.getElementsByTagName('body')[0].style.setProperty('--mainBackdropTheme', result.data.mainBackdropTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值，就默认一个颜色
  }
}
getThem();