elementPlus修改主题颜色（含暗夜模式切换）

原创

已于 2022-09-09 16:38:02 修改 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-09-09 16:37:04 首次发布

这篇博客探讨了如何使用JavaScript实现前端应用中的动态主题颜色设置。通过setThemeColor函数，可以传递一个颜色值来改变页面的主要颜色。同时，利用colourBlend函数进行色彩混合，动态生成不同深浅的主题色，以适配不同的光照条件或用户偏好。这种方法允许应用程序自定义和调整颜色方案，提供更好的用户体验。

在这里插入图片描述

直接调用 setThemeColor(color) 函数，color 为传入的主题颜色

export function setThemeColor(color) {
   
   
  const el = document.documentElement;
  const body = document.querySelector("body");
  // const nprogress = document.querySelector("#nprogress .bar");
  // console.log(nprogress)
  el.style.setProperty("--el-color-primary", color);
  body.style.setProperty("--van-primary-color", color);
  // nprogress.style.setProperty("background", color);
  // 此行判断是否为白天/暗夜模式，可根据自身业务调整代码
  let mixColor = Store.state.settings.sideTheme.split("-")[1] === "light" ? "#ffffff" : "#000000"; 
  // 此行判断是否为白天/暗夜模式，