PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.3.0
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.3.0
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.3.0, at src/assets/js/client_main.js

998 lines 38.5 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
7 const darkify_disallowed_low_brightness_images_arr = darkify_disallowed_low_brightness_images.trim().length > 0 ? darkify_disallowed_low_brightness_images.split(",") : [];
8 const darkify_disallowed_grayscale_images_arr = darkify_disallowed_grayscale_images.trim().length > 0 ? darkify_disallowed_grayscale_images.split(",") : [];
9
10 let darken_level = parseInt(darkify_bg_image_darken_to) / 100;
11 darken_level = darken_level.toFixed(1);
12
13 const darkify_invert_images_allowed_urls_arr = JSON.parse(darkify_invert_images_allowed_urls.replaceAll("&", "&").replaceAll(""", "\""));
14 const darkify_image_replacements_arr = JSON.parse(darkify_image_replacements.replaceAll("&", "&").replaceAll(""", "\""));
15 const darkify_video_replacements_arr = JSON.parse(darkify_video_replacements.replaceAll("&", "&").replaceAll(""", "\""));
16
17 let darkify_secondary_bg_color = "";
18
19 darkify_init_keyboard_shortcut_listener();
20 darkify_init_os_mode_change_listener();
21
22 const darkify_observer = new MutationObserver(function (mutationsList) {
23 darkify_init_processes();
24 });
25
26 const elements_class_changed = new MutationObserver(mutationsList => {
27 if (document.readyState !== "loading") {
28 mutationsList.forEach(mutation => {
29 const target = mutation.target;
30
31 if (target.classList.contains("darkify_processed")) {
32 if (!target.hasAttribute("data-darkify_preserved_classes")) {
33 target.dataset.darkify_preserved_classes = target.classList.toString();
34 } else {
35 if (target.dataset.darkify_preserved_classes === target.classList.toString()) {
36 return;
37 }
38 }
39
40 target.dataset.darkify_preserved_classes = target.classList.toString();
41 elements_class_changed.disconnect();
42 target.classList.remove("darkify_processed");
43 darkify_process_element(target);
44
45 document.querySelectorAll("*:not(head, title, link, meta, script, style, defs, filter)").forEach(element => {
46 elements_class_changed.observe(element, {
47 attributes: true,
48 attributeFilter: ["class"]
49 });
50 });
51 }
52 });
53 }
54 });
55
56 const dark_mode_status_changed = new MutationObserver(mutationsList => {
57 mutationsList.forEach(mutation => {
58 if (mutation.type === "attributes" && mutation.attributeName === "class") {
59 document.querySelectorAll("*:not(head, title, link, meta, script, style, defs, filter)").forEach(element => {
60 if (element.classList.contains("darkify_processed")) {
61 if (darkify_allowed_elements_raw.length > 0 && element.matches(darkify_allowed_elements_raw) && darkify_allowed_elements_force_to_correct === "1") {
62 darkify_elements_force_to_correct(element);
63 }
64 if (darkify_disallowed_elements_raw.length > 0 && element.matches(darkify_disallowed_elements_raw) && darkify_disallowed_elements_force_to_correct === "1") {
65 darkify_elements_force_to_correct(element);
66 }
67 if (darkify_allowed_elements.length > 0 && !element.matches(darkify_allowed_elements)) {
68 return;
69 }
70 if (darkify_disallowed_elements.length > 0 && element.matches(darkify_disallowed_elements)) {
71 return;
72 }
73 if (darkify_enable_bg_image_darken === "1") {
74 darkify_darken_bg_image(element, darken_level);
75 }
76 if ((darkify_enable_low_image_brightness === "1" || darkify_enable_image_grayscale === "1") && element.nodeName.toLowerCase() === "img") {
77 darkify_img_brightness_and_grayscale(element);
78 }
79 if (darkify_enable_invert_images === "1" && darkify_invert_images_allowed_urls_arr.length > 0) {
80 darkify_invert_image(element);
81 }
82 if (darkify_image_replacements_arr.length > 0) {
83 darkify_replace_image(element, darkify_image_replacements_arr);
84 }
85 if (darkify_enable_invert_inline_svg === "1" && element.nodeName.toLowerCase() === "svg") {
86 darkify_invert_inline_svg(element);
87 }
88 if (darkify_enable_low_video_brightness === "1" || darkify_enable_video_grayscale === "1") {
89 if (element.nodeName.toLowerCase() === "video") {
90 darkify_video_brightness_and_grayscale(element);
91 }
92 if (element.nodeName.toLowerCase() === "iframe" && element.getAttribute("src") != null) {
93 const srcAttribute = element.getAttribute("src");
94 if (srcAttribute.includes("youtube") || srcAttribute.includes("vimeo") || srcAttribute.includes("dailymotion")) {
95 darkify_video_brightness_and_grayscale(element);
96 }
97 }
98 }
99 if (darkify_video_replacements_arr.length > 0) {
100 if (element.nodeName.toLowerCase() === "video") {
101 darkify_replace_video(element, darkify_video_replacements_arr);
102 }
103 if (element.nodeName.toLowerCase() === "iframe" && element.getAttribute("src") != null) {
104 const srcAttribute = element.getAttribute("src");
105 if (srcAttribute.includes("youtube") || srcAttribute.includes("vimeo") || srcAttribute.includes("dailymotion")) {
106 darkify_replace_video(element, darkify_video_replacements_arr);
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.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled") ? "1" : "0";
122 } else {
123 localStorage.darkify_last_state = document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled") ? "1" : "0";
124 }
125 }
126
127 function darkify_switch_trigger() {
128 if (!has_process_run_at_least_once) {
129 darkify_init_processes();
130 darkify_init_observer();
131 }
132
133 const htmlElement = document.getElementsByTagName("html")[0];
134
135 if (htmlElement.classList.contains("darkify_dark_mode_enabled")) {
136 htmlElement.classList.remove("darkify_dark_mode_enabled");
137 } else {
138 htmlElement.classList.add("darkify_dark_mode_enabled");
139 }
140
141 darkify_change_state();
142 }
143
144 function darkify_init_keyboard_shortcut_listener() {
145 if (darkify_enable_keyboard_shortcut === "1") {
146 document.onkeydown = function (event) {
147 if (event.ctrlKey && event.altKey && event.keyCode === 0x44) {
148 darkify_switch_trigger();
149 }
150 };
151 }
152 }
153
154 function darkify_init_os_mode_change_listener() {
155 if (darkify_is_this_admin_panel === "0" && darkify_enable_os_aware === "1") {
156 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
157 const mode = event.matches ? "dark" : "light";
158 const htmlElement = document.getElementsByTagName("html")[0];
159 if (mode === "dark") {
160 htmlElement.classList.add("darkify_dark_mode_enabled");
161 } else if (mode === "light") {
162 htmlElement.classList.remove("darkify_dark_mode_enabled");
163 }
164
165 darkify_change_state();
166 });
167 }
168 }
169
170 function darkify_init_draggable_floating_switch() {
171 if (darkify_enable_switch_dragging === "1") {
172 const switchElement = document.getElementById("darkify_switch_" + darkify_switch_unique_id);
173
174 let topPosition = localStorage.darkify_draggable_switch_top || "not_set";
175 let leftPosition = localStorage.darkify_draggable_switch_left || "not_set";
176
177 let windowHeight = document.documentElement.clientHeight - switchElement.clientHeight;
178 let windowWidth = document.documentElement.clientWidth - switchElement.clientWidth;
179
180 if (topPosition !== "not_set" && leftPosition !== "not_set") {
181 switchElement.style.bottom = "unset";
182 switchElement.style.right = "unset";
183 switchElement.style.top = topPosition + "px";
184 switchElement.style.left = leftPosition + "px";
185 }
186
187 window.addEventListener("resize", event => {
188 if (topPosition !== "not_set" && leftPosition !== "not_set") {
189 windowHeight = document.documentElement.clientHeight - switchElement.clientHeight;
190 windowWidth = document.documentElement.clientWidth - switchElement.clientWidth;
191
192 if (switchElement.offsetLeft > windowWidth) {
193 switchElement.style.left = windowWidth + "px";
194 }
195
196 if (switchElement.offsetTop > windowHeight) {
197 switchElement.style.top = windowHeight + "px";
198 }
199 }
200 });
201
202 switchElement.onmousedown = function (mouseEvent) {
203 mouseEvent = mouseEvent || window.event;
204 mouseEvent.preventDefault();
205
206 let startX = 0;
207 let startY = 0;
208 let offsetX = 0;
209 let offsetY = 0;
210 let newPositionTop = 0;
211 let newPositionLeft = 0;
212
213 startX = mouseEvent.clientX;
214 startY = mouseEvent.clientY;
215
216 document.onmouseup = function () {
217 document.onmouseup = null;
218 document.onmousemove = null;
219
220 localStorage.darkify_draggable_switch_top = switchElement.offsetTop;
221 localStorage.darkify_draggable_switch_left = switchElement.offsetLeft;
222 };
223
224 document.onmousemove = function (moveEvent) {
225 moveEvent = moveEvent || window.event;
226 moveEvent.preventDefault();
227
228 offsetX = startX - moveEvent.clientX;
229 offsetY = startY - moveEvent.clientY;
230
231 startX = moveEvent.clientX;
232 startY = moveEvent.clientY;
233
234 newPositionTop = switchElement.offsetTop - offsetY;
235 newPositionLeft = switchElement.offsetLeft - offsetX;
236
237 if (
238 newPositionTop <= windowHeight &&
239 newPositionLeft <= windowWidth &&
240 newPositionTop >= 0 &&
241 newPositionLeft >= 0
242 ) {
243 switchElement.style.bottom = "unset";
244 switchElement.style.right = "unset";
245 switchElement.style.top = newPositionTop + "px";
246 switchElement.style.left = newPositionLeft + "px";
247 }
248 };
249 };
250 }
251 }
252 function darkify_init_alternative_dark_mode_switch() {
253 if (darkify_alternative_dark_mode_switch.length > 0) {
254 const elements = document.querySelectorAll(darkify_alternative_dark_mode_switch);
255 for (let i = 0; i < elements.length; i++) {
256 const element = elements[i];
257 element.addEventListener("click", () => {
258 darkify_switch_trigger();
259 });
260 }
261 }
262 }
263
264 function get_bg_color_to_preserve(element, fromDataset) {
265 let color = window.getComputedStyle(element, null).backgroundColor;
266 if (!fromDataset) {
267 color = element.dataset.darkify_preserved_bg;
268 }
269 if (
270 (color === "transparent" ||
271 color === "rgba(0, 0, 0, 0)" ||
272 color === "rgba(255,255,255,0)") &&
273 element.parentNode.nodeType === 1
274 ) {
275 color = get_bg_color_to_preserve(element.parentNode, false);
276 } else if (
277 element.parentNode.nodeType === 1 &&
278 element.parentNode.hasAttribute("data-darkify_preserved_bg") &&
279 window.getComputedStyle(element.parentNode, null).backgroundColor === color
280 ) {
281 color = get_bg_color_to_preserve(element.parentNode, false);
282 }
283 return color;
284 }
285
286 function get_txt_color_to_preserve(element, fromDataset) {
287 let color = window.getComputedStyle(element, null).color;
288 if (!fromDataset) {
289 color = element.dataset.darkify_preserved_color;
290 }
291 if (
292 (color === "transparent" ||
293 color === "rgba(0, 0, 0, 0)" ||
294 color === "rgba(255,255,255,0)") &&
295 element.parentNode.nodeType === 1
296 ) {
297 color = get_txt_color_to_preserve(element.parentNode, false);
298 } else if (
299 element.parentNode.nodeType === 1 &&
300 element.parentNode.hasAttribute("data-darkify_preserved_color") &&
301 window.getComputedStyle(element.parentNode, null).color === color
302 ) {
303 color = get_txt_color_to_preserve(element.parentNode, false);
304 }
305 return color;
306 }
307
308 function darkify_darken_bg_image(element, level) {
309 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
310 if (
311 window.getComputedStyle(element, null).backgroundImage !== "none" &&
312 window.getComputedStyle(element, null).backgroundImage.includes("url") &&
313 !window.getComputedStyle(element, null).backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
314 ) {
315 element.style.setProperty(
316 "background-image",
317 "linear-gradient(rgba(0, 0, 0, " + level + "), rgba(0, 0, 0, " + level + ")), " +
318 window.getComputedStyle(element, null).backgroundImage
319 );
320 }
321 } else if (
322 window.getComputedStyle(element, null).backgroundImage !== "none" &&
323 window.getComputedStyle(element, null).backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
324 ) {
325 element.style.setProperty(
326 "background-image",
327 window.getComputedStyle(element, null).backgroundImage.replace(
328 "linear-gradient(rgba(0, 0, 0, " + level + "), rgba(0, 0, 0, " + level + ")), ",
329 ""
330 )
331 );
332 }
333 }
334
335 function darkify_img_is_disallowed_for_brightness_and_grayscale(element, type) {
336 if (type === "brightness") {
337 if (darkify_disallowed_low_brightness_images_arr.length > 0) {
338 for (let i = 0; i < darkify_disallowed_low_brightness_images_arr.length; i++) {
339 if (darkify_disallowed_low_brightness_images_arr[i].trim().length > 0) {
340 const url = darkify_disallowed_low_brightness_images_arr[i];
341 const pathname = new URL(url).pathname;
342
343 if (element.getAttribute("src") != null && element.getAttribute("src").includes(pathname)) {
344 return true;
345 }
346
347 if (
348 element.getAttribute("srcset") != null &&
349 element.getAttribute("srcset").includes(pathname)
350 ) {
351 return true;
352 }
353 }
354 }
355 }
356 } else if (type === "grayscale") {
357 if (darkify_disallowed_grayscale_images_arr.length > 0) {
358 for (let i = 0; i < darkify_disallowed_grayscale_images_arr.length; i++) {
359 if (darkify_disallowed_grayscale_images_arr[i].trim().length > 0) {
360 const url = darkify_disallowed_grayscale_images_arr[i];
361 const pathname = new URL(url).pathname;
362
363 if (element.getAttribute("src") != null && element.getAttribute("src").includes(pathname)) {
364 return true;
365 }
366
367 if (
368 element.getAttribute("srcset") != null &&
369 element.getAttribute("srcset").includes(pathname)
370 ) {
371 return true;
372 }
373 }
374 }
375 }
376 }
377 return false;
378 }
379 function darkify_img_brightness_and_grayscale(element) {
380 var disallowedBrightness = darkify_img_is_disallowed_for_brightness_and_grayscale(element, "brightness");
381 var disallowedGrayscale = darkify_img_is_disallowed_for_brightness_and_grayscale(element, "grayscale");
382
383 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
384 if (!element.classList.contains("darkify_changed_brightness_and_grayscale")) {
385 element.dataset.darkify_preserved_filter = element.style.filter;
386 element.classList.add("darkify_changed_brightness_and_grayscale");
387
388 if (
389 darkify_enable_low_image_brightness === "1" &&
390 darkify_enable_image_grayscale === "1" &&
391 !disallowedBrightness &&
392 !disallowedGrayscale
393 ) {
394 element.style.filter =
395 "brightness(" +
396 darkify_image_brightness_to +
397 "%)" +
398 " " +
399 "grayscale(" +
400 darkify_image_grayscale_to +
401 "%)";
402 } else {
403 if (darkify_enable_low_image_brightness === "1" && !disallowedBrightness) {
404 element.style.filter = "brightness(" + darkify_image_brightness_to + "%)";
405 } else if (darkify_enable_image_grayscale === "1" && !disallowedGrayscale) {
406 element.style.filter = "grayscale(" + darkify_image_grayscale_to + "%)";
407 }
408 }
409 }
410 } else if (element.classList.contains("darkify_changed_brightness_and_grayscale")) {
411 element.style.filter = element.dataset.darkify_preserved_filter;
412 element.classList.remove("darkify_changed_brightness_and_grayscale");
413 delete element.dataset.darkify_preserved_filter;
414 }
415 }
416
417 function darkify_invert_image(element) {
418 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
419 if (
420 element.getAttribute("src") != null ||
421 element.getAttribute("srcset") != null ||
422 window.getComputedStyle(element, null).backgroundImage != null
423 ) {
424 for (let i = 0; i < darkify_invert_images_allowed_urls_arr.length; i++) {
425 const url = new URL(darkify_invert_images_allowed_urls_arr[i]).pathname;
426 if (element.getAttribute("src") != null && element.getAttribute("src").includes(url)) {
427 element.style.filter = "invert(1)";
428 element.classList.add("darkify_inverted_image");
429 }
430 if (
431 element.getAttribute("srcset") != null &&
432 element.getAttribute("srcset").includes(url)
433 ) {
434 element.style.filter = "invert(1)";
435 element.classList.add("darkify_inverted_image");
436 }
437 if (
438 window.getComputedStyle(element, null).backgroundImage != null &&
439 window.getComputedStyle(element, null).backgroundImage.includes(url)
440 ) {
441 element.style.filter = "invert(1)";
442 element.classList.add("darkify_inverted_image");
443 }
444 }
445 }
446 } else if (element.classList.contains("darkify_inverted_image")) {
447 element.style.filter = element.style.filter.replace("invert(1)", "");
448 element.classList.remove("darkify_inverted_image");
449 }
450 }
451
452 function darkify_replace_image(element, images) {
453 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
454 for (let i = 0; i < images.length; i++) {
455 const normalImage = images[i].normal_image;
456 const normalImagePath = new URL(normalImage).pathname;
457 const darkImage = images[i].dark_image;
458 const darkImagePath = new URL(darkImage).pathname;
459
460 if (element.getAttribute("src") != null && element.getAttribute("src").includes(normalImagePath)) {
461 element.src = darkImage;
462 element.classList.add("darkify_replaced_image");
463 }
464 if (
465 element.getAttribute("srcset") != null &&
466 element.getAttribute("srcset").includes(normalImagePath)
467 ) {
468 element.srcset = darkImage;
469 element.classList.add("darkify_replaced_image");
470 }
471 if (
472 window.getComputedStyle(element, null).backgroundImage != null &&
473 window.getComputedStyle(element, null).backgroundImage.includes(normalImagePath)
474 ) {
475 element.style.backgroundImage = "url('" + darkImage + "')";
476 element.classList.add("darkify_replaced_image");
477 }
478 }
479 } else {
480 if (element.classList.contains("darkify_replaced_image")) {
481 for (let i = 0; i < images.length; i++) {
482 const normalImage = images[i].normal_image;
483 const normalImagePath = new URL(normalImage).pathname;
484 const darkImage = images[i].dark_image;
485 const darkImagePath = new URL(darkImage).pathname;
486
487 if (element.getAttribute("src") != null && element.getAttribute("src").includes(darkImagePath)) {
488 element.src = normalImage;
489 element.classList.remove("darkify_replaced_image");
490 }
491 if (
492 element.getAttribute("srcset") != null &&
493 element.getAttribute("srcset").includes(darkImagePath)
494 ) {
495 element.srcset = normalImage;
496 element.classList.remove("darkify_replaced_image");
497 }
498 if (
499 window.getComputedStyle(element, null).backgroundImage != null &&
500 window.getComputedStyle(element, null).backgroundImage.includes(darkImagePath)
501 ) {
502 element.style.backgroundImage = "url('" + normalImage + "')";
503 element.classList.remove("darkify_replaced_image");
504 }
505 }
506 }
507 }
508 }
509 function darkify_invert_inline_svg(element) {
510 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
511 element.style.filter = "invert(1)";
512 element.classList.add("darkify_inverted_inline_svg");
513 } else if (element.classList.contains("darkify_inverted_inline_svg")) {
514 element.style.filter = element.style.filter.replace("invert(1)", "");
515 element.classList.remove("darkify_inverted_inline_svg");
516 }
517 }
518
519 function darkify_video_brightness_and_grayscale(element) {
520 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
521 if (!element.classList.contains("darkify_changed_video_brightness_and_grayscale")) {
522 element.dataset.darkify_preserved_filter = element.style.filter;
523 element.classList.add("darkify_changed_video_brightness_and_grayscale");
524
525 if (darkify_enable_low_video_brightness === "1" && darkify_enable_video_grayscale === "1") {
526 element.style.filter =
527 "brightness(" +
528 darkifyVideoBrightnessTo +
529 "%)" +
530 " " +
531 "grayscale(" +
532 darkifyVideoGrayscaleTo +
533 "%)";
534 } else {
535 if (darkify_enable_low_video_brightness === "1") {
536 element.style.filter = "brightness(" + darkifyVideoBrightnessTo + "%)";
537 } else if (darkify_enable_video_grayscale === "1") {
538 element.style.filter = "grayscale(" + darkifyVideoGrayscaleTo + "%)";
539 }
540 }
541 }
542 } else if (element.classList.contains("darkify_changed_video_brightness_and_grayscale")) {
543 element.style.filter = element.dataset.darkify_preserved_filter;
544 element.classList.remove("darkify_changed_video_brightness_and_grayscale");
545 delete element.dataset.darkify_preserved_filter;
546 }
547 }
548
549 function darkify_replace_video(videoElement, videos) {
550 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
551 for (let i = 0; i < videos.length; i++) {
552 const normalVideo = videos[i].normal_video;
553 const normalVideoPath = new URL(normalVideo).pathname;
554 const darkVideo = videos[i].dark_video;
555 const darkVideoPath = new URL(darkVideo).pathname;
556
557 if (
558 videoElement.getAttribute("src") != null &&
559 videoElement.getAttribute("src").includes(normalVideoPath)
560 ) {
561 videoElement.src = darkVideo;
562 videoElement.classList.add("darkify_replaced_video");
563 }
564
565 if (videoElement.querySelectorAll("source") != null) {
566 let sources = videoElement.querySelectorAll("source");
567 for (let j = 0; j < sources.length; j++) {
568 if (
569 sources[j].getAttribute("src") != null &&
570 sources[j].getAttribute("src").includes(normalVideoPath)
571 ) {
572 sources[j].src = darkVideo + "?_=" + Date.now();
573 videoElement.classList.add("darkify_replaced_video");
574 videoElement.load();
575 }
576 }
577 }
578 }
579 } else {
580 if (videoElement.classList.contains("darkify_replaced_video")) {
581 for (let i = 0; i < videos.length; i++) {
582 const normalVideo = videos[i].normal_video;
583 const normalVideoPath = new URL(normalVideo).pathname;
584 const darkVideo = videos[i].dark_video;
585 const darkVideoPath = new URL(darkVideo).pathname;
586
587 if (
588 videoElement.getAttribute("src") != null &&
589 videoElement.getAttribute("src").includes(darkVideoPath)
590 ) {
591 videoElement.src = normalVideo;
592 videoElement.classList.remove("darkify_replaced_video");
593 }
594
595 if (videoElement.querySelectorAll("source") != null) {
596 let sources = videoElement.querySelectorAll("source");
597 for (let j = 0; j < sources.length; j++) {
598 if (
599 sources[j].getAttribute("src") != null &&
600 sources[j].getAttribute("src").includes(darkVideoPath)
601 ) {
602 sources[j].src = normalVideo + "?_=" + Date.now();
603 videoElement.classList.remove("darkify_replaced_video");
604 videoElement.load();
605 }
606 }
607 }
608 }
609 }
610 }
611 }
612
613 function darkify_fix_background_color_alpha(element) {
614 if (document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled")) {
615 if (element.hasAttribute("data-darkify_alpha_bg")) {
616 const alphaValue = element.dataset.darkify_alpha_bg
617 .replace("rgba(", "")
618 .replace(")", "")
619 .split(",")[3]
620 .trim();
621 const backgroundColor = window.getComputedStyle(element, null).backgroundColor;
622
623 if (!backgroundColor.includes("rgba")) {
624 element.style.setProperty(
625 "background-color",
626 backgroundColor.replace(")", ", " + alphaValue + ")").replace("rgb", "rgba"),
627 "important"
628 );
629 }
630 }
631 } else if (element.hasAttribute("data-darkify_alpha_bg")) {
632 element.style.backgroundColor = "";
633 }
634 }
635 function darkify_elements_force_to_correct(element) {
636 if (
637 document.getElementsByTagName("html")[0].classList.contains("darkify_dark_mode_enabled") &&
638 element.hasAttribute("data-darkify_preserved_bg") &&
639 element.hasAttribute("data-darkify_preserved_color")
640 ) {
641 element.style.setProperty("background-color", element.dataset.darkify_preserved_bg);
642 element.style.setProperty("color", element.dataset.darkify_preserved_color);
643 }
644 }
645
646 function darkify_implement_secondary_bg() {
647 let maxAreaElement = null;
648 let maxArea = 0;
649
650 const elements = document.querySelectorAll(
651 "* :not(head, title, link, meta, script, style, defs, filter)"
652 );
653
654 for (let i = 0; i < elements.length; i++) {
655 const element = elements[i];
656 if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
657 const secondaryBgColor = element.dataset.darkify_secondary_bg_finder;
658 if (secondaryBgColor !== "transparent" && secondaryBgColor !== "rgba(0, 0, 0, 0)") {
659 const boundingRect = element.getBoundingClientRect();
660 const area = boundingRect.width * boundingRect.height;
661 if (area > maxArea) {
662 maxArea = area;
663 maxAreaElement = secondaryBgColor;
664 }
665 }
666 }
667 }
668
669 for (let i = 0; i < elements.length; i++) {
670 const element = elements[i];
671 if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
672 if (
673 element.classList.contains("darkify_style_all") ||
674 element.classList.contains("darkify_style_bg_txt") ||
675 element.classList.contains("darkify_style_bg_border") ||
676 element.classList.contains("darkify_style_bg")
677 ) {
678 const isDifferentSecondaryBg = maxAreaElement !== element.dataset.darkify_secondary_bg_finder;
679 if (isDifferentSecondaryBg) {
680 element.classList.add("darkify_style_secondary_bg");
681 }
682 }
683 delete element.dataset.darkify_secondary_bg_finder;
684 }
685 }
686
687 darkify_secondary_bg_color = maxAreaElement;
688 }
689
690 function darkify_recheck_on_css_loaded_later() {
691 document.querySelectorAll(".darkify_style_txt_border, .darkify_style_txt, .darkify_style_border").forEach(function (element) {
692 const computedStyle = window.getComputedStyle(element, null);
693 const backgroundColor = computedStyle.backgroundColor;
694 if (backgroundColor !== "rgba(0, 0, 0, 0)" && backgroundColor !== "rgba(255, 255, 255, 0)") {
695 darkify_process_element(element);
696 }
697 });
698 }
699
700 function darkify_check_preloading() {
701 let isPreloaded = false;
702 const lastState = localStorage.darkify_last_state ? localStorage.darkify_last_state : "not_set";
703 const adminPanelLastState = localStorage.darkify_admin_panel_last_state
704 ? localStorage.darkify_admin_panel_last_state
705 : "not_set";
706
707 if (darkify_is_this_admin_panel === "1") {
708 if (adminPanelLastState === "1") {
709 isPreloaded = true;
710 }
711 } else {
712 if (lastState === "1" || lastState === "0") {
713 if (lastState === "1") {
714 isPreloaded = true;
715 }
716 } else {
717 if (darkify_enable_default_dark_mode === "1") {
718 isPreloaded = true;
719 }
720 if (darkify_enable_time_based_dark === "1") {
721 const currentDate = new Date();
722 const darkStart = new Date();
723 const darkStop = new Date();
724 darkStart.setHours(parseInt(darkify_time_based_dark_start.split(":")[0]));
725 darkStart.setMinutes(parseInt(darkify_time_based_dark_start.split(":")[1]));
726 darkStop.setHours(parseInt(darkify_time_based_dark_stop.split(":")[0]));
727 darkStop.setMinutes(parseInt(darkify_time_based_dark_stop.split(":")[1]));
728
729 if (parseInt(darkify_time_based_dark_stop.split(":")[0]) >= parseInt(darkify_time_based_dark_start.split(":")[0])) {
730 if (currentDate.getTime() > darkStart.getTime() && currentDate.getTime() < darkStop.getTime()) {
731 isPreloaded = true;
732 }
733 } else if (currentDate.getHours() > 12) {
734 if (currentDate.getTime() > darkStart.getTime() && currentDate.getTime() > darkStop.getTime()) {
735 isPreloaded = true;
736 }
737 } else if (currentDate.getTime() < darkStart.getTime() && currentDate.getTime() < darkStop.getTime()) {
738 isPreloaded = true;
739 }
740 }
741 }
742 }
743
744 if (
745 darkify_is_this_admin_panel === "0" &&
746 darkify_enable_os_aware === "1" &&
747 window.matchMedia &&
748 window.matchMedia("(prefers-color-scheme: dark)").matches &&
749 lastState !== "1" &&
750 lastState !== "0"
751 ) {
752 isPreloaded = true;
753 }
754
755 return isPreloaded;
756 }
757
758 function darkify_process_element(element) {
759 var computedStyle = window.getComputedStyle(element, null);
760 var old_transition = "";
761
762 if (computedStyle.transition !== "all 0s ease 0s") {
763 old_transition = computedStyle.transition;
764 element.style.setProperty("transition", "none");
765 }
766
767 if (
768 element.classList.contains("darkify_style_all") ||
769 element.classList.contains("darkify_style_bg_txt") ||
770 element.classList.contains("darkify_style_bg_border") ||
771 element.classList.contains("darkify_style_txt_border") ||
772 element.classList.contains("darkify_style_bg") ||
773 element.classList.contains("darkify_style_txt") ||
774 element.classList.contains("darkify_style_border") ||
775 element.classList.contains("darkify_style_secondary_bg")
776 ) {
777 element.classList.remove("darkify_style_all");
778 element.classList.remove("darkify_style_bg_txt");
779 element.classList.remove("darkify_style_bg_border");
780 element.classList.remove("darkify_style_txt_border");
781 element.classList.remove("darkify_style_bg");
782 element.classList.remove("darkify_style_txt");
783 element.classList.remove("darkify_style_border");
784 element.classList.remove("darkify_style_secondary_bg");
785 }
786
787 var nodeName = element.nodeName.toLowerCase();
788 var backgroundColor = computedStyle.backgroundColor;
789 var color = computedStyle.color;
790 var borderColor = computedStyle.borderColor;
791 var backgroundImage = computedStyle.backgroundImage;
792
793 if (nodeName === "body" && (backgroundColor === "rgba(0, 0, 0, 0)" || backgroundColor === "rgba(255, 255, 255, 0)")) {
794 element.style.setProperty("background-color", "rgb(255, 255, 255)");
795 backgroundColor = window.getComputedStyle(element, null).backgroundColor;
796 }
797 if (darkify_disallowed_elements_force_to_correct === "1" || darkify_allowed_elements_force_to_correct === "1") {
798 if (typeof element.style !== "undefined") {
799 var preservedBackgroundColor = get_bg_color_to_preserve(element, true);
800 if (preservedBackgroundColor === "rgba(0, 0, 0, 0)" || preservedBackgroundColor === "rgba(255, 255, 255, 0)") {
801 preservedBackgroundColor = "rgb(255, 255, 255)";
802 }
803 element.dataset.darkify_preserved_bg = preservedBackgroundColor;
804 element.dataset.darkify_preserved_color = get_txt_color_to_preserve(element, true);
805 if (darkify_allowed_elements_raw.length > 0 && element.matches(darkify_allowed_elements_raw) && darkify_allowed_elements_force_to_correct === "1") {
806 darkify_elements_force_to_correct(element);
807 }
808 if (darkify_disallowed_elements_raw.length > 0 && element.matches(darkify_disallowed_elements_raw) && darkify_disallowed_elements_force_to_correct === "1") {
809 darkify_elements_force_to_correct(element);
810 }
811 }
812 }
813 if (darkify_allowed_elements.length > 0) {
814 if (!element.matches(darkify_allowed_elements)) {
815 if (old_transition !== "") {
816 element.style.setProperty("transition", old_transition);
817 }
818 element.classList.add("darkify_processed");
819 return;
820 }
821 }
822 if (darkify_disallowed_elements.length > 0) {
823 if (element.matches(darkify_disallowed_elements)) {
824 if (old_transition !== "") {
825 element.style.setProperty("transition", old_transition);
826 }
827 element.classList.add("darkify_processed");
828 return;
829 }
830 }
831 var has_background_img_url = false;
832 if (backgroundImage !== "none" && backgroundImage.includes("url")) {
833 has_background_img_url = true;
834 if (darkify_enable_bg_image_darken === "1") {
835 darkify_darken_bg_image(element, darken_level);
836 }
837 }
838 if (backgroundColor !== "rgba(0, 0, 0, 0)" && backgroundColor !== "rgba(255, 255, 255, 0)" && !has_background_img_url) {
839 if (!element.hasAttribute("data-darkify_secondary_bg_finder")) {
840 element.dataset.darkify_secondary_bg_finder = backgroundColor;
841 }
842 if (darkify_secondary_bg_color !== "") {
843 var isSecondaryBgColorDifferent = darkify_secondary_bg_color !== element.dataset.darkify_secondary_bg_finder;
844 if (isSecondaryBgColorDifferent) {
845 element.classList.add("darkify_style_secondary_bg");
846 }
847 delete element.dataset.darkify_secondary_bg_finder;
848 }
849 }
850 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) {
851 element.classList.add("darkify_style_all");
852 } else {
853 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) {
854 element.classList.add("darkify_style_bg_txt");
855 } else {
856 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) {
857 element.classList.add("darkify_style_bg_border");
858 } else {
859 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)") {
860 element.classList.add("darkify_style_txt_border");
861 } else {
862 if (backgroundColor !== "rgba(0, 0, 0, 0)" && backgroundColor !== "rgba(255, 255, 255, 0)" && has_background_img_url === false) {
863 element.classList.add("darkify_style_bg");
864 } else {
865 if (color !== "rgba(0, 0, 0, 0)" && color !== "rgba(255, 255, 255, 0)") {
866 element.classList.add("darkify_style_txt");
867 } else if (borderColor !== "rgba(0, 0, 0, 0)" && borderColor !== "rgba(255, 255, 255, 0)") {
868 element.classList.add("darkify_style_border");
869 }
870 }
871 }
872 }
873 }
874 }
875 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")) {
876 element.classList.add("darkify_style_bg");
877 }
878
879 if (nodeName === "a") {
880 element.classList.add("darkify_style_link");
881 }
882
883 if (nodeName === "input" || nodeName === "select" || nodeName === "textarea") {
884 element.classList.add("darkify_style_form_element");
885 }
886
887 if (nodeName === "button") {
888 element.classList.add("darkify_style_button");
889 }
890
891 if ((darkify_enable_low_image_brightness === "1" || darkify_enable_image_grayscale === "1") && nodeName === "img") {
892 darkify_img_brightness_and_grayscale(element);
893 }
894
895 if (darkify_enable_invert_images === "1" && darkify_invert_images_allowed_urls_arr.length > 0) {
896 darkify_invert_image(element);
897 }
898
899 if (darkify_image_replacements_arr.length > 0) {
900 darkify_replace_image(element, darkify_image_replacements_arr);
901 }
902
903 if (darkify_enable_invert_inline_svg === "1" && nodeName === "svg") {
904 darkify_invert_inline_svg(element);
905 }
906
907 if (darkify_enable_low_video_brightness === "1" || darkify_enable_video_grayscale === "1") {
908 if (nodeName === "video") {
909 darkify_video_brightness_and_grayscale(element);
910 }
911
912 if (nodeName === "iframe") {
913 const srcAttribute = element.getAttribute("src");
914 if (srcAttribute !== null) {
915 if (srcAttribute.includes("youtube") || srcAttribute.includes("vimeo") || srcAttribute.includes("dailymotion")) {
916 darkify_video_brightness_and_grayscale(element);
917 }
918 }
919 }
920 }
921
922 if (darkify_video_replacements_arr.length > 0) {
923 if (nodeName === "video") {
924 darkify_replace_video(element, darkify_video_replacements_arr);
925 }
926
927 if (nodeName === "iframe") {
928 const srcAttribute = element.getAttribute("src");
929 if (srcAttribute !== null) {
930 if (srcAttribute.includes("youtube") || srcAttribute.includes("vimeo") || srcAttribute.includes("dailymotion")) {
931 darkify_replace_video(element, darkify_video_replacements_arr);
932 }
933 }
934 }
935 }
936
937 if (backgroundColor.includes("rgba")) {
938 element.dataset.darkify_alpha_bg = backgroundColor;
939 darkify_fix_background_color_alpha(element);
940 }
941
942 if (old_transition !== "") {
943 setTimeout(function () {
944 element.style.setProperty("transition", old_transition);
945 }, 0);
946 }
947
948 setTimeout(function () {
949 elements_class_changed.observe(element, {
950 attributes: true,
951 attributeFilter: ["class"]
952 });
953 }, 0);
954
955 element.classList.add("darkify_processed");
956 }
957
958 function darkify_init_processes() {
959 has_process_run_at_least_once = true;
960 document.querySelectorAll("* :not(head, title, link, meta, script, style, defs, filter, .darkify_processed)").forEach(function (element) {
961 darkify_process_element(element);
962 });
963 }
964
965 function darkify_init_observer() {
966 darkify_observer.observe(document, {
967 attributes: false,
968 childList: true,
969 characterData: false,
970 subtree: true
971 });
972
973 dark_mode_status_changed.observe(document.getElementsByTagName("html")[0], {
974 attributes: true
975 });
976
977 if (document.readyState !== "loading") {
978 if (!has_process_run_at_least_once) {
979 darkify_init_processes();
980 }
981 darkify_implement_secondary_bg();
982 darkify_recheck_on_css_loaded_later();
983 } else {
984 document.addEventListener("DOMContentLoaded", function () {
985 if (!has_process_run_at_least_once) {
986 darkify_init_processes();
987 }
988 darkify_implement_secondary_bg();
989 darkify_recheck_on_css_loaded_later();
990 });
991 }
992 }
993
994 if (darkify_check_preloading()) {
995 document.getElementsByTagName("html")[0].classList.add("darkify_dark_mode_enabled");
996 darkify_init_observer();
997 }
998