From e01b52193a9db952286ccf03b91d3f43f5312fed Mon Sep 17 00:00:00 2001
From: Kian Kasad <kian@kasad.com>
Date: Fri, 19 Mar 2021 06:12:49 -0700
Subject: [PATCH] Use CSS inside noscript when JS is disabled to detect
 preferred color theme (#308)

- Makes auto theme work when JS is disabled
- Only applies if the 'theme' configuration parameter is set to 'auto' or is unset.
---
 layouts/partials/header.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 00953ec..0cdd189 100644
--- a/layouts/partials/header.html
+++ b/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">