v0.5.1 - Dark Classic Theme & Calendar Fixes (#74)

* Add Dark Classic theme option

- Restore original Tailwind dark mode as 'Dark Classic' theme
- Theme uses Tailwind's dark: utility classes instead of CSS overrides
- Fix FOUC by applying dark class in theme-init.js
- Users can now choose between custom Dark theme and classic Dark theme

* Fix calendar event styling for dark mode

- Replace invalid bg-primary classes with proper Tailwind colors
- Light mode: bg-blue-100 with blue-700 text
- Dark mode: bg-gray-700 with blue-300 text
- Fixes white background issue on calendar events in dark themes

* Make Dark Classic default and fix calendar styling for all dark themes

- Set Dark Classic as default theme (restores original dark mode behavior)
- Fix calendar event styling for Dark theme
- Fix calendar event styling for Midnight theme
- Calendar cells and event buttons now properly styled in all themes
- No more white backgrounds on calendar events in dark modes

Author: bscott

templates/calendar.html

@@ -295,12 +295,12 @@ <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{.MonthName}}</h1>
                         }
 
                         const cost = (event.cost || 0).toFixed(2);
-                        content += `<button 
+                        content += `<button
                             hx-get="/form/subscription/${eventId}"
                             hx-target="#modal-content"
                             hx-swap="innerHTML"
                             hx-trigger="click"
-                            class="w-full text-left text-xs px-2 py-1 rounded bg-primary/20 dark:bg-primary/30 text-primary dark:text-primary-light hover:bg-primary/30 dark:hover:bg-primary/40 transition-colors cursor-pointer flex items-center justify-between" 
+                            class="w-full text-left text-xs px-2 py-1 rounded bg-blue-100 dark:bg-gray-700 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-gray-600 transition-colors cursor-pointer flex items-center justify-between" 
                             title="${eventName} - ${currencySymbol}${cost}"
                             onclick="setTimeout(function() { document.getElementById('modal').classList.remove('hidden'); }, 50);">
                             <span class="flex items-center min-w-0 flex-1">

templates/settings.html

@@ -200,6 +200,16 @@ <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">Appearance<
                         </div>
                     </div>
 
+                    <div class="theme-option" data-theme="dark-classic" onclick="selectTheme('dark-classic')">
+                        <div class="theme-name">Dark Classic</div>
+                        <div class="theme-description">Original dark mode</div>
+                        <div class="theme-preview">
+                            <div class="theme-preview-color" style="background: #1f2937;"></div>
+                            <div class="theme-preview-color" style="background: #3b82f6;"></div>
+                            <div class="theme-preview-color" style="background: #10b981;"></div>
+                        </div>
+                    </div>
+
                     <div class="theme-option" data-theme="christmas" onclick="selectTheme('christmas')">
                         <div class="theme-name">Christmas 🎄</div>
                         <div class="theme-description">Festive and jolly!</div>

web/static/css/themes.css

@@ -83,6 +83,23 @@
     background-color: #2a2a2a !important;
 }
 
+/* Dark Theme - Calendar Events */
+[data-theme="dark"] .bg-blue-50 {
+    background-color: #1e293b !important;
+}
+
+[data-theme="dark"] .bg-blue-100 {
+    background-color: #374151 !important;
+}
+
+[data-theme="dark"] .text-blue-700 {
+    color: #93c5fd !important;
+}
+
+[data-theme="dark"] .hover\:bg-blue-200:hover {
+    background-color: #4b5563 !important;
+}
+
 /* Christmas Theme */
 [data-theme="christmas"] body {
     background: linear-gradient(135deg, #fef3f3 0%, #fef2f2 100%) !important;
@@ -166,6 +183,23 @@
     text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
 }
 
+/* Midnight Theme - Calendar Events */
+[data-theme="midnight"] .bg-blue-50 {
+    background-color: #1e1e2e !important;
+}
+
+[data-theme="midnight"] .bg-blue-100 {
+    background-color: #2a2540 !important;
+}
+
+[data-theme="midnight"] .text-blue-700 {
+    color: #c4b5fd !important;
+}
+
+[data-theme="midnight"] .hover\:bg-blue-200:hover {
+    background-color: #3a3550 !important;
+}
+
 /* Ocean Theme */
 [data-theme="ocean"] body {
     background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;

web/static/js/theme-init.js

@@ -1,5 +1,10 @@
 // Theme initialization - runs immediately to prevent flash
 (function() {
-    const theme = localStorage.getItem('subtrackr-theme') || 'default';
+    const theme = localStorage.getItem('subtrackr-theme') || 'dark-classic';
     document.documentElement.setAttribute('data-theme', theme);
+
+    // Handle Tailwind dark mode for dark-classic theme
+    if (theme === 'dark-classic') {
+        document.documentElement.classList.add('dark');
+    }
 })();

web/static/js/themes.js

@@ -36,6 +36,25 @@ const themes = {
             border: '#374151',
         }
     },
+    'dark-classic': {
+        name: 'Dark Classic',
+        description: 'Original dark mode',
+        useTailwindDark: true,  // Special flag to use Tailwind's dark mode
+        colors: {
+            primary: '#3b82f6',
+            primaryHover: '#60a5fa',
+            secondary: '#64748b',
+            success: '#10b981',
+            warning: '#f59e0b',
+            danger: '#ef4444',
+            background: '#111827',
+            surface: '#1f2937',
+            surfaceHover: '#374151',
+            text: '#f9fafb',
+            textSecondary: '#9ca3af',
+            border: '#374151',
+        }
+    },
     christmas: {
         name: 'Christmas',
         description: 'Festive and jolly! 🎄',
@@ -100,12 +119,19 @@ const themes = {
 
 // Apply theme to document
 function applyTheme(themeName) {
-    const theme = themes[themeName] || themes.default;
+    const theme = themes[themeName] || themes['dark-classic'];
     const root = document.documentElement;
 
     // Set theme data attribute
     root.setAttribute('data-theme', themeName);
 
+    // Handle Tailwind dark mode for dark-classic theme
+    if (theme.useTailwindDark) {
+        root.classList.add('dark');
+    } else {
+        root.classList.remove('dark');
+    }
+
     // Apply CSS variables
     Object.entries(theme.colors).forEach(([key, value]) => {
         root.style.setProperty(`--theme-${key}`, value);
@@ -153,13 +179,13 @@ function getStoredTheme() {
     return fetch('/api/settings/theme')
         .then(response => response.json())
         .then(data => {
-            const theme = data.theme || 'default';
+            const theme = data.theme || 'dark-classic';
             localStorage.setItem('subtrackr-theme', theme);
             return theme;
         })
         .catch(err => {
             console.error('Failed to load theme:', err);
-            return 'default';
+            return 'dark-classic';
         });
 }