From 71b5c16e7f5e60fb87a31562e88360d9876c5ac3 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Mon, 18 Sep 2023 21:15:53 +0200
Subject: [PATCH] feat: enable dark mode auto switch without reloading

---
 layouts/partials/head.html   | 34 +++++++++++++++++++++++++++++++++-
 layouts/partials/header.html |  8 --------
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 35257fc7..a4a02878 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -119,6 +119,38 @@
 <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
 {{ end -}}
 
+{{- /* theme-toggle is disabled and theme is auto */}}
+{{- if (and site.Params.disableThemeToggle (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark")) }}
+<style>
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --theme: rgb(29, 30, 32);
+            --entry: rgb(46, 46, 51);
+            --primary: rgb(218, 218, 219);
+            --secondary: rgb(155, 156, 157);
+            --tertiary: rgb(65, 66, 68);
+            --content: rgb(196, 196, 197);
+            --hljs-bg: rgb(46, 46, 51);
+            --code-bg: rgb(55, 56, 62);
+            --border: rgb(51, 51, 51);
+        }
+
+        .list {
+            background: var(--theme);
+        }
+
+        .list:not(.dark)::-webkit-scrollbar-track {
+            background: 0 0;
+        }
+
+        .list:not(.dark)::-webkit-scrollbar-thumb {
+            border-color: var(--theme);
+        }
+    }
+
+</style>
+{{- end }}
+
 <noscript>
     <style>
         #theme-toggle,
@@ -127,7 +159,7 @@
         }
 
     </style>
-    {{- if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark")) }}
+    {{- if (and (not site.Params.disableThemeToggle) (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark")) }}
     <style>
         @media (prefers-color-scheme: dark) {
             :root {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4a7291e2..4c515e80 100644
--- a/layouts/partials/header.html
+++ b/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 }}
 
 <header class="header">