Use CSS inside noscript when JS is disabled to detect preferred color theme (adityatelange#308)

- Makes auto theme work when JS is disabled
- Only applies if 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">