PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.5.1
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.5.1
2.1.3 2.1.2 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 trunk 1.0.1 1.1.0 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.3.0 All 57 releases
darkify / src / assets / js / client_main.js

client_main.js in Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) 1.5.1, at src/assets/js/client_main.js

1,290 lines 39.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 "use strict";
2
3 let has_process_run_at_least_once = false;
4 let old_transition = "";
5 let has_background_img_url = false;
6 let darken_level = parseInt(darkify_bg_image_darken_to) / 100;
7 darken_level = darken_level.toFixed(1);
8 let darkify_secondary_bg_color = "";
9
10 darkify_init_keyboard_shortcut_listener();
11 darkify_init_os_mode_change_listener();
12
13 const darkify_observer = new MutationObserver(function (mutationsList) {
14 darkify_init_processes();
15
16 darkify_process_iframes(); // �
17 darkify proceed iframe
18 });
19
20 const elements_class_changed = new MutationObserver((mutationsList) => {
21 if (document.readyState !== "loading") {
22 mutationsList.forEach((mutation) => {
23 const target = mutation.target;
24
25 if (target.classList.contains("darkify_processed")) {
26 if (!target.hasAttribute("data-darkify_preserved_classes")) {
27 target.dataset.darkify_preserved_classes =
28 target.classList.toString();
29 } else {
30 if (
31 target.dataset.darkify_preserved_classes ===
32 target.classList.toString()
33 ) {
34 return;
35 }
36 }
37
38 target.dataset.darkify_preserved_classes = target.classList.toString();
39 elements_class_changed.disconnect();
40 target.classList.remove("darkify_processed");
41 darkify_process_element(target);
42
43 document
44 .querySelectorAll(
45 "*:not(head, title, link, meta, script, style, defs, filter)",
46 )
47 .forEach((element) => {
48 elements_class_changed.observe(element, {
49 attributes: true,
50 attributeFilter: ["class"],
51 });
52 });
53 }
54 });
55 }
56 });
57
58 const dark_mode_status_changed = new MutationObserver((mutationsList) => {
59 mutationsList.forEach((mutation) => {
60 if (mutation.type === "attributes" && mutation.attributeName === "class") {
61 document
62 .querySelectorAll(
63 "*:not(head, title, link, meta, script, style, defs, filter)",
64 )
65 .forEach((element) => {
66 if (element.classList.contains("darkify_processed")) {
67 if (
68 darkify_disallowed_elements.length > 0 &&
69 element.matches(darkify_disallowed_elements)
70 ) {
71 return;
72 }
73 if (darkify_enable_bg_image_darken === "1") {
74 darkify_darken_bg_image(element, darken_level);
75 }
76 if (
77 (darkify_enable_low_image_brightness === "1" ||
78 darkify_enable_image_grayscale === "1") &&
79 element.nodeName.toLowerCase() === "img"
80 ) {
81 darkify_img_brightness_and_grayscale(element);
82 }
83 if (
84 darkify_enable_invert_inline_svg === "1" &&
85 element.nodeName.toLowerCase() === "svg"
86 ) {
87 darkify_invert_inline_svg(element);
88 }
89 if (
90 darkify_enable_low_video_brightness === "1" ||
91 darkify_enable_video_grayscale === "1"
92 ) {
93 if (element.nodeName.toLowerCase() === "video") {
94 darkify_video_brightness_and_grayscale(element);
95 }
96 if (
97 element.nodeName.toLowerCase() === "iframe" &&
98 element.getAttribute("src") != null
99 ) {
100 const srcAttribute = element.getAttribute("src");
101 if (
102 srcAttribute.includes("youtube") ||
103 srcAttribute.includes("vimeo") ||
104 srcAttribute.includes("dailymotion")
105 ) {
106 darkify_video_brightness_and_grayscale(element);
107 }
108 }
109 }
110 if (element.hasAttribute("data-darkify_alpha_bg")) {
111 darkify_fix_background_color_alpha(element);
112 }
113 }
114 });
115 }
116 });
117 });
118
119 function darkify_change_state() {
120 if (darkify_is_this_admin_panel === "1") {
121 localStorage.darkify_admin_panel_last_state = document
122 .getElementsByTagName("html")[0]
123 .classList.contains("darkify_dark_mode_enabled")
124 ? "1"
125 : "0";
126 } else {
127 localStorage.darkify_last_state = document
128 .getElementsByTagName("html")[0]
129 .classList.contains("darkify_dark_mode_enabled")
130 ? "1"
131 : "0";
132 }
133 }
134
135 function darkify_switch_trigger() {
136 if (!has_process_run_at_least_once) {
137 darkify_init_processes();
138 darkify_init_observer();
139 }
140
141 const htmlElement = document.getElementsByTagName("html")[0];
142
143 if (htmlElement.classList.contains("darkify_dark_mode_enabled")) {
144 htmlElement.classList.remove("darkify_dark_mode_enabled");
145 } else {
146 htmlElement.classList.add("darkify_dark_mode_enabled");
147 }
148
149 darkify_change_state();
150
151 darkify_process_iframes(); // �
152 darkify proceed iframe
153 }
154 function darkify_theme_select(theme) {
155 if (!darkify_is_block_editor_context()) return;
156 if (!has_process_run_at_least_once) {
157 darkify_init_processes();
158 darkify_init_observer();
159 }
160
161 const htmlElement = document.documentElement;
162
163 // �
164 Remove all previous theme classes (IMPORTANT)
165 htmlElement.classList.forEach((cls) => {
166 if (cls.startsWith("darkify-")) {
167 htmlElement.classList.remove(cls);
168 }
169 });
170
171 // �
172 Save in localStorage
173 localStorage.darkify_selected_theme = theme;
174
175 // �
176 Update all select dropdowns
177 darkify_update_theme_selectors(theme);
178
179 if (darkify_is_this_admin_panel === "1") {
180 if (localStorage.darkify_admin_panel_last_state === "1") {
181 htmlElement.classList.add("darkify_dark_mode_enabled");
182 htmlElement.classList.add("darkify-" + theme);
183 } else {
184 htmlElement.classList.remove("darkify_dark_mode_enabled");
185 }
186 }
187
188 darkify_change_state();
189
190 darkify_process_iframes();
191
192 darkify_apply_palette(theme);
193 }
194
195 document.addEventListener("DOMContentLoaded", function () {
196 if (!darkify_is_block_editor_context()) return;
197
198 let theme = localStorage.getItem("darkify_selected_theme") || "set1";
199
200 darkify_theme_select(theme);
201 });
202
203 function darkify_update_theme_selectors(theme) {
204 document
205 .querySelectorAll(".darkify-theme-selector")
206 .forEach(function (select) {
207 if (select.value !== theme) {
208 select.value = theme;
209 }
210 });
211 }
212
213 function darkify_is_block_editor_context() {
214 return (
215 typeof document !== "undefined" &&
216 document.body &&
217 (document.body.classList.contains("block-editor-page") ||
218 document.querySelector(".edit-post-visual-editor") !== null ||
219 document.querySelector(".block-editor") !== null)
220 );
221 }
222
223 function darkify_restore_selected_theme() {
224 if (!darkify_is_block_editor_context()) return;
225 const storedTheme = localStorage.darkify_selected_theme;
226
227 if (!storedTheme) return;
228
229 darkify_update_theme_selectors(storedTheme);
230 darkify_theme_select(storedTheme);
231 }
232
233 function darkify_apply_palette(theme) {
234 if (!darkify_is_block_editor_context()) return;
235 const palettes = {
236 set1: {
237 bg: "#0F0F0F",
238 secondary_bg: "#171717",
239 text_color: "#BEBEBE",
240 link_color: "#E7E7E7",
241 link_hover_color: "#BEBEBE",
242 input_bg: "#2D2D2D",
243 input_text_color: "#BEBEBE",
244 input_placeholder_color: "#BEBEBE",
245 border_color: "#4A4A4A",
246 btn_text_color: "#BEBEBE",
247 btn_bg: "#4A4A4A",
248 btn_text_hover_color: "#BEBEBE",
249 btn_hover_bg: "#2D2D2D",
250 },
251 set3: {
252 bg: "#211e3c",
253 secondary_bg: "#302C57",
254 text_color: "#B1BBD8",
255 link_color: "#8071fb",
256 link_hover_color: "#B1BBD8",
257 input_bg: "#2A264D",
258 input_text_color: "#B1BBD8",
259 input_placeholder_color: "#B1BBD8",
260 border_color: "#4E478D",
261 btn_text_color: "#B1BBD8",
262 btn_bg: "#4E478D",
263 btn_text_hover_color: "#B1BBD8",
264 btn_hover_bg: "#2A264D",
265 },
266
267 set6: {
268 bg: "#082032",
269 secondary_bg: "#061825",
270 text_color: "#B5D9F3",
271 link_color: "#61bbff",
272 link_hover_color: "#B5D9F3",
273 input_bg: "#0E3755",
274 input_text_color: "#B5D9F3",
275 input_placeholder_color: "#B5D9F3",
276 border_color: "#144E78",
277 btn_text_color: "#B5D9F3",
278 btn_bg: "#144E78",
279 btn_text_hover_color: "#B5D9F3",
280 btn_hover_bg: "#0E3755",
281 },
282
283 set9: {
284 bg: "#04261d",
285 secondary_bg: "#021e16",
286 text_color: "#C1D2BB",
287 link_color: "#00d29a",
288 link_hover_color: "#C1D2BB",
289 input_bg: "#073d2f",
290 input_text_color: "#C1D2BB",
291 input_placeholder_color: "#C1D2BB",
292 border_color: "#095541",
293 btn_text_color: "#C1D2BB",
294 btn_bg: "#095541",
295 btn_text_hover_color: "#C1D2BB",
296 btn_hover_bg: "#073d2f",
297 },
298
299 set10: {
300 bg: "#171004",
301 secondary_bg: "#211706",
302 text_color: "#E0D2BD",
303 link_color: "#e09525",
304 link_hover_color: "#E0D2BD",
305 input_bg: "#372911",
306 input_text_color: "#E0D2BD",
307 input_placeholder_color: "#E0D2BD",
308 border_color: "#5D4010",
309 btn_text_color: "#E0D2BD",
310 btn_bg: "#5D4010",
311 btn_text_hover_color: "#E0D2BD",
312 btn_hover_bg: "#372911",
313 },
314 };
315
316 const palette = palettes[theme] || palettes["default"];
317
318 document.documentElement.style.setProperty(
319 "--darkify_dark_mode_bg",
320 palette.bg,
321 );
322 document.documentElement.style.setProperty(
323 "--darkify_dark_mode_secondary_bg",
324 palette.secondary_bg,
325 );
326 document.documentElement.style.setProperty(
327 "--darkify_dark_mode_text_color",
328 palette.text_color,
329 );
330 document.documentElement.style.setProperty(
331 "--darkify_dark_mode_link_color",
332 palette.link_color,
333 );
334 document.documentElement.style.setProperty(
335 "--darkify_dark_mode_link_hover_color",
336 palette.link_hover_color,
337 );
338 document.documentElement.style.setProperty(
339 "--darkify_dark_mode_input_bg",
340 palette.input_bg,
341 );
342 document.documentElement.style.setProperty(
343 "--darkify_dark_mode_input_text_color",
344 palette.input_text_color,
345 );
346 document.documentElement.style.setProperty(
347 "--darkify_dark_mode_input_placeholder_color",
348 palette.input_placeholder_color,
349 );
350 document.documentElement.style.setProperty(
351 "--darkify_dark_mode_border_color",
352 palette.border_color,
353 );
354 document.documentElement.style.setProperty(
355 "--darkify_dark_mode_btn_bg",
356 palette.btn_bg,
357 );
358 document.documentElement.style.setProperty(
359 "--darkify_dark_mode_btn_text_color",
360 palette.btn_text_color,
361 );
362 document.documentElement.style.setProperty(
363 "--darkify_dark_mode_btn_hover_bg",
364 palette.btn_hover_bg,
365 );
366 document.documentElement.style.setProperty(
367 "--darkify_dark_mode_btn_text_hover_color",
368 palette.btn_text_hover_color,
369 );
370 }
371
372 // Iframe dark mode implementation functions
373 function darkify_copy_root_vars_to_iframe(iframeDoc) {
374 const parentStyle = document.querySelector("style.darkify_inline_css");
375 if (!parentStyle) return;
376
377 let style = iframeDoc.getElementById("darkify-iframe-vars");
378 if (!style) {
379 style = iframeDoc.createElement("style");
380 style.id = "darkify-iframe-vars";
381 iframeDoc.head.appendChild(style);
382 }
383
384 // Copy the whole :root { ... } block as-is
385 style.textContent = parentStyle.textContent;
386 }
387
388 function darkify_inject_css_into_iframe(iframeDoc) {
389 if (iframeDoc.getElementById("darkify-iframe-css")) return;
390
391 const style = iframeDoc.createElement("style");
392 style.id = "darkify-iframe-css";
393 style.textContent = `
394 html.darkify_dark_mode_enabled,
395 html.darkify_dark_mode_enabled body {
396 background: var(--darkify_dark_mode_secondary_bg) !important;
397 color: var(--darkify_dark_mode_text_color) !important;
398 }
399
400 html.darkify_dark_mode_enabled a {
401 color: var(--darkify_dark_mode_link_color) !important;
402 }
403 html.darkify_dark_mode_enabled a:hover {
404 color: var(--darkify_dark_mode_link_hover_color) !important;
405 }
406
407 html.darkify_dark_mode_enabled input,
408 html.darkify_dark_mode_enabled select,
409 html.darkify_dark_mode_enabled textarea {
410 background: var(--darkify_dark_mode_input_bg) !important;
411 color: var(--darkify_dark_mode_input_text_color) !important;
412 border-color: var(--darkify_dark_mode_border_color) !important;
413 }
414
415 html.darkify_dark_mode_enabled input::placeholder,
416 html.darkify_dark_mode_enabled textarea::placeholder {
417 color: var(--darkify_dark_mode_input_placeholder_color) !important;
418 }
419
420 /* TinyMCE editor body */
421 html.darkify_dark_mode_enabled body#tinymce,
422 html.darkify_dark_mode_enabled .mce-content-body {
423 background: var(--darkify_dark_mode_secondary_bg) !important;
424 color: var(--darkify_dark_mode_text_color) !important;
425 }
426 `;
427 iframeDoc.head.appendChild(style);
428 }
429
430 function darkify_apply_dark_to_iframe(iframe) {
431 if (darkify_is_this_admin_panel === "1") return;
432 try {
433 const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
434 if (!iframeDoc || !iframeDoc.documentElement) return;
435
436 const enabled = document.documentElement.classList.contains(
437 "darkify_dark_mode_enabled",
438 );
439
440 if (enabled) {
441 iframeDoc.documentElement.classList.add("darkify_dark_mode_enabled");
442
443 // �
444 copy vars first, then inject CSS that uses them
445 darkify_copy_root_vars_to_iframe(iframeDoc);
446 darkify_inject_css_into_iframe(iframeDoc);
447 } else {
448 iframeDoc.documentElement.classList.remove("darkify_dark_mode_enabled");
449 }
450 } catch (e) {
451 // cross-origin -> can't access
452 }
453 }
454
455 function darkify_process_iframes() {
456 // 🚫 If admin panel, stop immediately
457 if (darkify_is_this_admin_panel === "1") {
458 return;
459 }
460
461 document.querySelectorAll("iframe").forEach(darkify_apply_dark_to_iframe);
462 }
463
464 function darkify_init_keyboard_shortcut_listener() {
465 if (darkify_enable_keyboard_shortcut === "1") {
466 document.onkeydown = function (event) {
467 if (event.ctrlKey && event.altKey && event.keyCode === 0x44) {
468 darkify_switch_trigger();
469 }
470 };
471 }
472 }
473
474 function darkify_init_os_mode_change_listener() {
475 if (darkify_is_this_admin_panel === "0" && darkify_enable_os_aware === "1") {
476 window
477 .matchMedia("(prefers-color-scheme: dark)")
478 .addEventListener("change", (event) => {
479 const mode = event.matches ? "dark" : "light";
480 const htmlElement = document.getElementsByTagName("html")[0];
481 if (mode === "dark") {
482 htmlElement.classList.add("darkify_dark_mode_enabled");
483 } else if (mode === "light") {
484 htmlElement.classList.remove("darkify_dark_mode_enabled");
485 }
486
487 darkify_change_state();
488 });
489 }
490 }
491
492 function darkify_init_alternative_dark_mode_switch() {
493 if (darkify_alternative_dark_mode_switch.length > 0) {
494 const elements = document.querySelectorAll(
495 darkify_alternative_dark_mode_switch,
496 );
497 for (let i = 0; i < elements.length; i++) {
498 const element = elements[i];
499 element.addEventListener("click", () => {
500 darkify_switch_trigger();
501 });
502 }
503 }
504 }
505
506 function get_bg_color_to_preserve(element, fromDataset) {
507 let color = window.getComputedStyle(element, null).backgroundColor;
508 if (!fromDataset) {
509 color = element.dataset.darkify_preserved_bg;
510 }
511 if (
512 (color === "transparent" ||
513 color === "rgba(0, 0, 0, 0)" ||
514 color === "rgba(255,255,255,0)") &&
515 element.parentNode.nodeType === 1
516 ) {
517 color = get_bg_color_to_preserve(element.parentNode, false);
518 } else if (
519 element.parentNode.nodeType === 1 &&
520 element.parentNode.hasAttribute("data-darkify_preserved_bg") &&
521 window.getComputedStyle(element.parentNode, null).backgroundColor === color
522 ) {
523 color = get_bg_color_to_preserve(element.parentNode, false);
524 }
525 return color;
526 }
527
528 function get_txt_color_to_preserve(element, fromDataset) {
529 let color = window.getComputedStyle(element, null).color;
530 if (!fromDataset) {
531 color = element.dataset.darkify_preserved_color;
532 }
533 if (
534 (color === "transparent" ||
535 color === "rgba(0, 0, 0, 0)" ||
536 color === "rgba(255,255,255,0)") &&
537 element.parentNode.nodeType === 1
538 ) {
539 color = get_txt_color_to_preserve(element.parentNode, false);
540 } else if (
541 element.parentNode.nodeType === 1 &&
542 element.parentNode.hasAttribute("data-darkify_preserved_color") &&
543 window.getComputedStyle(element.parentNode, null).color === color
544 ) {
545 color = get_txt_color_to_preserve(element.parentNode, false);
546 }
547 return color;
548 }
549
550 function darkify_darken_bg_image(element, level) {
551 if (
552 document
553 .getElementsByTagName("html")[0]
554 .classList.contains("darkify_dark_mode_enabled")
555 ) {
556 const mainStyle = window.getComputedStyle(element, null);
557 const beforeStyle = window.getComputedStyle(element, ":before");
558 const afterStyle = window.getComputedStyle(element, ":after");
559
560 if (
561 mainStyle.backgroundImage !== "none" &&
562 mainStyle.backgroundImage.includes("url") &&
563 !mainStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
564 ) {
565 element.style.setProperty(
566 "background-image",
567 "linear-gradient(rgba(0, 0, 0, " +
568 level +
569 "), rgba(0, 0, 0, " +
570 level +
571 ")), " +
572 mainStyle.backgroundImage,
573 );
574 }
575
576 // Process :before pseudo-element
577 if (
578 beforeStyle.backgroundImage !== "none" &&
579 beforeStyle.backgroundImage.includes("url") &&
580 !beforeStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
581 ) {
582 // Create a style element for this specific element
583 const styleId = `darkify-before-${Math.random()
584 .toString(36)
585 .substr(2, 9)}`;
586 element.setAttribute("data-darkify-style-id", styleId);
587
588 let styleElement = document.getElementById(styleId);
589 if (!styleElement) {
590 styleElement = document.createElement("style");
591 styleElement.id = styleId;
592 document.head.appendChild(styleElement);
593 }
594
595 // Store original background for reset
596 element.dataset.darkifyOriginalBeforeBg = beforeStyle.backgroundImage;
597
598 // Add the styles for :before
599 const cssText = `
600 .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::before {
601 background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${beforeStyle.backgroundImage} !important;
602 }
603 `;
604 styleElement.textContent = cssText;
605
606 // Ensure position relative on parent
607 if (window.getComputedStyle(element).position === "static") {
608 element.style.position = "relative";
609 }
610 }
611 // Process :after pseudo-element
612 if (
613 afterStyle.backgroundImage !== "none" &&
614 afterStyle.backgroundImage.includes("url") &&
615 !afterStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
616 ) {
617 // Create a style element for this specific element
618 const styleId = `darkify-after-${Math.random()
619 .toString(36)
620 .substr(2, 9)}`;
621 element.setAttribute("data-darkify-style-id", styleId);
622
623 let styleElement = document.getElementById(styleId);
624 if (!styleElement) {
625 styleElement = document.createElement("style");
626 styleElement.id = styleId;
627 document.head.appendChild(styleElement);
628 }
629
630 // Store original background for reset
631 element.dataset.darkifyOriginalAfterBg = afterStyle.backgroundImage;
632
633 // Add the styles for :after
634 const cssText = `
635 .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::after {
636 background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${afterStyle.backgroundImage} !important;
637 }
638 `;
639 styleElement.textContent = cssText;
640
641 // Ensure position relative on parent
642 if (window.getComputedStyle(element).position === "static") {
643 element.style.position = "relative";
644 }
645 }
646 } else if (
647 window.getComputedStyle(element, null).backgroundImage !== "none" &&
648 window
649 .getComputedStyle(element, null)
650 .backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
651 ) {
652 element.style.setProperty(
653 "background-image",
654 window
655 .getComputedStyle(element, null)
656 .backgroundImage.replace(
657 "linear-gradient(rgba(0, 0, 0, " +
658 level +
659 "), rgba(0, 0, 0, " +
660 level +
661 ")), ",
662 "",
663 ),
664 );
665 }
666 }
667
668 function darkify_img_brightness_and_grayscale(element) {
669 if (
670 document
671 .getElementsByTagName("html")[0]
672 .classList.contains("darkify_dark_mode_enabled")
673 ) {
674 if (
675 !element.classList.contains("darkify_changed_brightness_and_grayscale")
676 ) {
677 element.dataset.darkify_preserved_filter = element.style.filter;
678 element.classList.add("darkify_changed_brightness_and_grayscale");
679
680 if (
681 darkify_enable_low_image_brightness === "1" &&
682 darkify_enable_image_grayscale === "1"
683 ) {
684 element.style.filter =
685 "brightness(" +
686 darkify_image_brightness_to +
687 "%)" +
688 " " +
689 "grayscale(" +
690 darkify_image_grayscale_to +
691 "%)";
692 } else {
693 if (darkify_enable_low_image_brightness === "1") {
694 element.style.filter =
695 "brightness(" + darkify_image_brightness_to + "%)";
696 } else if (darkify_enable_image_grayscale === "1") {
697 element.style.filter =
698 "grayscale(" + darkify_image_grayscale_to + "%)";
699 }
700 }
701 }
702 } else if (
703 element.classList.contains("darkify_changed_brightness_and_grayscale")
704 ) {
705 element.style.filter = element.dataset.darkify_preserved_filter;
706 element.classList.remove("darkify_changed_brightness_and_grayscale");
707 delete element.dataset.darkify_preserved_filter;
708 }
709 }
710
711 function darkify_invert_inline_svg(element) {
712 if (document.body.classList.contains("block-editor-page")) return;
713 if (
714 document
715 .getElementsByTagName("html")[0]
716 .classList.contains("darkify_dark_mode_enabled")
717 ) {
718 element.style.filter = "invert(1)";
719 element.classList.add("darkify_inverted_inline_svg");
720 } else if (element.classList.contains("darkify_inverted_inline_svg")) {
721 element.style.filter = element.style.filter.replace("invert(1)", "");
722 element.classList.remove("darkify_inverted_inline_svg");
723 }
724 }
725
726 function darkify_video_brightness_and_grayscale(element) {
727 if (
728 document
729 .getElementsByTagName("html")[0]
730 .classList.contains("darkify_dark_mode_enabled")
731 ) {
732 if (
733 !element.classList.contains(
734 "darkify_changed_video_brightness_and_grayscale",
735 )
736 ) {
737 element.dataset.darkify_preserved_filter = element.style.filter;
738 element.classList.add("darkify_changed_video_brightness_and_grayscale");
739 if (
740 darkify_enable_low_video_brightness === "1" &&
741 darkify_enable_video_grayscale === "1"
742 ) {
743 element.style.filter =
744 "brightness(" +
745 darkify_video_brightness_to +
746 "%)" +
747 " " +
748 "grayscale(" +
749 darkify_video_grayscale_to +
750 "%)";
751 } else {
752 if (darkify_enable_low_video_brightness === "1") {
753 element.style.filter =
754 "brightness(" + darkify_video_brightness_to + "%)";
755 } else if (darkify_enable_video_grayscale === "1") {
756 element.style.filter =
757 "grayscale(" + darkify_video_grayscale_to + "%)";
758 }
759 }
760 }
761 } else if (
762 element.classList.contains("darkify_changed_video_brightness_and_grayscale")
763 ) {
764 element.style.filter = element.dataset.darkify_preserved_filter;
765 element.classList.remove("darkify_changed_video_brightness_and_grayscale");
766 delete element.dataset.darkify_preserved_filter;
767 }
768 }
769
770 function darkify_replace_video(videoElement, videos) {
771 if (
772 document
773 .getElementsByTagName("html")[0]
774 .classList.contains("darkify_dark_mode_enabled")
775 ) {
776 for (let i = 0; i < videos.length; i++) {
777 const normalVideo = videos[i].normal_video;
778 const normalVideoPath = new URL(normalVideo).pathname;
779 const darkVideo = videos[i].dark_video;
780 const darkVideoPath = new URL(darkVideo).pathname;
781
782 if (
783 videoElement.getAttribute("src") != null &&
784 videoElement.getAttribute("src").includes(normalVideoPath)
785 ) {
786 videoElement.src = darkVideo;
787 videoElement.classList.add("darkify_replaced_video");
788 }
789
790 if (videoElement.querySelectorAll("source") != null) {
791 let sources = videoElement.querySelectorAll("source");
792 for (let j = 0; j < sources.length; j++) {
793 if (
794 sources[j].getAttribute("src") != null &&
795 sources[j].getAttribute("src").includes(normalVideoPath)
796 ) {
797 sources[j].src = darkVideo + "?_=" + Date.now();
798 videoElement.classList.add("darkify_replaced_video");
799 videoElement.load();
800 }
801 }
802 }
803 }
804 } else {
805 if (videoElement.classList.contains("darkify_replaced_video")) {
806 for (let i = 0; i < videos.length; i++) {
807 const normalVideo = videos[i].normal_video;
808 const normalVideoPath = new URL(normalVideo).pathname;
809 const darkVideo = videos[i].dark_video;
810 const darkVideoPath = new URL(darkVideo).pathname;
811
812 if (
813 videoElement.getAttribute("src") != null &&
814 videoElement.getAttribute("src").includes(darkVideoPath)
815 ) {
816 videoElement.src = normalVideo;
817 videoElement.classList.remove("darkify_replaced_video");
818 }
819
820 if (videoElement.querySelectorAll("source") != null) {
821 let sources = videoElement.querySelectorAll("source");
822 for (let j = 0; j < sources.length; j++) {
823 if (
824 sources[j].getAttribute("src") != null &&
825 sources[j].getAttribute("src").includes(darkVideoPath)
826 ) {
827 sources[j].src = normalVideo + "?_=" + Date.now();
828 videoElement.classList.remove("darkify_replaced_video");
829 videoElement.load();
830 }
831 }
832 }
833 }
834 }
835 }
836 }
837
838 function darkify_fix_background_color_alpha(element) {
839 if (
840 document
841 .getElementsByTagName("html")[0]
842 .classList.contains("darkify_dark_mode_enabled")
843 ) {
844 if (element.hasAttribute("data-darkify_alpha_bg")) {
845 var alphaValue = element.dataset.darkify_alpha_bg
846 .replace("rgba(", "")
847 .replace(")", "")
848 .split(",")[3]
849 .trim();
850 var backgroundColor = window.getComputedStyle(
851 element,
852 null,
853 ).backgroundColor;
854
855 if (!backgroundColor.includes("rgba")) {
856 element.style.setProperty(
857 "background-color",
858 backgroundColor
859 .replace(")", ", " + alphaValue + ")")
860 .replace("rgb", "rgba"),
861 "important",
862 );
863 }
864 }
865 } else if (element.hasAttribute("data-darkify_alpha_bg")) {
866 element.style.backgroundColor = "";
867 }
868 }
869
870 function darkify_implement_secondary_bg() {
871 let maxAreaElement = null;
872 let maxArea = 0;
873
874 const elements = document.querySelectorAll(
875 "* :not(head, title, link, meta, script, style, defs, filter)",
876 );
877
878 for (let i = 0; i < elements.length; i++) {
879 const element = elements[i];
880 if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
881 const secondaryBgColor = element.dataset.darkify_secondary_bg_finder;
882 if (
883 secondaryBgColor !== "transparent" &&
884 secondaryBgColor !== "rgba(0, 0, 0, 0)"
885 ) {
886 const boundingRect = element.getBoundingClientRect();
887 const area = boundingRect.width * boundingRect.height;
888 if (area > maxArea) {
889 maxArea = area;
890 maxAreaElement = secondaryBgColor;
891 }
892 }
893 }
894 }
895
896 for (let i = 0; i < elements.length; i++) {
897 const element = elements[i];
898 if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
899 if (
900 element.classList.contains("darkify_style_all") ||
901 element.classList.contains("darkify_style_bg_txt") ||
902 element.classList.contains("darkify_style_bg_border") ||
903 element.classList.contains("darkify_style_bg")
904 ) {
905 const isDifferentSecondaryBg =
906 maxAreaElement !== element.dataset.darkify_secondary_bg_finder;
907 if (isDifferentSecondaryBg) {
908 element.classList.add("darkify_style_secondary_bg");
909 }
910 }
911 delete element.dataset.darkify_secondary_bg_finder;
912 }
913 }
914
915 darkify_secondary_bg_color = maxAreaElement;
916 }
917
918 function darkify_recheck_on_css_loaded_later() {
919 document
920 .querySelectorAll(
921 ".darkify_style_txt_border, .darkify_style_txt, .darkify_style_border",
922 )
923 .forEach(function (element) {
924 const computedStyle = window.getComputedStyle(element, null);
925 const backgroundColor = computedStyle.backgroundColor;
926 if (
927 backgroundColor !== "rgba(0, 0, 0, 0)" &&
928 backgroundColor !== "rgba(255, 255, 255, 0)"
929 ) {
930 darkify_process_element(element);
931 }
932 });
933 }
934
935 function darkify_check_preloading() {
936 let isPreloaded = false;
937 const lastState = localStorage.darkify_last_state
938 ? localStorage.darkify_last_state
939 : "not_set";
940 const adminPanelLastState = localStorage.darkify_admin_panel_last_state
941 ? localStorage.darkify_admin_panel_last_state
942 : "not_set";
943
944 if (darkify_is_this_admin_panel === "1") {
945 if (adminPanelLastState === "1") {
946 isPreloaded = true;
947 }
948 } else {
949 if (lastState === "1" || lastState === "0") {
950 if (lastState === "1") {
951 isPreloaded = true;
952 }
953 } else {
954 if (darkify_enable_default_dark_mode === "1") {
955 isPreloaded = true;
956 }
957 if (darkify_enable_time_based_dark === "1") {
958 const currentDate = new Date();
959 const darkStart = new Date();
960 const darkStop = new Date();
961 darkStart.setHours(
962 parseInt(darkify_time_based_dark_start.split(":")[0]),
963 );
964 darkStart.setMinutes(
965 parseInt(darkify_time_based_dark_start.split(":")[1]),
966 );
967 darkStop.setHours(parseInt(darkify_time_based_dark_stop.split(":")[0]));
968 darkStop.setMinutes(
969 parseInt(darkify_time_based_dark_stop.split(":")[1]),
970 );
971
972 if (
973 parseInt(darkify_time_based_dark_stop.split(":")[0]) >=
974 parseInt(darkify_time_based_dark_start.split(":")[0])
975 ) {
976 if (
977 currentDate.getTime() > darkStart.getTime() &&
978 currentDate.getTime() < darkStop.getTime()
979 ) {
980 isPreloaded = true;
981 }
982 } else if (currentDate.getHours() > 12) {
983 if (
984 currentDate.getTime() > darkStart.getTime() &&
985 currentDate.getTime() > darkStop.getTime()
986 ) {
987 isPreloaded = true;
988 }
989 } else if (
990 currentDate.getTime() < darkStart.getTime() &&
991 currentDate.getTime() < darkStop.getTime()
992 ) {
993 isPreloaded = true;
994 }
995 }
996 }
997 }
998
999 if (
1000 darkify_is_this_admin_panel === "0" &&
1001 darkify_enable_os_aware === "1" &&
1002 window.matchMedia &&
1003 window.matchMedia("(prefers-color-scheme: dark)").matches &&
1004 lastState !== "1" &&
1005 lastState !== "0"
1006 ) {
1007 isPreloaded = true;
1008 }
1009
1010 return isPreloaded;
1011 }
1012
1013 function darkify_process_element(element) {
1014 var computedStyle = window.getComputedStyle(element, null);
1015 var old_transition = "";
1016
1017 // if (computedStyle.transition !== "all 0s ease 0s") {
1018 // old_transition = computedStyle.transition;
1019 // // element.style.setProperty("transition", "none");
1020 // }
1021
1022 if (
1023 element.classList.contains("darkify_style_all") ||
1024 element.classList.contains("darkify_style_bg_txt") ||
1025 element.classList.contains("darkify_style_bg_border") ||
1026 element.classList.contains("darkify_style_txt_border") ||
1027 element.classList.contains("darkify_style_bg") ||
1028 element.classList.contains("darkify_style_txt") ||
1029 element.classList.contains("darkify_style_border") ||
1030 element.classList.contains("darkify_style_secondary_bg")
1031 ) {
1032 element.classList.remove("darkify_style_all");
1033 element.classList.remove("darkify_style_bg_txt");
1034 element.classList.remove("darkify_style_bg_border");
1035 element.classList.remove("darkify_style_txt_border");
1036 element.classList.remove("darkify_style_bg");
1037 element.classList.remove("darkify_style_txt");
1038 element.classList.remove("darkify_style_border");
1039 element.classList.remove("darkify_style_secondary_bg");
1040 }
1041
1042 var nodeName = element.nodeName.toLowerCase();
1043 var backgroundColor = computedStyle.backgroundColor;
1044 var color = computedStyle.color;
1045 var borderColor = computedStyle.borderColor;
1046 var backgroundImage = computedStyle.backgroundImage;
1047
1048 if (
1049 nodeName === "body" &&
1050 (backgroundColor === "rgba(0, 0, 0, 0)" ||
1051 backgroundColor === "rgba(255, 255, 255, 0)")
1052 ) {
1053 element.style.setProperty("background-color", "rgb(255, 255, 255)");
1054 backgroundColor = window.getComputedStyle(element, null).backgroundColor;
1055 }
1056
1057 if (darkify_disallowed_elements.length > 0) {
1058 if (element.matches(darkify_disallowed_elements)) {
1059 // if (old_transition !== "") {
1060 // element.style.setProperty("transition", old_transition);
1061 // }
1062 // element.classList.remove("darkify_processed");
1063 return;
1064 }
1065 }
1066
1067 var has_background_img_url = false;
1068 if (backgroundImage !== "none" && backgroundImage.includes("url")) {
1069 has_background_img_url = true;
1070 if (darkify_enable_bg_image_darken === "1") {
1071 darkify_darken_bg_image(element, darken_level);
1072 }
1073 }
1074 if (
1075 backgroundColor !== "rgba(0, 0, 0, 0)" &&
1076 backgroundColor !== "rgba(255, 255, 255, 0)" &&
1077 !has_background_img_url
1078 ) {
1079 if (!element.hasAttribute("data-darkify_secondary_bg_finder")) {
1080 element.dataset.darkify_secondary_bg_finder = backgroundColor;
1081 }
1082 if (darkify_secondary_bg_color !== "") {
1083 var isSecondaryBgColorDifferent =
1084 darkify_secondary_bg_color !==
1085 element.dataset.darkify_secondary_bg_finder;
1086 if (isSecondaryBgColorDifferent) {
1087 element.classList.add("darkify_style_secondary_bg");
1088 }
1089 delete element.dataset.darkify_secondary_bg_finder;
1090 }
1091 }
1092 if (
1093 backgroundColor !== "rgba(0, 0, 0, 0)" &&
1094 color !== "rgba(0, 0, 0, 0)" &&
1095 borderColor !== "rgba(0, 0, 0, 0)" &&
1096 backgroundColor !== "rgba(255, 255, 255, 0)" &&
1097 color !== "rgba(255, 255, 255, 0)" &&
1098 borderColor !== "rgba(255, 255, 255, 0)" &&
1099 has_background_img_url === false
1100 ) {
1101 element.classList.add("darkify_style_all");
1102 } else {
1103 if (
1104 backgroundColor !== "rgba(0, 0, 0, 0)" &&
1105 color !== "rgba(0, 0, 0, 0)" &&
1106 backgroundColor !== "rgba(255, 255, 255, 0)" &&
1107 color !== "rgba(255, 255, 255, 0)" &&
1108 has_background_img_url === false
1109 ) {
1110 element.classList.add("darkify_style_bg_txt");
1111 } else {
1112 if (
1113 backgroundColor !== "rgba(0, 0, 0, 0)" &&
1114 borderColor !== "rgba(0, 0, 0, 0)" &&
1115 backgroundColor !== "rgba(255, 255, 255, 0)" &&
1116 borderColor !== "rgba(255, 255, 255, 0)" &&
1117 has_background_img_url === false
1118 ) {
1119 element.classList.add("darkify_style_bg_border");
1120 } else {
1121 if (
1122 color !== "rgba(0, 0, 0, 0)" &&
1123 borderColor !== "rgba(0, 0, 0, 0)" &&
1124 color !== "rgba(255, 255, 255, 0)" &&
1125 borderColor !== "rgba(255, 255, 255, 0)"
1126 ) {
1127 element.classList.add("darkify_style_txt_border");
1128 } else {
1129 if (
1130 backgroundColor !== "rgba(0, 0, 0, 0)" &&
1131 backgroundColor !== "rgba(255, 255, 255, 0)" &&
1132 has_background_img_url === false
1133 ) {
1134 element.classList.add("darkify_style_bg");
1135 } else {
1136 if (
1137 color !== "rgba(0, 0, 0, 0)" &&
1138 color !== "rgba(255, 255, 255, 0)"
1139 ) {
1140 element.classList.add("darkify_style_txt");
1141 } else if (
1142 borderColor !== "rgba(0, 0, 0, 0)" &&
1143 borderColor !== "rgba(255, 255, 255, 0)"
1144 ) {
1145 element.classList.add("darkify_style_border");
1146 }
1147 }
1148 }
1149 }
1150 }
1151 }
1152 if (
1153 backgroundImage !== "none" &&
1154 !has_background_img_url &&
1155 !element.classList.contains("darkify_style_all") &&
1156 !element.classList.contains("darkify_style_bg_txt") &&
1157 !element.classList.contains("darkify_style_bg_border") &&
1158 !element.classList.contains("darkify_style_bg")
1159 ) {
1160 element.classList.add("darkify_style_bg");
1161 }
1162
1163 if (nodeName === "a") {
1164 element.classList.add("darkify_style_link");
1165 }
1166
1167 if (
1168 nodeName === "input" ||
1169 nodeName === "select" ||
1170 nodeName === "textarea"
1171 ) {
1172 element.classList.add("darkify_style_form_element");
1173 }
1174
1175 const hasTargetClass = darkify_allowed_btn_class.some((cls) =>
1176 element.classList.contains(cls),
1177 );
1178
1179 if (nodeName === "button" || hasTargetClass || element.type === "submit") {
1180 element.classList.add("darkify_style_button");
1181 element.classList.remove("darkify_style_secondary_bg");
1182 element.classList.remove("darkify_style_all");
1183 element.classList.remove("darkify_style_link");
1184 }
1185
1186 if (
1187 (darkify_enable_low_image_brightness === "1" ||
1188 darkify_enable_image_grayscale === "1") &&
1189 nodeName === "img"
1190 ) {
1191 darkify_img_brightness_and_grayscale(element);
1192 }
1193
1194 if (darkify_enable_invert_inline_svg === "1" && nodeName === "svg") {
1195 darkify_invert_inline_svg(element);
1196 }
1197
1198 if (
1199 darkify_enable_low_video_brightness === "1" ||
1200 darkify_enable_video_grayscale === "1"
1201 ) {
1202 if (nodeName === "video") {
1203 darkify_video_brightness_and_grayscale(element);
1204 }
1205
1206 if (nodeName === "iframe") {
1207 const srcAttribute = element.getAttribute("src");
1208 if (srcAttribute !== null) {
1209 if (
1210 srcAttribute.includes("youtube") ||
1211 srcAttribute.includes("vimeo") ||
1212 srcAttribute.includes("dailymotion")
1213 ) {
1214 darkify_video_brightness_and_grayscale(element);
1215 }
1216 }
1217 }
1218 }
1219
1220 if (backgroundColor.includes("rgba")) {
1221 element.dataset.darkify_alpha_bg = backgroundColor;
1222 darkify_fix_background_color_alpha(element);
1223 }
1224
1225 // if (old_transition !== "") {
1226 // setTimeout(function () {
1227 // element.style.setProperty("transition", old_transition);
1228 // }, 0);
1229 // }
1230
1231 setTimeout(function () {
1232 elements_class_changed.observe(element, {
1233 attributes: true,
1234 attributeFilter: ["class"],
1235 });
1236 }, 0);
1237
1238 element.classList.add("darkify_processed");
1239 }
1240
1241 function darkify_init_processes() {
1242 has_process_run_at_least_once = true;
1243 document
1244 .querySelectorAll(
1245 "* :not(head, title, link, meta, script, style, defs, filter, .darkify_processed)",
1246 )
1247 .forEach(function (element) {
1248 darkify_process_element(element);
1249 });
1250 }
1251
1252 function darkify_init_observer() {
1253 darkify_observer.observe(document, {
1254 attributes: false,
1255 childList: true,
1256 characterData: false,
1257 subtree: true,
1258 });
1259
1260 dark_mode_status_changed.observe(document.getElementsByTagName("html")[0], {
1261 attributes: true,
1262 });
1263
1264 if (document.readyState !== "loading") {
1265 if (!has_process_run_at_least_once) {
1266 darkify_init_processes();
1267 }
1268 darkify_implement_secondary_bg();
1269 darkify_recheck_on_css_loaded_later();
1270 } else {
1271 document.addEventListener("DOMContentLoaded", function () {
1272 if (!has_process_run_at_least_once) {
1273 darkify_init_processes();
1274 }
1275 darkify_implement_secondary_bg();
1276 darkify_recheck_on_css_loaded_later();
1277 });
1278 }
1279 }
1280
1281 if (darkify_check_preloading()) {
1282 document
1283 .getElementsByTagName("html")[0]
1284 .classList.add("darkify_dark_mode_enabled");
1285 darkify_init_observer();
1286
1287 darkify_process_iframes(); // �
1288 darkify proceed iframe
1289 }
1290