From d8a8c3d0a012ff1ce7abc07c5eae5842256eefc7 Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Sun, 20 Oct 2024 11:15:09 +0700
Subject: [PATCH] fix: theme

---
 js/offline.js |   4 +-
 js/theme.js   | 102 +++++++++++++++++++++++++++++++-------------------
 2 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/js/offline.js b/js/offline.js
index 64d52bd..62f674d 100644
--- a/js/offline.js
+++ b/js/offline.js
@@ -33,13 +33,13 @@ export const offline = (() => {
     const setOffline = () => {
         alert.firstElementChild.firstElementChild.classList.remove('bg-success');
         alert.firstElementChild.firstElementChild.classList.add('bg-danger');
-        alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tidak tersedia';
+        alert.firstElementChild.firstElementChild.firstElementChild.innerHTML = '<i class="fa-solid fa-ban me-1"></i>Koneksi tidak tersedia';
     };
 
     const setOnline = () => {
         alert.firstElementChild.firstElementChild.classList.remove('bg-danger');
         alert.firstElementChild.firstElementChild.classList.add('bg-success');
-        alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tersedia kembali';
+        alert.firstElementChild.firstElementChild.firstElementChild.innerHTML = '<i class="fa-solid fa-cloud me-1"></i>Koneksi tersedia kembali';
     };
 
     const onOffline = () => {
diff --git a/js/theme.js b/js/theme.js
index 485febe..b235b28 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -6,6 +6,8 @@ export const theme = (() => {
     const THEME_LIGHT = 'light';
 
     let isAuto = false;
+    let observerLight = null;
+    let observerDark = null;
     const theme = storage('theme');
 
     const toLight = (element) => {
@@ -92,49 +94,29 @@ export const theme = (() => {
         }
     };
 
-    const observerLight = new IntersectionObserver((es, o) => {
-        es.forEach((e) => {
-            if (e.isIntersecting) {
-                toLight(e.target);
-            }
-        });
-
-        es.forEach((e) => {
-            if (!e.isIntersecting) {
-                toLight(e.target);
-            }
-        });
-
-        o.disconnect();
-    });
-
-    const observerDark = new IntersectionObserver((es, o) => {
-        es.forEach((e) => {
-            if (e.isIntersecting) {
-                toDark(e.target);
-            }
-        });
-
-        es.forEach((e) => {
-            if (!e.isIntersecting) {
-                toDark(e.target);
-            }
-        });
-
-        o.disconnect();
-    });
-
     const onLight = () => {
         theme.set('active', THEME_LIGHT);
         document.documentElement.setAttribute('data-bs-theme', THEME_LIGHT);
 
         const elements = document.querySelectorAll('.text-light, .btn-theme-light, .bg-dark, .bg-black, .bg-theme-dark, .color-theme-black, .btn-outline-light, .bg-cover-black');
+
+        let countChange = 0;
         elements.forEach((el) => {
-            observerLight.observe(el);
+            el.addEventListener('transitionend', (e) => {
+                if (el.isEqualNode(e.target) && (e.propertyName === 'background-color' || e.propertyName === 'color')) {
+                    countChange += 1;
+
+                    if (elements.length === countChange) {
+                        // --bs-body-bg
+                        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff');
+                    }
+                }
+            });
         });
 
-        // --bs-body-bg
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff');
+        elements.forEach((el) => {
+            observerLight.observe(el);
+        });
     };
 
     const onDark = () => {
@@ -142,12 +124,24 @@ export const theme = (() => {
         document.documentElement.setAttribute('data-bs-theme', THEME_DARK);
 
         const elements = document.querySelectorAll('.text-dark, .btn-theme-dark, .bg-light, .bg-white, .bg-theme-light, .color-theme-white, .btn-outline-dark, .bg-cover-white');
+
+        let countChange = 0;
         elements.forEach((el) => {
-            observerDark.observe(el);
+            el.addEventListener('transitionend', (e) => {
+                if (el.isEqualNode(e.target) && (e.propertyName === 'background-color' || e.propertyName === 'color')) {
+                    countChange += 1;
+
+                    if (elements.length === countChange) {
+                        // --bs-body-bg
+                        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#212529');
+                    }
+                }
+            });
         });
 
-        // --bs-body-bg
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#212529');
+        elements.forEach((el) => {
+            observerDark.observe(el);
+        });
     };
 
     const isDarkMode = (onDark = null, onLight = null) => {
@@ -177,6 +171,38 @@ export const theme = (() => {
     };
 
     const init = () => {
+        observerLight = new IntersectionObserver((es, o) => {
+            es.forEach((e) => {
+                if (e.isIntersecting) {
+                    toLight(e.target);
+                }
+            });
+
+            es.forEach((e) => {
+                if (!e.isIntersecting) {
+                    toLight(e.target);
+                }
+            });
+
+            o.disconnect();
+        });
+
+        observerDark = new IntersectionObserver((es, o) => {
+            es.forEach((e) => {
+                if (e.isIntersecting) {
+                    toDark(e.target);
+                }
+            });
+
+            es.forEach((e) => {
+                if (!e.isIntersecting) {
+                    toDark(e.target);
+                }
+            });
+
+            o.disconnect();
+        });
+
         if (!theme.has('active')) {
             theme.set('active', THEME_LIGHT);