From c051b040a0410d5b917f4336ca88b5a6a47c2f6d Mon Sep 17 00:00:00 2001
From: hex <hex@punk.lgbt>
Date: Sat, 18 Jan 2025 21:38:08 -0800
Subject: [PATCH] Add dark mode toggle

---
 static/css/main.css  | 161 +++++++++++++++++++++++++++++++------------
 templates/admin.html |   3 +
 templates/base.html  |  75 ++++++++++++++++++++
 templates/users.html |   3 +
 4 files changed, 197 insertions(+), 45 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 3e3fb58..b7023eb 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,44 +1,96 @@
+/* Light theme variables */
 :root {
   /* Colors */
-  --primary-color: #9B4819;     /* Warm terracotta */
-  --secondary-color: #D68C45;   /* Muted orange */
-  --success-color: #8C9B4C;     /* Olive green */
-  --danger-color: #C23B22;      /* Warm red */
-  --background-color: #FDF6EC;  /* Warm off-white */
-  --text-color: #2C1810;        /* Deep brown */
-
-  /* Recipe Card */
-  --recipe-card-bg: #ffffff;
-  --recipe-card-border: #E8D5C4;  /* Light warm beige */
-  --recipe-card-shadow: rgba(155, 72, 25, 0.1);
-  --recipe-card-title-color: #9B4819;  /* Same as primary */
-  --recipe-card-text-color: #594D46;   /* Muted brown */
-
-  /* Sidebar */
-  --sidebar-bg: #9B4819;          /* Primary color */
-  --sidebar-border: #B25F2C;      /* Lighter terracotta */
-  --sidebar-brand-color: #ffffff;
-  --sidebar-link-color: rgba(255, 255, 255, 0.9);
-  --sidebar-link-hover-color: #ffffff;
-  --sidebar-link-hover-bg: rgba(214, 140, 69, 0.2);  /* Secondary color with opacity */
-  --sidebar-mobile-height: 60px;
+  --primary-color: #9B4819;
+  --primary-color-dark: #7A3914;
+  --secondary-color: #D68C45;
+  --secondary-color-dark: #B37338;
+  --background-color: #FDF6EC;
+  --surface-color: #FFFFFF;
+  --text-color: #2C1810;
+  --text-color-light: #5C4037;
+  --border-color: #E8D5C4;
+  --error-color: #DC3545;
+  --error-color-dark: #BD2130;
+  --success-color: #28A745;
+  --link-color: #9B4819;
 
   /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
   --spacing-unit: 1rem;
   --container-max-width: 1200px;
 
   /* Typography */
+  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Open Sans", sans-serif;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
   --font-family-brand: "Sour Gummy", cursive;
   --font-family-base: "Sour Gummy", system-ui, -apple-system, sans-serif;
   --font-size-base: 1rem;
   --line-height-base: 1.5;
 
-  /* Border Radius */
+  /* Effects */
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
   --border-radius: 0.25rem;
   --border-radius-lg: 0.5rem;
-
-  /* Transitions */
   --transition-base: all 0.2s ease-in-out;
+
+  /* Recipe Card */
+  --recipe-card-bg: #ffffff;
+  --recipe-card-border: #E8D5C4;
+  --recipe-card-shadow: rgba(155, 72, 25, 0.1);
+  --recipe-card-title-color: #9B4819;
+  --recipe-card-text-color: #594D46;
+
+  /* Sidebar */
+  --sidebar-bg: #9B4819;
+  --sidebar-border: #B25F2C;
+  --sidebar-brand-color: #ffffff;
+  --sidebar-link-color: rgba(255, 255, 255, 0.9);
+  --sidebar-link-hover-color: #ffffff;
+  --sidebar-link-hover-bg: rgba(214, 140, 69, 0.2);
+  --sidebar-mobile-height: 60px;
+  --sidebar-desktop-width: 240px;
+}
+
+/* Dark theme variables */
+[data-theme="dark"] {
+  --primary-color: #FF8B4C;
+  --primary-color-dark: #E67A3D;
+  --secondary-color: #FFB07F;
+  --secondary-color-dark: #E69E70;
+  --background-color: #1A1A1A;
+  --surface-color: #2D2D2D;
+  --text-color: #F5E6D3;
+  --text-color-light: #D4C3B3;
+  --border-color: #404040;
+  --error-color: #FF4D4D;
+  --error-color-dark: #E63939;
+  --success-color: #4CAF50;
+  --link-color: #FF8B4C;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
+  --recipe-card-bg: #2D2D2D;
+  --recipe-card-border: #404040;
+  --recipe-card-shadow: rgba(0, 0, 0, 0.3);
+  --recipe-card-title-color: #FF8B4C;
+  --recipe-card-text-color: #D4C3B3;
+  --sidebar-bg: #2D2D2D;
+  --sidebar-border: #404040;
+  --sidebar-brand-color: #F5E6D3;
+  --sidebar-link-color: rgba(255, 255, 255, 0.9);
+  --sidebar-link-hover-color: #F5E6D3;
+  --sidebar-link-hover-bg: rgba(214, 140, 69, 0.2);
 }
 
 /* Reset and base styles */
@@ -54,6 +106,7 @@ body {
   line-height: var(--line-height-base);
   color: var(--text-color);
   background-color: var(--background-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Layout */
@@ -172,29 +225,16 @@ body {
   text-decoration: none;
   display: inline-block;
   margin-right: calc(var(--spacing-unit) * 0.5);
+  background-color: var(--primary-color);
+  color: white;
 }
 
 .btn:last-child {
   margin-right: 0;
 }
 
-.btn-primary {
-  background-color: var(--primary-color);
-  color: white;
-}
-
-.btn-primary:hover {
-  background-color: color-mix(in srgb, var(--primary-color) 85%, white);
-}
-
-.btn-danger {
-  background-color: color-mix(in srgb, var(--danger-color) 70%, transparent);
-  color: white;
-  backdrop-filter: blur(4px);
-}
-
-.btn-danger:hover {
-  background-color: var(--danger-color);
+.btn:hover {
+  background-color: var(--primary-color-dark);
 }
 
 /* Recipe grid layout */
@@ -262,7 +302,7 @@ body {
 
 @media (min-width: 768px) {
   .back-button {
-    left: calc(var(--sidebar-width) + var(--spacing-unit));
+    left: calc(var(--sidebar-desktop-width) + var(--spacing-unit));
   }
 }
 
@@ -334,6 +374,38 @@ body {
   border-bottom: none;
 }
 
+/* Theme toggle styles */
+.theme-toggle {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  background: var(--surface-color);
+  border: 2px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.5rem;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-md);
+}
+
+.theme-toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
 /* Media Queries */
 @media (min-width: 768px) {
   .layout {
@@ -341,7 +413,7 @@ body {
   }
 
   .sidebar {
-    width: var(--sidebar-width);
+    width: var(--sidebar-desktop-width);
     border-right: 1px solid var(--sidebar-border);
     border-bottom: none;
     height: 100vh;
@@ -371,7 +443,6 @@ body {
   }
 
   .main-content {
-    margin-left: var(--sidebar-width);
     padding: calc(var(--spacing-unit) * 2);
   }
 
diff --git a/templates/admin.html b/templates/admin.html
index a36d701..a43f45a 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -68,6 +68,9 @@ table {
 th, td {
     padding: 1rem;
     text-align: left;
+}
+
+th, tr {
     border-bottom: 1px solid var(--border-color);
 }
 
diff --git a/templates/base.html b/templates/base.html
index ce2b82a..b238ca8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,6 +7,20 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <script>
+        // Immediately set the theme before the page renders
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            } else {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const theme = prefersDark ? 'dark' : 'light';
+                document.documentElement.setAttribute('data-theme', theme);
+                localStorage.setItem('theme', theme);
+            }
+        })();
+    </script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
 </head>
@@ -46,5 +60,66 @@
             {% block content %}{% endblock %}
         </main>
     </div>
+
+    <button class="theme-toggle" aria-label="Toggle dark mode">
+        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+        </svg>
+        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
+            <path d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>
+        </svg>
+    </button>
+
+    <script>
+        // Theme toggle functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const themeToggle = document.querySelector('.theme-toggle');
+            const sunIcon = document.querySelector('.sun-icon');
+            const moonIcon = document.querySelector('.moon-icon');
+            const html = document.documentElement;
+            
+            // Check for saved theme preference
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            updateIcons(savedTheme);
+            
+            themeToggle.addEventListener('click', function() {
+                const currentTheme = html.getAttribute('data-theme');
+                const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+                
+                html.setAttribute('data-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                updateIcons(newTheme);
+            });
+            
+            function updateIcons(theme) {
+                if (theme === 'dark') {
+                    sunIcon.style.display = 'none';
+                    moonIcon.style.display = 'block';
+                } else {
+                    sunIcon.style.display = 'block';
+                    moonIcon.style.display = 'none';
+                }
+            }
+            
+            // Check system preference on load
+            if (!localStorage.getItem('theme')) {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const theme = prefersDark ? 'dark' : 'light';
+                html.setAttribute('data-theme', theme);
+                localStorage.setItem('theme', theme);
+                updateIcons(theme);
+            }
+            
+            // Listen for system theme changes
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+                if (!localStorage.getItem('theme')) {
+                    const newTheme = e.matches ? 'dark' : 'light';
+                    html.setAttribute('data-theme', newTheme);
+                    updateIcons(newTheme);
+                }
+            });
+        });
+    </script>
 </body>
 </html>
diff --git a/templates/users.html b/templates/users.html
index 9797d14..71381c7 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -61,6 +61,9 @@ table {
 th, td {
     padding: 1rem;
     text-align: left;
+}
+
+th, tr {
     border-bottom: 1px solid var(--border-color);
 }