# darkify/1.5.1/src/assets/js/client_main.js

Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included), version 1.5.1. 1,283 lines.

- Page: https://pluginprobe.com/plugins/darkify/1.5.1/code/src/assets/js/client_main.js
- Raw: https://pluginprobe.com/plugins/darkify/1.5.1/raw/src/assets/js/client_main.js
- Modified: 2026-05-04T09:54:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/darkify/1.5.1/code/src/assets/js/client_main.js#L10-L20`.

```javascript
"use strict";

let has_process_run_at_least_once = false;
let old_transition = "";
let has_background_img_url = false;
let darken_level = parseInt(darkify_bg_image_darken_to) / 100;
darken_level = darken_level.toFixed(1);
let darkify_secondary_bg_color = "";

darkify_init_keyboard_shortcut_listener();
darkify_init_os_mode_change_listener();

const darkify_observer = new MutationObserver(function (mutationsList) {
  darkify_init_processes();

  darkify_process_iframes(); // ✅ darkify proceed iframe
});

const elements_class_changed = new MutationObserver((mutationsList) => {
  if (document.readyState !== "loading") {
    mutationsList.forEach((mutation) => {
      const target = mutation.target;

      if (target.classList.contains("darkify_processed")) {
        if (!target.hasAttribute("data-darkify_preserved_classes")) {
          target.dataset.darkify_preserved_classes =
            target.classList.toString();
        } else {
          if (
            target.dataset.darkify_preserved_classes ===
            target.classList.toString()
          ) {
            return;
          }
        }

        target.dataset.darkify_preserved_classes = target.classList.toString();
        elements_class_changed.disconnect();
        target.classList.remove("darkify_processed");
        darkify_process_element(target);

        document
          .querySelectorAll(
            "*:not(head, title, link, meta, script, style, defs, filter)",
          )
          .forEach((element) => {
            elements_class_changed.observe(element, {
              attributes: true,
              attributeFilter: ["class"],
            });
          });
      }
    });
  }
});

const dark_mode_status_changed = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "class") {
      document
        .querySelectorAll(
          "*:not(head, title, link, meta, script, style, defs, filter)",
        )
        .forEach((element) => {
          if (element.classList.contains("darkify_processed")) {
            if (
              darkify_disallowed_elements.length > 0 &&
              element.matches(darkify_disallowed_elements)
            ) {
              return;
            }
            if (darkify_enable_bg_image_darken === "1") {
              darkify_darken_bg_image(element, darken_level);
            }
            if (
              (darkify_enable_low_image_brightness === "1" ||
                darkify_enable_image_grayscale === "1") &&
              element.nodeName.toLowerCase() === "img"
            ) {
              darkify_img_brightness_and_grayscale(element);
            }
            if (
              darkify_enable_invert_inline_svg === "1" &&
              element.nodeName.toLowerCase() === "svg"
            ) {
              darkify_invert_inline_svg(element);
            }
            if (
              darkify_enable_low_video_brightness === "1" ||
              darkify_enable_video_grayscale === "1"
            ) {
              if (element.nodeName.toLowerCase() === "video") {
                darkify_video_brightness_and_grayscale(element);
              }
              if (
                element.nodeName.toLowerCase() === "iframe" &&
                element.getAttribute("src") != null
              ) {
                const srcAttribute = element.getAttribute("src");
                if (
                  srcAttribute.includes("youtube") ||
                  srcAttribute.includes("vimeo") ||
                  srcAttribute.includes("dailymotion")
                ) {
                  darkify_video_brightness_and_grayscale(element);
                }
              }
            }
            if (element.hasAttribute("data-darkify_alpha_bg")) {
              darkify_fix_background_color_alpha(element);
            }
          }
        });
    }
  });
});

function darkify_change_state() {
  if (darkify_is_this_admin_panel === "1") {
    localStorage.darkify_admin_panel_last_state = document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
      ? "1"
      : "0";
  } else {
    localStorage.darkify_last_state = document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
      ? "1"
      : "0";
  }
}

function darkify_switch_trigger() {
  if (!has_process_run_at_least_once) {
    darkify_init_processes();
    darkify_init_observer();
  }

  const htmlElement = document.getElementsByTagName("html")[0];

  if (htmlElement.classList.contains("darkify_dark_mode_enabled")) {
    htmlElement.classList.remove("darkify_dark_mode_enabled");
  } else {
    htmlElement.classList.add("darkify_dark_mode_enabled");
  }

  darkify_change_state();

  darkify_process_iframes(); // ✅ darkify proceed iframe
}
function darkify_theme_select(theme) {
  if (!darkify_is_block_editor_context()) return;
  if (!has_process_run_at_least_once) {
    darkify_init_processes();
    darkify_init_observer();
  }

  const htmlElement = document.documentElement;

  // ✅ Remove all previous theme classes (IMPORTANT)
  htmlElement.classList.forEach((cls) => {
    if (cls.startsWith("darkify-")) {
      htmlElement.classList.remove(cls);
    }
  });

  // ✅ Save in localStorage
  localStorage.darkify_selected_theme = theme;

  // ✅ Update all select dropdowns
  darkify_update_theme_selectors(theme);

  if (darkify_is_this_admin_panel === "1") {
    if (localStorage.darkify_admin_panel_last_state === "1") {
      htmlElement.classList.add("darkify_dark_mode_enabled");
      htmlElement.classList.add("darkify-" + theme);
    } else {
      htmlElement.classList.remove("darkify_dark_mode_enabled");
    }
  }

  darkify_change_state();

  darkify_process_iframes();

  darkify_apply_palette(theme);
}

document.addEventListener("DOMContentLoaded", function () {
  if (!darkify_is_block_editor_context()) return;

  let theme = localStorage.getItem("darkify_selected_theme") || "set1";

  darkify_theme_select(theme);
});

function darkify_update_theme_selectors(theme) {
  document
    .querySelectorAll(".darkify-theme-selector")
    .forEach(function (select) {
      if (select.value !== theme) {
        select.value = theme;
      }
    });
}

function darkify_is_block_editor_context() {
  return (
    typeof document !== "undefined" &&
    document.body &&
    (document.body.classList.contains("block-editor-page") ||
      document.querySelector(".edit-post-visual-editor") !== null ||
      document.querySelector(".block-editor") !== null)
  );
}

function darkify_restore_selected_theme() {
  if (!darkify_is_block_editor_context()) return;
  const storedTheme = localStorage.darkify_selected_theme;

  if (!storedTheme) return;

  darkify_update_theme_selectors(storedTheme);
  darkify_theme_select(storedTheme);
}

function darkify_apply_palette(theme) {
  if (!darkify_is_block_editor_context()) return;
  const palettes = {
    set1: {
      bg: "#0F0F0F",
      secondary_bg: "#171717",
      text_color: "#BEBEBE",
      link_color: "#E7E7E7",
      link_hover_color: "#BEBEBE",
      input_bg: "#2D2D2D",
      input_text_color: "#BEBEBE",
      input_placeholder_color: "#BEBEBE",
      border_color: "#4A4A4A",
      btn_text_color: "#BEBEBE",
      btn_bg: "#4A4A4A",
      btn_text_hover_color: "#BEBEBE",
      btn_hover_bg: "#2D2D2D",
    },
    set3: {
      bg: "#211e3c",
      secondary_bg: "#302C57",
      text_color: "#B1BBD8",
      link_color: "#8071fb",
      link_hover_color: "#B1BBD8",
      input_bg: "#2A264D",
      input_text_color: "#B1BBD8",
      input_placeholder_color: "#B1BBD8",
      border_color: "#4E478D",
      btn_text_color: "#B1BBD8",
      btn_bg: "#4E478D",
      btn_text_hover_color: "#B1BBD8",
      btn_hover_bg: "#2A264D",
    },

    set6: {
      bg: "#082032",
      secondary_bg: "#061825",
      text_color: "#B5D9F3",
      link_color: "#61bbff",
      link_hover_color: "#B5D9F3",
      input_bg: "#0E3755",
      input_text_color: "#B5D9F3",
      input_placeholder_color: "#B5D9F3",
      border_color: "#144E78",
      btn_text_color: "#B5D9F3",
      btn_bg: "#144E78",
      btn_text_hover_color: "#B5D9F3",
      btn_hover_bg: "#0E3755",
    },

    set9: {
      bg: "#04261d",
      secondary_bg: "#021e16",
      text_color: "#C1D2BB",
      link_color: "#00d29a",
      link_hover_color: "#C1D2BB",
      input_bg: "#073d2f",
      input_text_color: "#C1D2BB",
      input_placeholder_color: "#C1D2BB",
      border_color: "#095541",
      btn_text_color: "#C1D2BB",
      btn_bg: "#095541",
      btn_text_hover_color: "#C1D2BB",
      btn_hover_bg: "#073d2f",
    },

    set10: {
      bg: "#171004",
      secondary_bg: "#211706",
      text_color: "#E0D2BD",
      link_color: "#e09525",
      link_hover_color: "#E0D2BD",
      input_bg: "#372911",
      input_text_color: "#E0D2BD",
      input_placeholder_color: "#E0D2BD",
      border_color: "#5D4010",
      btn_text_color: "#E0D2BD",
      btn_bg: "#5D4010",
      btn_text_hover_color: "#E0D2BD",
      btn_hover_bg: "#372911",
    },
  };

  const palette = palettes[theme] || palettes["default"];

  document.documentElement.style.setProperty(
    "--darkify_dark_mode_bg",
    palette.bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_secondary_bg",
    palette.secondary_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_text_color",
    palette.text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_link_color",
    palette.link_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_link_hover_color",
    palette.link_hover_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_bg",
    palette.input_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_text_color",
    palette.input_text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_placeholder_color",
    palette.input_placeholder_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_border_color",
    palette.border_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_bg",
    palette.btn_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_text_color",
    palette.btn_text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_hover_bg",
    palette.btn_hover_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_text_hover_color",
    palette.btn_text_hover_color,
  );
}

// Iframe dark mode implementation functions
function darkify_copy_root_vars_to_iframe(iframeDoc) {
  const parentStyle = document.querySelector("style.darkify_inline_css");
  if (!parentStyle) return;

  let style = iframeDoc.getElementById("darkify-iframe-vars");
  if (!style) {
    style = iframeDoc.createElement("style");
    style.id = "darkify-iframe-vars";
    iframeDoc.head.appendChild(style);
  }

  // Copy the whole :root { ... } block as-is
  style.textContent = parentStyle.textContent;
}

function darkify_inject_css_into_iframe(iframeDoc) {
  if (iframeDoc.getElementById("darkify-iframe-css")) return;

  const style = iframeDoc.createElement("style");
  style.id = "darkify-iframe-css";
  style.textContent = `
    html.darkify_dark_mode_enabled,
    html.darkify_dark_mode_enabled body {
      background: var(--darkify_dark_mode_secondary_bg) !important;
      color: var(--darkify_dark_mode_text_color) !important;
    }

    html.darkify_dark_mode_enabled a {
      color: var(--darkify_dark_mode_link_color) !important;
    }
    html.darkify_dark_mode_enabled a:hover {
      color: var(--darkify_dark_mode_link_hover_color) !important;
    }

    html.darkify_dark_mode_enabled input,
    html.darkify_dark_mode_enabled select,
    html.darkify_dark_mode_enabled textarea {
      background: var(--darkify_dark_mode_input_bg) !important;
      color: var(--darkify_dark_mode_input_text_color) !important;
      border-color: var(--darkify_dark_mode_border_color) !important;
    }

    html.darkify_dark_mode_enabled input::placeholder,
    html.darkify_dark_mode_enabled textarea::placeholder {
      color: var(--darkify_dark_mode_input_placeholder_color) !important;
    }

    /* TinyMCE editor body */
    html.darkify_dark_mode_enabled body#tinymce,
    html.darkify_dark_mode_enabled .mce-content-body {
      background: var(--darkify_dark_mode_secondary_bg) !important;
      color: var(--darkify_dark_mode_text_color) !important;
    }
  `;
  iframeDoc.head.appendChild(style);
}

function darkify_apply_dark_to_iframe(iframe) {
  if (darkify_is_this_admin_panel === "1") return;
  try {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
    if (!iframeDoc || !iframeDoc.documentElement) return;

    const enabled = document.documentElement.classList.contains(
      "darkify_dark_mode_enabled",
    );

    if (enabled) {
      iframeDoc.documentElement.classList.add("darkify_dark_mode_enabled");

      // ✅ copy vars first, then inject CSS that uses them
      darkify_copy_root_vars_to_iframe(iframeDoc);
      darkify_inject_css_into_iframe(iframeDoc);
    } else {
      iframeDoc.documentElement.classList.remove("darkify_dark_mode_enabled");
    }
  } catch (e) {
    // cross-origin -> can't access
  }
}

function darkify_process_iframes() {
  // 🚫 If admin panel, stop immediately
  if (darkify_is_this_admin_panel === "1") {
    return;
  }

  document.querySelectorAll("iframe").forEach(darkify_apply_dark_to_iframe);
}

function darkify_init_keyboard_shortcut_listener() {
  if (darkify_enable_keyboard_shortcut === "1") {
    document.onkeydown = function (event) {
      if (event.ctrlKey && event.altKey && event.keyCode === 0x44) {
        darkify_switch_trigger();
      }
    };
  }
}

function darkify_init_os_mode_change_listener() {
  if (darkify_is_this_admin_panel === "0" && darkify_enable_os_aware === "1") {
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        const mode = event.matches ? "dark" : "light";
        const htmlElement = document.getElementsByTagName("html")[0];
        if (mode === "dark") {
          htmlElement.classList.add("darkify_dark_mode_enabled");
        } else if (mode === "light") {
          htmlElement.classList.remove("darkify_dark_mode_enabled");
        }

        darkify_change_state();
      });
  }
}

function darkify_init_alternative_dark_mode_switch() {
  if (darkify_alternative_dark_mode_switch.length > 0) {
    const elements = document.querySelectorAll(
      darkify_alternative_dark_mode_switch,
    );
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];
      element.addEventListener("click", () => {
        darkify_switch_trigger();
      });
    }
  }
}

function get_bg_color_to_preserve(element, fromDataset) {
  let color = window.getComputedStyle(element, null).backgroundColor;
  if (!fromDataset) {
    color = element.dataset.darkify_preserved_bg;
  }
  if (
    (color === "transparent" ||
      color === "rgba(0, 0, 0, 0)" ||
      color === "rgba(255,255,255,0)") &&
    element.parentNode.nodeType === 1
  ) {
    color = get_bg_color_to_preserve(element.parentNode, false);
  } else if (
    element.parentNode.nodeType === 1 &&
    element.parentNode.hasAttribute("data-darkify_preserved_bg") &&
    window.getComputedStyle(element.parentNode, null).backgroundColor === color
  ) {
    color = get_bg_color_to_preserve(element.parentNode, false);
  }
  return color;
}

function get_txt_color_to_preserve(element, fromDataset) {
  let color = window.getComputedStyle(element, null).color;
  if (!fromDataset) {
    color = element.dataset.darkify_preserved_color;
  }
  if (
    (color === "transparent" ||
      color === "rgba(0, 0, 0, 0)" ||
      color === "rgba(255,255,255,0)") &&
    element.parentNode.nodeType === 1
  ) {
    color = get_txt_color_to_preserve(element.parentNode, false);
  } else if (
    element.parentNode.nodeType === 1 &&
    element.parentNode.hasAttribute("data-darkify_preserved_color") &&
    window.getComputedStyle(element.parentNode, null).color === color
  ) {
    color = get_txt_color_to_preserve(element.parentNode, false);
  }
  return color;
}

function darkify_darken_bg_image(element, level) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    const mainStyle = window.getComputedStyle(element, null);
    const beforeStyle = window.getComputedStyle(element, ":before");
    const afterStyle = window.getComputedStyle(element, ":after");

    if (
      mainStyle.backgroundImage !== "none" &&
      mainStyle.backgroundImage.includes("url") &&
      !mainStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      element.style.setProperty(
        "background-image",
        "linear-gradient(rgba(0, 0, 0, " +
          level +
          "), rgba(0, 0, 0, " +
          level +
          ")), " +
          mainStyle.backgroundImage,
      );
    }

    // Process :before pseudo-element
    if (
      beforeStyle.backgroundImage !== "none" &&
      beforeStyle.backgroundImage.includes("url") &&
      !beforeStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      // Create a style element for this specific element
      const styleId = `darkify-before-${Math.random()
        .toString(36)
        .substr(2, 9)}`;
      element.setAttribute("data-darkify-style-id", styleId);

      let styleElement = document.getElementById(styleId);
      if (!styleElement) {
        styleElement = document.createElement("style");
        styleElement.id = styleId;
        document.head.appendChild(styleElement);
      }

      // Store original background for reset
      element.dataset.darkifyOriginalBeforeBg = beforeStyle.backgroundImage;

      // Add the styles for :before
      const cssText = `
        .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::before {
          background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${beforeStyle.backgroundImage} !important;
        }
      `;
      styleElement.textContent = cssText;

      // Ensure position relative on parent
      if (window.getComputedStyle(element).position === "static") {
        element.style.position = "relative";
      }
    }
    // Process :after pseudo-element
    if (
      afterStyle.backgroundImage !== "none" &&
      afterStyle.backgroundImage.includes("url") &&
      !afterStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      // Create a style element for this specific element
      const styleId = `darkify-after-${Math.random()
        .toString(36)
        .substr(2, 9)}`;
      element.setAttribute("data-darkify-style-id", styleId);

      let styleElement = document.getElementById(styleId);
      if (!styleElement) {
        styleElement = document.createElement("style");
        styleElement.id = styleId;
        document.head.appendChild(styleElement);
      }

      // Store original background for reset
      element.dataset.darkifyOriginalAfterBg = afterStyle.backgroundImage;

      // Add the styles for :after
      const cssText = `
        .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::after {
          background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${afterStyle.backgroundImage} !important;
        }
      `;
      styleElement.textContent = cssText;

      // Ensure position relative on parent
      if (window.getComputedStyle(element).position === "static") {
        element.style.position = "relative";
      }
    }
  } else if (
    window.getComputedStyle(element, null).backgroundImage !== "none" &&
    window
      .getComputedStyle(element, null)
      .backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
  ) {
    element.style.setProperty(
      "background-image",
      window
        .getComputedStyle(element, null)
        .backgroundImage.replace(
          "linear-gradient(rgba(0, 0, 0, " +
            level +
            "), rgba(0, 0, 0, " +
            level +
            ")), ",
          "",
        ),
    );
  }
}

function darkify_img_brightness_and_grayscale(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (
      !element.classList.contains("darkify_changed_brightness_and_grayscale")
    ) {
      element.dataset.darkify_preserved_filter = element.style.filter;
      element.classList.add("darkify_changed_brightness_and_grayscale");

      if (
        darkify_enable_low_image_brightness === "1" &&
        darkify_enable_image_grayscale === "1"
      ) {
        element.style.filter =
          "brightness(" +
          darkify_image_brightness_to +
          "%)" +
          " " +
          "grayscale(" +
          darkify_image_grayscale_to +
          "%)";
      } else {
        if (darkify_enable_low_image_brightness === "1") {
          element.style.filter =
            "brightness(" + darkify_image_brightness_to + "%)";
        } else if (darkify_enable_image_grayscale === "1") {
          element.style.filter =
            "grayscale(" + darkify_image_grayscale_to + "%)";
        }
      }
    }
  } else if (
    element.classList.contains("darkify_changed_brightness_and_grayscale")
  ) {
    element.style.filter = element.dataset.darkify_preserved_filter;
    element.classList.remove("darkify_changed_brightness_and_grayscale");
    delete element.dataset.darkify_preserved_filter;
  }
}

function darkify_invert_inline_svg(element) {
  if (document.body.classList.contains("block-editor-page")) return;
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    element.style.filter = "invert(1)";
    element.classList.add("darkify_inverted_inline_svg");
  } else if (element.classList.contains("darkify_inverted_inline_svg")) {
    element.style.filter = element.style.filter.replace("invert(1)", "");
    element.classList.remove("darkify_inverted_inline_svg");
  }
}

function darkify_video_brightness_and_grayscale(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (
      !element.classList.contains(
        "darkify_changed_video_brightness_and_grayscale",
      )
    ) {
      element.dataset.darkify_preserved_filter = element.style.filter;
      element.classList.add("darkify_changed_video_brightness_and_grayscale");
      if (
        darkify_enable_low_video_brightness === "1" &&
        darkify_enable_video_grayscale === "1"
      ) {
        element.style.filter =
          "brightness(" +
          darkify_video_brightness_to +
          "%)" +
          " " +
          "grayscale(" +
          darkify_video_grayscale_to +
          "%)";
      } else {
        if (darkify_enable_low_video_brightness === "1") {
          element.style.filter =
            "brightness(" + darkify_video_brightness_to + "%)";
        } else if (darkify_enable_video_grayscale === "1") {
          element.style.filter =
            "grayscale(" + darkify_video_grayscale_to + "%)";
        }
      }
    }
  } else if (
    element.classList.contains("darkify_changed_video_brightness_and_grayscale")
  ) {
    element.style.filter = element.dataset.darkify_preserved_filter;
    element.classList.remove("darkify_changed_video_brightness_and_grayscale");
    delete element.dataset.darkify_preserved_filter;
  }
}

function darkify_replace_video(videoElement, videos) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    for (let i = 0; i < videos.length; i++) {
      const normalVideo = videos[i].normal_video;
      const normalVideoPath = new URL(normalVideo).pathname;
      const darkVideo = videos[i].dark_video;
      const darkVideoPath = new URL(darkVideo).pathname;

      if (
        videoElement.getAttribute("src") != null &&
        videoElement.getAttribute("src").includes(normalVideoPath)
      ) {
        videoElement.src = darkVideo;
        videoElement.classList.add("darkify_replaced_video");
      }

      if (videoElement.querySelectorAll("source") != null) {
        let sources = videoElement.querySelectorAll("source");
        for (let j = 0; j < sources.length; j++) {
          if (
            sources[j].getAttribute("src") != null &&
            sources[j].getAttribute("src").includes(normalVideoPath)
          ) {
            sources[j].src = darkVideo + "?_=" + Date.now();
            videoElement.classList.add("darkify_replaced_video");
            videoElement.load();
          }
        }
      }
    }
  } else {
    if (videoElement.classList.contains("darkify_replaced_video")) {
      for (let i = 0; i < videos.length; i++) {
        const normalVideo = videos[i].normal_video;
        const normalVideoPath = new URL(normalVideo).pathname;
        const darkVideo = videos[i].dark_video;
        const darkVideoPath = new URL(darkVideo).pathname;

        if (
          videoElement.getAttribute("src") != null &&
          videoElement.getAttribute("src").includes(darkVideoPath)
        ) {
          videoElement.src = normalVideo;
          videoElement.classList.remove("darkify_replaced_video");
        }

        if (videoElement.querySelectorAll("source") != null) {
          let sources = videoElement.querySelectorAll("source");
          for (let j = 0; j < sources.length; j++) {
            if (
              sources[j].getAttribute("src") != null &&
              sources[j].getAttribute("src").includes(darkVideoPath)
            ) {
              sources[j].src = normalVideo + "?_=" + Date.now();
              videoElement.classList.remove("darkify_replaced_video");
              videoElement.load();
            }
          }
        }
      }
    }
  }
}

function darkify_fix_background_color_alpha(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (element.hasAttribute("data-darkify_alpha_bg")) {
      var alphaValue = element.dataset.darkify_alpha_bg
        .replace("rgba(", "")
        .replace(")", "")
        .split(",")[3]
        .trim();
      var backgroundColor = window.getComputedStyle(
        element,
        null,
      ).backgroundColor;

      if (!backgroundColor.includes("rgba")) {
        element.style.setProperty(
          "background-color",
          backgroundColor
            .replace(")", ", " + alphaValue + ")")
            .replace("rgb", "rgba"),
          "important",
        );
      }
    }
  } else if (element.hasAttribute("data-darkify_alpha_bg")) {
    element.style.backgroundColor = "";
  }
}

function darkify_implement_secondary_bg() {
  let maxAreaElement = null;
  let maxArea = 0;

  const elements = document.querySelectorAll(
    "* :not(head, title, link, meta, script, style, defs, filter)",
  );

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
      const secondaryBgColor = element.dataset.darkify_secondary_bg_finder;
      if (
        secondaryBgColor !== "transparent" &&
        secondaryBgColor !== "rgba(0, 0, 0, 0)"
      ) {
        const boundingRect = element.getBoundingClientRect();
        const area = boundingRect.width * boundingRect.height;
        if (area > maxArea) {
          maxArea = area;
          maxAreaElement = secondaryBgColor;
        }
      }
    }
  }

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
      if (
        element.classList.contains("darkify_style_all") ||
        element.classList.contains("darkify_style_bg_txt") ||
        element.classList.contains("darkify_style_bg_border") ||
        element.classList.contains("darkify_style_bg")
      ) {
        const isDifferentSecondaryBg =
          maxAreaElement !== element.dataset.darkify_secondary_bg_finder;
        if (isDifferentSecondaryBg) {
          element.classList.add("darkify_style_secondary_bg");
        }
      }
      delete element.dataset.darkify_secondary_bg_finder;
    }
  }

  darkify_secondary_bg_color = maxAreaElement;
}

function darkify_recheck_on_css_loaded_later() {
  document
    .querySelectorAll(
      ".darkify_style_txt_border, .darkify_style_txt, .darkify_style_border",
    )
    .forEach(function (element) {
      const computedStyle = window.getComputedStyle(element, null);
      const backgroundColor = computedStyle.backgroundColor;
      if (
        backgroundColor !== "rgba(0, 0, 0, 0)" &&
        backgroundColor !== "rgba(255, 255, 255, 0)"
      ) {
        darkify_process_element(element);
      }
    });
}

function darkify_check_preloading() {
  let isPreloaded = false;
  const lastState = localStorage.darkify_last_state
    ? localStorage.darkify_last_state
    : "not_set";
  const adminPanelLastState = localStorage.darkify_admin_panel_last_state
    ? localStorage.darkify_admin_panel_last_state
    : "not_set";

  if (darkify_is_this_admin_panel === "1") {
    if (adminPanelLastState === "1") {
      isPreloaded = true;
    }
  } else {
    if (lastState === "1" || lastState === "0") {
      if (lastState === "1") {
        isPreloaded = true;
      }
    } else {
      if (darkify_enable_default_dark_mode === "1") {
        isPreloaded = true;
      }
      if (darkify_enable_time_based_dark === "1") {
        const currentDate = new Date();
        const darkStart = new Date();
        const darkStop = new Date();
        darkStart.setHours(
          parseInt(darkify_time_based_dark_start.split(":")[0]),
        );
        darkStart.setMinutes(
          parseInt(darkify_time_based_dark_start.split(":")[1]),
        );
        darkStop.setHours(parseInt(darkify_time_based_dark_stop.split(":")[0]));
        darkStop.setMinutes(
          parseInt(darkify_time_based_dark_stop.split(":")[1]),
        );

        if (
          parseInt(darkify_time_based_dark_stop.split(":")[0]) >=
          parseInt(darkify_time_based_dark_start.split(":")[0])
        ) {
          if (
            currentDate.getTime() > darkStart.getTime() &&
            currentDate.getTime() < darkStop.getTime()
          ) {
            isPreloaded = true;
          }
        } else if (currentDate.getHours() > 12) {
          if (
            currentDate.getTime() > darkStart.getTime() &&
            currentDate.getTime() > darkStop.getTime()
          ) {
            isPreloaded = true;
          }
        } else if (
          currentDate.getTime() < darkStart.getTime() &&
          currentDate.getTime() < darkStop.getTime()
        ) {
          isPreloaded = true;
        }
      }
    }
  }

  if (
    darkify_is_this_admin_panel === "0" &&
    darkify_enable_os_aware === "1" &&
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches &&
    lastState !== "1" &&
    lastState !== "0"
  ) {
    isPreloaded = true;
  }

  return isPreloaded;
}

function darkify_process_element(element) {
  var computedStyle = window.getComputedStyle(element, null);
  var old_transition = "";

  // if (computedStyle.transition !== "all 0s ease 0s") {
  //   old_transition = computedStyle.transition;
  //   // element.style.setProperty("transition", "none");
  // }

  if (
    element.classList.contains("darkify_style_all") ||
    element.classList.contains("darkify_style_bg_txt") ||
    element.classList.contains("darkify_style_bg_border") ||
    element.classList.contains("darkify_style_txt_border") ||
    element.classList.contains("darkify_style_bg") ||
    element.classList.contains("darkify_style_txt") ||
    element.classList.contains("darkify_style_border") ||
    element.classList.contains("darkify_style_secondary_bg")
  ) {
    element.classList.remove("darkify_style_all");
    element.classList.remove("darkify_style_bg_txt");
    element.classList.remove("darkify_style_bg_border");
    element.classList.remove("darkify_style_txt_border");
    element.classList.remove("darkify_style_bg");
    element.classList.remove("darkify_style_txt");
    element.classList.remove("darkify_style_border");
    element.classList.remove("darkify_style_secondary_bg");
  }

  var nodeName = element.nodeName.toLowerCase();
  var backgroundColor = computedStyle.backgroundColor;
  var color = computedStyle.color;
  var borderColor = computedStyle.borderColor;
  var backgroundImage = computedStyle.backgroundImage;

  if (
    nodeName === "body" &&
    (backgroundColor === "rgba(0, 0, 0, 0)" ||
      backgroundColor === "rgba(255, 255, 255, 0)")
  ) {
    element.style.setProperty("background-color", "rgb(255, 255, 255)");
    backgroundColor = window.getComputedStyle(element, null).backgroundColor;
  }

  if (darkify_disallowed_elements.length > 0) {
    if (element.matches(darkify_disallowed_elements)) {
      // if (old_transition !== "") {
      //   element.style.setProperty("transition", old_transition);
      // }
      // element.classList.remove("darkify_processed");
      return;
    }
  }

  var has_background_img_url = false;
  if (backgroundImage !== "none" && backgroundImage.includes("url")) {
    has_background_img_url = true;
    if (darkify_enable_bg_image_darken === "1") {
      darkify_darken_bg_image(element, darken_level);
    }
  }
  if (
    backgroundColor !== "rgba(0, 0, 0, 0)" &&
    backgroundColor !== "rgba(255, 255, 255, 0)" &&
    !has_background_img_url
  ) {
    if (!element.hasAttribute("data-darkify_secondary_bg_finder")) {
      element.dataset.darkify_secondary_bg_finder = backgroundColor;
    }
    if (darkify_secondary_bg_color !== "") {
      var isSecondaryBgColorDifferent =
        darkify_secondary_bg_color !==
        element.dataset.darkify_secondary_bg_finder;
      if (isSecondaryBgColorDifferent) {
        element.classList.add("darkify_style_secondary_bg");
      }
      delete element.dataset.darkify_secondary_bg_finder;
    }
  }
  if (
    backgroundColor !== "rgba(0, 0, 0, 0)" &&
    color !== "rgba(0, 0, 0, 0)" &&
    borderColor !== "rgba(0, 0, 0, 0)" &&
    backgroundColor !== "rgba(255, 255, 255, 0)" &&
    color !== "rgba(255, 255, 255, 0)" &&
    borderColor !== "rgba(255, 255, 255, 0)" &&
    has_background_img_url === false
  ) {
    element.classList.add("darkify_style_all");
  } else {
    if (
      backgroundColor !== "rgba(0, 0, 0, 0)" &&
      color !== "rgba(0, 0, 0, 0)" &&
      backgroundColor !== "rgba(255, 255, 255, 0)" &&
      color !== "rgba(255, 255, 255, 0)" &&
      has_background_img_url === false
    ) {
      element.classList.add("darkify_style_bg_txt");
    } else {
      if (
        backgroundColor !== "rgba(0, 0, 0, 0)" &&
        borderColor !== "rgba(0, 0, 0, 0)" &&
        backgroundColor !== "rgba(255, 255, 255, 0)" &&
        borderColor !== "rgba(255, 255, 255, 0)" &&
        has_background_img_url === false
      ) {
        element.classList.add("darkify_style_bg_border");
      } else {
        if (
          color !== "rgba(0, 0, 0, 0)" &&
          borderColor !== "rgba(0, 0, 0, 0)" &&
          color !== "rgba(255, 255, 255, 0)" &&
          borderColor !== "rgba(255, 255, 255, 0)"
        ) {
          element.classList.add("darkify_style_txt_border");
        } else {
          if (
            backgroundColor !== "rgba(0, 0, 0, 0)" &&
            backgroundColor !== "rgba(255, 255, 255, 0)" &&
            has_background_img_url === false
          ) {
            element.classList.add("darkify_style_bg");
          } else {
            if (
              color !== "rgba(0, 0, 0, 0)" &&
              color !== "rgba(255, 255, 255, 0)"
            ) {
              element.classList.add("darkify_style_txt");
            } else if (
              borderColor !== "rgba(0, 0, 0, 0)" &&
              borderColor !== "rgba(255, 255, 255, 0)"
            ) {
              element.classList.add("darkify_style_border");
            }
          }
        }
      }
    }
  }
  if (
    backgroundImage !== "none" &&
    !has_background_img_url &&
    !element.classList.contains("darkify_style_all") &&
    !element.classList.contains("darkify_style_bg_txt") &&
    !element.classList.contains("darkify_style_bg_border") &&
    !element.classList.contains("darkify_style_bg")
  ) {
    element.classList.add("darkify_style_bg");
  }

  if (nodeName === "a") {
    element.classList.add("darkify_style_link");
  }

  if (
    nodeName === "input" ||
    nodeName === "select" ||
    nodeName === "textarea"
  ) {
    element.classList.add("darkify_style_form_element");
  }

  const hasTargetClass = darkify_allowed_btn_class.some((cls) =>
    element.classList.contains(cls),
  );

  if (nodeName === "button" || hasTargetClass || element.type === "submit") {
    element.classList.add("darkify_style_button");
    element.classList.remove("darkify_style_secondary_bg");
    element.classList.remove("darkify_style_all");
    element.classList.remove("darkify_style_link");
  }

  if (
    (darkify_enable_low_image_brightness === "1" ||
      darkify_enable_image_grayscale === "1") &&
    nodeName === "img"
  ) {
    darkify_img_brightness_and_grayscale(element);
  }

  if (darkify_enable_invert_inline_svg === "1" && nodeName === "svg") {
    darkify_invert_inline_svg(element);
  }

  if (
    darkify_enable_low_video_brightness === "1" ||
    darkify_enable_video_grayscale === "1"
  ) {
    if (nodeName === "video") {
      darkify_video_brightness_and_grayscale(element);
    }

    if (nodeName === "iframe") {
      const srcAttribute = element.getAttribute("src");
      if (srcAttribute !== null) {
        if (
          srcAttribute.includes("youtube") ||
          srcAttribute.includes("vimeo") ||
          srcAttribute.includes("dailymotion")
        ) {
          darkify_video_brightness_and_grayscale(element);
        }
      }
    }
  }

  if (backgroundColor.includes("rgba")) {
    element.dataset.darkify_alpha_bg = backgroundColor;
    darkify_fix_background_color_alpha(element);
  }

  // if (old_transition !== "") {
  //   setTimeout(function () {
  //     element.style.setProperty("transition", old_transition);
  //   }, 0);
  // }

  setTimeout(function () {
    elements_class_changed.observe(element, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }, 0);

  element.classList.add("darkify_processed");
}

function darkify_init_processes() {
  has_process_run_at_least_once = true;
  document
    .querySelectorAll(
      "* :not(head, title, link, meta, script, style, defs, filter, .darkify_processed)",
    )
    .forEach(function (element) {
      darkify_process_element(element);
    });
}

function darkify_init_observer() {
  darkify_observer.observe(document, {
    attributes: false,
    childList: true,
    characterData: false,
    subtree: true,
  });

  dark_mode_status_changed.observe(document.getElementsByTagName("html")[0], {
    attributes: true,
  });

  if (document.readyState !== "loading") {
    if (!has_process_run_at_least_once) {
      darkify_init_processes();
    }
    darkify_implement_secondary_bg();
    darkify_recheck_on_css_loaded_later();
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      if (!has_process_run_at_least_once) {
        darkify_init_processes();
      }
      darkify_implement_secondary_bg();
      darkify_recheck_on_css_loaded_later();
    });
  }
}

if (darkify_check_preloading()) {
  document
    .getElementsByTagName("html")[0]
    .classList.add("darkify_dark_mode_enabled");
  darkify_init_observer();

  darkify_process_iframes(); // ✅ darkify proceed iframe
}

```