respect browser/os dark mode preference

html/header.html

@@ -1,6 +1,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="Description" content="jfa-go, a better way to manage Jellyfin users.">
+<meta name="color-scheme" content="dark light">
 
 <link rel="apple-touch-icon" sizes="180x180" href="{{ .urlBase }}/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ .urlBase }}/favicon-32x32.png">

package.json

@@ -25,6 +25,5 @@
     "remixicon": "^2.5.0",
     "remove-markdown": "^0.3.0",
     "typescript": "^4.0.3"
-  },
-  "devDependencies": {}
+  }
 }

ts/modules/theme.ts

@@ -12,5 +12,8 @@ export function loadTheme() {
     } else if (theme == "light") {
         document.documentElement.classList.add('light-theme');
         document.documentElement.classList.remove('dark-theme');
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
+        document.documentElement.classList.add('dark-theme');
+        document.documentElement.classList.remove('light-theme');
     }
 }