Fix darkmode

Author: RobiNN1

assets/js/scripts.js

@@ -201,52 +201,47 @@ if (search_form) {
 /**
  * Light / Dark mode
  */
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-    if (localStorage.theme === 'system' && event.matches) {
-        document.documentElement.classList.add('dark');
+const update_theme = () => {
+    const theme = localStorage.getItem('theme') || 'system';
+    let current_theme = theme;
+
+    if (theme === 'system') {
+        current_theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.setAttribute('color-theme', 'system');
     } else {
-        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('color-theme', theme);
     }
-});
 
-const update_theme = () => {
-    if (!('theme' in localStorage)) {
-        localStorage.theme = 'system';
-    }
+    document.documentElement.classList.toggle('dark', current_theme === 'dark');
 
-    switch (localStorage.theme) {
-        case 'system':
-            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                document.documentElement.classList.add('dark');
-            } else {
-                document.documentElement.classList.remove('dark');
-            }
-            break;
-        case 'dark':
-            document.documentElement.classList.add('dark');
-            break;
-        case 'light':
-            document.documentElement.classList.remove('dark');
-            break;
-    }
-}
+    const theme_colors = {light: '#fff', dark: '#1f2937'};
+    document.querySelector("meta[name='theme-color']").content = theme_colors[current_theme]
+};
 
-update_theme();
+const init_theme_switcher = () => {
+    const theme_switchers = document.querySelectorAll("[data-theme]");
 
-const theme_sw = document.querySelectorAll("[data-theme]");
+    theme_switchers.forEach(button => {
+        const theme = button.getAttribute('data-theme');
 
-theme_sw.forEach(button => {
-    let theme = button.getAttribute('data-theme');
+        button.addEventListener('click', () => {
+            localStorage.setItem('theme', theme);
+            update_theme();
+            theme_switchers.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+        });
 
-    button.addEventListener('click', () => {
-        localStorage.theme = theme;
-        update_theme();
-        theme_sw.forEach(btn => btn.classList.remove('active'));
+        if (theme === localStorage.getItem('theme')) {
+            button.classList.add('active');
+        }
+    });
 
-        button.classList.add('active');
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (localStorage.getItem('theme') === 'system') {
+            update_theme();
+        }
     });
+};
 
-    if (theme === localStorage.theme) {
-        button.classList.add('active');
-    }
-});
+update_theme();
+init_theme_switcher();

templates/layout.twig

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ site_title }} - phpCacheAdmin</title>
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon.png">
+    <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="assets/css/styles.css?v={{ version }}">
 
     {%- if colors -%}