Enable Auto Detect for Light/Dark Mode – Digit WHMCS Template Docs

Open WHMCStemplatesdigitwdesjscustomizer.js and add the following code at the end of the file:

customizer.jsJavaScript

/***** Auto Detect System Mode (Light or Dark) *****/
if (
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches
) {
  document
    .querySelector("link[href*='theme']")
    .setAttribute(
      "href",
      `${whmcsBaseUrl}/templates/${templateName}/css/theme-dark.css`
    );
}
if (
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: light)").matches
) {
  document
    .querySelector("link[href*='theme']")
    .setAttribute(
      "href",
      `${whmcsBaseUrl}/templates/${templateName}/css/theme-light.css`
    );
  if (document.querySelector("link[href*='form-theme']") != null) {
    document
      .querySelector("link[href*='form-theme']")
      .setAttribute(
        "href",
        `${whmcsBaseUrl}/templates/orderforms/digit/css/form-theme-light.css`
      );
  }
  // Change image Path from Dark to Light
  if (document.querySelector(".logo img") != null) {
    document
      .querySelector(".logo img")
      .setAttribute(
        "src",
        `${whmcsBaseUrl}/templates/${templateName}/img/theme-light-logo.png`
      );
  }
  if (document.querySelector(".domain-bg") != null) {
    document
      .querySelector(".domain-bg")
      .setAttribute(
        "src",
        `${whmcsBaseUrl}/templates/${templateName}/img/theme-light-domain-bg.png`
      );
  }
}

Related articles