vue项目，js动态修改主题色

例如将：

修改为：

在你的公共样式的css文件中配置root：

:root {
  --primary-color: #3D5CE4; //主色 深蓝色
  --primary-color-text:#ffffff; //文字主题色
  --primary-color-choose-bg:#647FF4; //导航栏选中的背景色
}

js部分，修改颜色：

// 修改颜色，这里用一个定时器看更改的颜色效果
changeColor()
function changeColor() {
  setTimeout(() => {
    document.documentElement.style.setProperty('--primary-color', '#ffb4b4');
    document.documentElement.style.setProperty('--primary-color-text', '#ff5c5c');
    document.documentElement.style.setProperty('c', '#fff146');
  }, 3000)
}

如果要配置的颜色多，可以稍微处理的简洁点：

function changeColor() {
  setTimeout(() => {
    const style = document.documentElement.style;
    const colors = {
      '--primary-color': '#ffb4b4',
      '--primary-color-text': '#ff5c5c',
      '--primary-color-choose-bg': '#fff146'
    };
    // 使用循环批量设置 CSS 变量
    Object.entries(colors).forEach(([key, value]) => {
      style.setProperty(key, value);
    });
  }, 3000)
}

dom上使用样式：

<div class="activeItem"></div>

//样式设置
.activeItem {
  background: var(--primary-color-choose-bg);
  color: var(--primary-color-text);
}

这样就可以实现自定义主题色了。