feat: enable dark mode auto switch without reloading

adityatelange · Sep 18, 2023 · 58c9a56 · 58c9a56
1 parent efe4cb4
commit 58c9a56
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -119,6 +119,37 @@
 <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
 {{ end -}}
 
+{{- 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 +158,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
@@ -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">