From 7aff1fc19611681402d6a6b7c7a6b40db7afef7b Mon Sep 17 00:00:00 2001
From: Arnaud Ligny <arnaud@ligny.org>
Date: Tue, 8 Mar 2022 14:48:06 +0100
Subject: [PATCH] Add system to dark mode toggle

---
 layouts/_default/page.html.twig               |  8 ++---
 layouts/partials/toggle-switch-dark.html.twig | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 5 deletions(-)
diff --git a/layouts/_default/page.html.twig b/layouts/_default/page.html.twig
index f7f19f289..d63d09f66 100644
--- a/layouts/_default/page.html.twig
+++ b/layouts/_default/page.html.twig
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="{{ site.language }}"
-  x-data="{'darkMode': false}"
-  x-init="
-    darkMode = JSON.parse(localStorage.getItem('darkMode')) || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
-  :class="{'dark': darkMode === true}"
+  x-data="{theme: localStorage.getItem('theme') || localStorage.setItem('theme', 'system')}"
+  x-init="$watch('theme', value => localStorage.setItem('theme', value))"
+  :class="{'dark': theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)}"
 >
   <head>
     <meta charset="UTF-8">
diff --git a/layouts/partials/toggle-switch-dark.html.twig b/layouts/partials/toggle-switch-dark.html.twig
index 889b550da..013187fe8 100644
--- a/layouts/partials/toggle-switch-dark.html.twig
+++ b/layouts/partials/toggle-switch-dark.html.twig
@@ -1,3 +1,4 @@
+        <!--
         <div class="flex items-center space-x-2 mt-1">
           <span class="text-xs text-darkblue dark:text-slate-500">{% trans %}Light{% endtrans %}</span>
           <label for="toggle" class="w-8 h-4 flex items-center bg-slate-300 rounded-full p-1 cursor-pointer duration-300 ease-in-out dark:bg-slate-600">
@@ -5,4 +6,33 @@
           </label>
           <span class="text-xs text-slate-500 dark:text-white">{% trans %}Dark{% endtrans %}</span>
           <input id="toggle" type="checkbox" class="hidden" :value="darkMode" @change="darkMode = !darkMode"/>
+        </div>
+        -->
+
+        <!--<style>
+          .switch-toggle {
+            float: left;
+            background: #242729;
+          }
+          .switch-toggle input {
+            position: absolute;
+            opacity: 0;
+          }
+          .switch-toggle input + label {
+            padding: 7px;
+            float:left;
+            color: #fff;
+            cursor: pointer;
+          }
+          .switch-toggle input:checked + label {
+            background: green;
+          }
+        </style>-->
+        <div class="switch-toggle mt-1">
+          <input id="light" name="theme" type="radio" value="light" @click="theme = 'light'" x-init="this.checked = true" />
+          <label for="light">Light</label>
+          <input id="system" name="theme" type="radio" value="system" @click="theme = 'system'" x-init="this.checked = true" />
+          <label for="system" class="disabled">System</label>
+          <input id="dark" name="theme" type="radio" value="dark" @click="theme = 'dark'" x-init="this.checked = true" />
+          <label for="dark">Dark</label>
         </div>
\ No newline at end of file
