use media queries

static/css/colors.css

@@ -1,13 +1,25 @@
 :root {
-  --background-color: #f4e8e9;
-  --text-color: #333;
-  --link-color: #d291bc;
-  --container-bg: #fff7f8;
+  --background-color-light: #f4e8e9;
+  --text-color-light: #333;
+  --link-color-light: #d291bc;
+  --container-bg-light: #fff7f8;
+
+  --background-color-dark: #333;
+  --text-color-dark: #f4e8e9;
+  --link-color-dark: #b86b77;
+  --container-bg-dark: #424242;
 }
 
 [data-theme="DARK"] {
-  --background-color: #333;
-  --text-color: #f4e8e9;
-  --link-color: #b86b77;
-  --container-bg: #424242;
+  --background-color: var(--background-color-dark);
+  --text-color: var(--text-color-dark);
+  --link-color: var(--link-color-dark);
+  --container-bg: var(--container-bg-dark);
+}
+
+[data-theme="LIGHT"] {
+  --background-color: var(--background-color-light);
+  --text-color: var(--text-color-light);
+  --link-color: var(--link-color-light);
+  --container-bg: var(--container-bg-light);
 }

static/js/components/themeSwitcher.js

@@ -24,4 +24,4 @@ themeSwitcher.addEventListener("click", () =>
   setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
 );
 
-setTheme(localStorage.getItem("theme") ?? THEMES.LIGHT);
+setTheme(localStorage.getItem("theme") || THEMES.LIGHT);

static/js/util/setThemeBeforeRender.js

@@ -1,6 +1,8 @@
+const preferredMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+  ? "DARK"
+  : "LIGHT";
+localStorage.setItem("theme", localStorage.getItem("theme") || preferredMode);
+
 // sets theme before rendering & jquery loaded to prevent flashing of uninitialized theme
 // (ugly white background)
-document.documentElement.setAttribute(
-  "data-theme",
-  localStorage.getItem("theme"),
-);
+document.documentElement.setAttribute("data-theme", preferredMode);