From 93f92368c2e5acf349e187e25067ed26690373c0 Mon Sep 17 00:00:00 2001
From: MG-5 <mg-95@t-online.de>
Date: Wed, 1 Nov 2023 12:50:00 +0100
Subject: [PATCH] Make auto darkmode working by using "prefers-color-scheme"
 tag

---
 _includes/default/head.liquid | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/_includes/default/head.liquid b/_includes/default/head.liquid
index 0340feb..b9e2f4f 100644
--- a/_includes/default/head.liquid
+++ b/_includes/default/head.liquid
@@ -2,16 +2,25 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
 
-    <!-- Theme Mode-->
+    <!-- Theme Mode -->
     {% if site.color_theme == 'auto' %}
     <script>
         const isAutoTheme = true;
-        document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme'))
+        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const storedTheme = localStorage.getItem('theme');
+
+        if (storedTheme) {
+            document.documentElement.setAttribute('data-theme', storedTheme);
+        } else if (prefersDarkMode) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+            document.documentElement.setAttribute('data-theme', 'light');
+        }
     </script>
     {% else %}
     <script>
         const isAutoTheme = false;
-        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
+        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}");
     </script>
     {% endif %}