Use CSS instead of JS to detect preferred color theme

Only applies if the user has disabled JS and the 'theme' configuration
parameter is set to 'auto' or is unset.

Author: kdkasad

layouts/partials/header.html

@@ -44,7 +44,24 @@
         .top-link {
             display: none;
         }
-
+        {{- if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark")) }}
+        @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 }}
     </style>
 </noscript>
 <header class="header">