Fixed dark mode if initiated by the device

torvos · Jul 24, 2024 · 30684a4 · 30684a4
1 parent 03a792f
commit 30684a4
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/articles/website.html b/articles/website.html
@@ -141,23 +141,37 @@ <h5>
             <script>
 
                 function updateImages() {
-                    if (localStorage.getItem('colorScheme') == "dark") {
-                        document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png";
-                        document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png";
-                    }else{
-                        document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png";
-                        document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png";
-                    }
+                    setTimeout(function (){
+                        if (localStorage.getItem('colorScheme') == "auto") {
+                            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                                document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png";
+                                document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png";
+                            }
+                            else {
+                                document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png";
+                                document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png";
+                            }
+                        } else if (localStorage.getItem('colorScheme') == "dark") {
+                            document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png";
+                            document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png";
+                        } else {
+                            document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png";
+                            document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png";
+                        }
+                    }, 1); 
                 }
 
                 updateImages();
 
                 document.addEventListener('wa-select', event => {
                     const menu = event.target.closest('#color-scheme-selector wa-menu');
                     if (!menu) return;
-                    setTimeout(function (){
-                        updateImages();
-                    }, 1); 
+                    updateImages();
+                });
+
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                    const newColorScheme = event.matches ? "dark" : "light";
+                    updateImages();
                 });
 
                 document.addEventListener('keydown', event => {
@@ -166,10 +180,8 @@ <h5>
                         !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
                     ) {
                         event.preventDefault();
-                        setTimeout(function (){
-                            updateImages();
-                        }, 1); 
-                    }
+                        updateImages();
+                     }
                 });                
 
             </script>