Use CSS instead of JS for auto color theme detection

This enables clients who don't have JavaScript enabled to still use the
dark theme, by detecting it with a CSS @media query rather than with
JS. This only applies if disableThemeToggle is set and the default theme
is 'auto' or unset.

Author: kdkasad

assets/css/theme-vars.css

@@ -36,3 +36,22 @@
 .dark.list {
     background: var(--theme);
 }
+
+{{- if (and (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark")) .Site.Params.disableThemeToggle) }}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --theme: #1d1e20;
+        --entry: #2e2e33;
+        --primary: rgba(255, 255, 255, 0.84);
+        --secondary: rgba(255, 255, 255, 0.56);
+        --tertiary: rgba(255, 255, 255, 0.16);
+        --content: rgba(255, 255, 255, 0.74);
+        --hljs-bg: #2e2e33;
+        --code-bg: #37383e;
+        --border: #333;
+    }
+    .list {
+        background: var(--theme);
+    }
+}
+{{- end }}

layouts/partials/header.html

@@ -29,14 +29,6 @@
 
 </script>
 {{- end }}
-{{- /*  theme-toggle is disabled and theme is auto  */}}
-{{- else if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark"))}}
-<script>
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.classList.add('dark');
-    }
-
-</script>
 {{- end }}
 <noscript>
     <style type="text/css">