sohelp-ele/lib/utils/theme-util.js

SohelpEle Library

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
var colors = require("@ant-design/colors");
function changeColor(color, dark, darkClass = "ele-admin-theme-dark") {
  const id = `ele-admin-theme-var`;
  const elem = document.getElementById(id);
  if (elem == null ? void 0 : elem.parentNode) {
    elem.parentNode.removeChild(elem);
  }
  if (color) {
    const colors$1 = colors.generate(color, dark ? { theme: "dark" } : {});
    const clazz = dark ? `.${darkClass}` : ":root";
    const elem2 = document.createElement("style");
    elem2.id = id;
    elem2.setAttribute("type", "text/css");
    elem2.innerHTML = `${clazz}{` + colors$1.map((c, i) => {
      return `--color-primary-${i + 1}:${c};`;
    }).concat([`--color-primary:${color};`]).join("") + "}";
    document.head.appendChild(elem2);
    document.body.dataset.theme = color;
  } else {
    document.body.removeAttribute("data-theme");
  }
  if (dark) {
    document.body.classList.add(darkClass);
  } else {
    document.body.classList.remove(darkClass);
  }
}
function changeTheme(name, dark, importer) {
  const css_name = dark ? name ? name + "-dark" : "dark" : name;
  return new Promise((resolve, reject) => {
    if (!css_name) {
      removeTheme();
      return resolve();
    }
    const oldElem = document.head.querySelector(`#ele-theme-${css_name}-js`);
    if (oldElem) {
      removeTheme();
      const elem = document.createElement("link");
      elem.id = `ele-theme-${css_name}`;
      elem.setAttribute("type", "text/css");
      elem.setAttribute("rel", "stylesheet");
      elem.setAttribute("href", oldElem.getAttribute("ele-css"));
      document.head.appendChild(elem);
      return resolve();
    }
    const nid = ':not([id^="ele-theme-"])';
    const sel = `style${nid},link${nid},script${nid}`;
    [].forEach.call(document.head.querySelectorAll(sel), (elem) => {
      if (!elem.getAttribute("ele-theme")) {
        elem.setAttribute("ele-theme", "no");
      }
    });
    importer(css_name).then(() => {
      removeTheme();
      let elem = document.head.querySelectorAll(
        'style:not([ele-theme="no"])'
      );
      elem = elem.length ? elem[elem.length - 1] : null;
      if (!elem) {
        elem = document.head.querySelectorAll('link:not([ele-theme="no"])');
        elem = elem.length ? elem[elem.length - 1] : null;
        if (!elem) {
          return reject(new Error("theme element not found"));
        }
        const href = elem.getAttribute("href");
        const uuid = href.substring(
          href.indexOf("chunk-"),
          href.indexOf(".")
        );
        const qs = `script[src^="/js/${uuid}"]:not([ele-theme="no"])`;
        const node = document.head.querySelectorAll(qs);
        if (node.length) {
          node[node.length - 1].id = `ele-theme-${css_name}-js`;
          node[node.length - 1].setAttribute("ele-css", href);
        }
      }
      elem.id = `ele-theme-${css_name}`;
      return resolve();
    }).catch((e) => {
      reject(e);
    });
  });
}
function removeTheme() {
  const sel = 'style[id^="ele-theme-"],link[id^="ele-theme-"]';
  [].forEach.call(document.head.querySelectorAll(sel), (elem) => {
    elem.parentNode.removeChild(elem);
  });
}
exports.changeColor = changeColor;
exports.changeTheme = changeTheme;