设置全局主题色

lizhongwe0418

于 2022-10-21 17:09:07 发布

阅读量204

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/lizhongwe0418/article/details/127449990

版权

设置全局主题色

在这里插入代码片
loadStyleString(css, id = "") {
      if (document.getElementById(id)) return;
      const style = document.createElement("style");
      style.type = "text/css";
      style.id = id;
      try {
        style.appendChild(document.createTextNode(css));
      } catch (ex) {
        style.styleSheet.cssText = css;
      }
      document.getElementsByTagName("head")[0].appendChild(style);
    }

mounted(){
   document
          .querySelector("#app")
          .style.setProperty("--basecolor", this.color); //主题色
   this.loadStyleString(`:root{--basecolor:${this.color}}`);
}