fix: theme

dewanakl · Oct 20, 2024 · d8a8c3d · d8a8c3d
1 parent 66dcb4e
commit d8a8c3d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 40 deletions.
diff --git 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
@@ -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,62 +94,54 @@ 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 = () => {
         theme.set('active', THEME_DARK);
         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);