From 84960fdd44f895cee7155c1a4c34be6a5d420949 Mon Sep 17 00:00:00 2001
From: Jason Streifling <jason@streifling.com>
Date: Sun, 8 Sep 2024 11:00:12 +0200
Subject: [PATCH] Implement dark mode

---
 tailwind.config.js       |  1 +
 web/static/css/input.css | 53 ++++++++++++++++++++++++++++------------
 web/templates/index.html | 45 +++++++++++++++++++++++++++++++---
 3 files changed, 81 insertions(+), 18 deletions(-)
diff --git a/tailwind.config.js b/tailwind.config.js
index 9e17d63..8e50921 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,4 +7,5 @@ module.exports = {
     plugins: [
         require('@tailwindcss/typography')
     ],
+    darkMode: 'selector',
 }
diff --git a/web/static/css/input.css b/web/static/css/input.css
index 0f50437..462eb57 100644
--- a/web/static/css/input.css
+++ b/web/static/css/input.css
@@ -2,30 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    width: 800px;
-    @apply mx-auto text-slate-900;
-}
-
 h2 {
     @apply font-bold mb-2 text-2xl;
 }
 
-form {
-    @apply flex flex-col gap-y-3;
-}
-
-input[type="file"] {
-    @apply border rounded-md w-full;
+h3 {
+    @apply font-bold mb-2 text-xl;
 }
 
 input[type="password"],
 input[type="text"] {
-    @apply border h-8 rounded-md;
+    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-8 rounded-md;
 }
 
 textarea {
-    @apply border h-32 rounded-md;
+    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-32 rounded-md;
 }
 
 .btn-area {
@@ -33,9 +24,41 @@ textarea {
 }
 
 .btn {
-    @apply bg-slate-200 border my-2 px-3 py-2 rounded-md w-full hover:bg-slate-100;
+    @apply bg-slate-200 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-slate-800 my-2 px-3 py-2 rounded-md w-full;
 }
 
 .action-btn {
-    @apply bg-slate-800 border my-2 px-3 py-2 rounded-md text-slate-50 w-full hover:bg-slate-700;
+    @apply bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 my-2 px-3 py-2 rounded-md text-slate-50 dark:text-slate-950 w-full;
+}
+
+.EasyMDEContainer .CodeMirror {
+    @apply bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100
+}
+
+.EasyMDEContainer .cm-s-easymde .CodeMirror-cursor {
+    @apply border-slate-900 dark:border-slate-100
+}
+
+.EasyMDEContainer .editor-toolbar > * {
+    @apply text-slate-900 dark:text-slate-100
+}
+
+.EasyMDEContainer .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment {
+    @apply bg-slate-100 dark:bg-slate-900
+}
+
+.EasyMDEContainer .CodeMirror-fullscreen {
+    @apply bg-slate-50 dark:bg-slate-950
+}
+
+.editor-toolbar {
+    @apply border border-slate-200
+}
+
+.editor-toolbar.fullscreen {
+    @apply bg-slate-50 dark:bg-slate-950
+}
+
+.editor-preview {
+    @apply bg-slate-50 dark:bg-slate-950
 }
diff --git a/web/templates/index.html b/web/templates/index.html
index 47c8574..4014f49 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -5,13 +5,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Orient Editor</title>
+
     <link href="/web/static/css/style.css" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
 </head>
 
-<body class="flex flex-col justify-between min-h-screen bg-slate-50">
+<body style="width: 800px;"
+    class="bg-slate-50 dark:bg-slate-950 flex flex-col justify-between min-h-screen mx-auto text-slate-900 dark:text-slate-100">
     <header class="my-8">
         <h1 class="font-bold text-4xl text-center">Orient Editor</h1>
+
+        <div class="ml-4">
+            <label class="cursor-pointer flex items-center relative" for="theme-toggle">
+                <div class="bg-slate-200 dark:bg-slate-800 block h-6 w-12 rounded-full"></div>
+                <div
+                    class="absolute bg-slate-800 dark:bg-slate-50 dot left-1 top-1 h-4 w-4 rounded-full transform transition">
+                </div>
+                <span class="ml-2">Dunkel</span>
+            </label>
+            <input type="checkbox" id="theme-toggle" class="sr-only">
+        </div>
     </header>
 
     <main class="mx-4">
@@ -20,18 +33,44 @@
         </div>
     </main>
 
-    <footer class="text-center text-gray-500 dark:text-gray-400 my-8">
+    <footer class="text-center text-gray-500 my-8">
         <p>
             &copy; 2024 Jason Streifling. Alle Rechte vorbehalten.
         </p>
         <p>
-            v0.8.3 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
+            v0.9.0 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
             enthalten.
         </p>
     </footer>
 
     <script src="https://unpkg.com/htmx.org@2.0.2"></script>
     <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const toggleSwitch = document.getElementById('theme-toggle');
+            const dot = document.querySelector('.dot');
+
+            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+                toggleSwitch.checked = true;
+                dot.classList.add('translate-x-6');
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+
+            toggleSwitch.addEventListener('change', () => {
+                if (toggleSwitch.checked) {
+                    document.documentElement.classList.add('dark');
+                    localStorage.theme = 'dark';
+                    dot.classList.add('translate-x-6');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.theme = 'light';
+                    dot.classList.remove('translate-x-6');
+                }
+            });
+        });
+    </script>
 </body>
 
 </html>
