Merge pull request 'add-dark-mode' (#41) from add-dark-mode into main

Reviewed-on: #41

.gitea/workflows/refresh_showcase_data.yml

@@ -28,6 +28,8 @@ jobs:
 
       - name: Run showcase data seeding script
         env:
+          ADMIN_USERNAME: ${{ secrets.ADMIN_USERNAME }}
+          ADMIN_PASSWORD: ${{ secrets.ADMIN_PASSWORD }}
           POSTGRES_URI: ${{ secrets.POSTGRES_URI }}
         run: |
           uv run python scripts/seed_showcase_data.py

docker-compose.prod.yml

@@ -34,7 +34,7 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
-      start_period: 1s
+      start_period: 3s
   postgres:
     image: postgres:14-alpine
     environment:

pyproject.toml

@@ -41,7 +41,7 @@ dev = [
 
 [[tool.uv.index]]
 name = "threadripper-proxpi-cache"
-url = "http://10.0.0.2:5001/index/"
+url = "http://10.184.20.2:5001/index/"
 default = true
 
 [tool.mypy]

src/baby_monitor/main.py

@@ -143,6 +143,24 @@ def serve_menu_js() -> FileResponse:
     return FileResponse(static_path / "menu.js")
 
 
+@app.get("/dark-mode.css", include_in_schema=False)
+def serve_dark_mode_css() -> FileResponse:
+    """Serve the dark mode CSS."""
+    return FileResponse(static_path / "dark-mode.css")
+
+
+@app.get("/theme-init.js", include_in_schema=False)
+def serve_theme_init_js() -> FileResponse:
+    """Serve the theme initialization JavaScript."""
+    return FileResponse(static_path / "theme-init.js")
+
+
+@app.get("/chart-theme.js", include_in_schema=False)
+def serve_chart_theme_js() -> FileResponse:
+    """Serve the chart theming JavaScript."""
+    return FileResponse(static_path / "chart-theme.js")
+
+
 @app.get("/api/")
 def read_root(token: Annotated[str, Depends(verify_token)]) -> dict:
     """API root endpoint (requires authentication)."""

src/baby_monitor/repositories/dependencies/get_token_repository.py

@@ -6,7 +6,7 @@ import logging
 from baby_monitor.repositories.interfaces import (
     TokenRepositoryInterface,
 )
-from baby_monitor.repositories.token.memory_token import (
+from baby_monitor.repositories.token import (
     InMemoryTokenRepository,
 )
 
@@ -43,7 +43,7 @@ def _initialize_token_repository() -> TokenRepositoryInterface:
         ) from e
 
     try:
-        from baby_monitor.repositories.token.redis_token import (
+        from baby_monitor.repositories.token import (
             RedisTokenRepository,
         )
 

src/baby_monitor/repositories/token/__init__.py

@@ -0,0 +1,11 @@
+"""Token repository implementations and configurations."""
+
+from .default_ttl import DEFAULT_TTL
+from .memory_token import InMemoryTokenRepository
+from .redis_token import RedisTokenRepository
+
+__all__ = [
+    "DEFAULT_TTL",
+    "InMemoryTokenRepository",
+    "RedisTokenRepository",
+]

src/baby_monitor/repositories/token/default_ttl.py

@@ -0,0 +1,3 @@
+"""Definition of Token default TTL."""
+
+DEFAULT_TTL = 28800  # seconds -> 8 hours

src/baby_monitor/repositories/token/memory_token.py

@@ -3,6 +3,7 @@
 from datetime import datetime, timedelta, UTC
 
 from baby_monitor.repositories.interfaces import TokenRepositoryInterface
+from baby_monitor.repositories.token import DEFAULT_TTL
 
 
 class InMemoryTokenRepository(TokenRepositoryInterface):
@@ -16,9 +17,8 @@ class InMemoryTokenRepository(TokenRepositoryInterface):
     def __init__(self) -> None:
         # token -> (user_id, expiry_time)
         self._tokens: dict[str, tuple[int, datetime]] = {}
-        self._default_ttl = 3600  # Store default TTL for sliding expiration
 
-    def store(self, token: str, user_id: int, ttl: int = 3600) -> None:
+    def store(self, token: str, user_id: int, ttl: int = DEFAULT_TTL) -> None:
         """Store a token with TTL (time to live in seconds)."""
         expiry = datetime.now(UTC) + timedelta(seconds=ttl)
         self._tokens[token] = (user_id, expiry)
@@ -39,7 +39,7 @@ class InMemoryTokenRepository(TokenRepositoryInterface):
             return None
 
         # Sliding expiration: extend the token lifetime
-        new_expiry = datetime.now(UTC) + timedelta(seconds=self._default_ttl)
+        new_expiry = datetime.now(UTC) + timedelta(seconds=DEFAULT_TTL)
         self._tokens[token] = (user_id, new_expiry)
 
         return user_id

src/baby_monitor/repositories/token/redis_token.py

@@ -3,14 +3,14 @@
 from typing import Any
 
 from baby_monitor.repositories.interfaces import TokenRepositoryInterface
+from baby_monitor.repositories.token import DEFAULT_TTL
 
 
 class RedisTokenRepository(TokenRepositoryInterface):
     """
     Redis-based token storage.
 
-    Requires redis package: pip install redis
-    Set REDIS_URI environment variable (e.g., redis://localhost:6379/0)
+    This implementation uses Redis to store tokens with TTL. Implements sliding expiration.
     """
 
     def __init__(self, redis_client: Any) -> None:
@@ -21,9 +21,8 @@ class RedisTokenRepository(TokenRepositoryInterface):
             redis_client: Redis client instance from redis.from_url()
         """
         self.redis = redis_client
-        self.default_ttl = 3600  # Store default TTL for sliding expiration
 
-    def store(self, token: str, user_id: int, ttl: int = 3600) -> None:
+    def store(self, token: str, user_id: int, ttl: int = DEFAULT_TTL) -> None:
         """Store a token with TTL (time to live in seconds)."""
         key = f"token:{token}"
         self.redis.setex(key, ttl, str(user_id))
@@ -37,7 +36,7 @@ class RedisTokenRepository(TokenRepositoryInterface):
         user_id_str = self.redis.get(key)
         if user_id_str:
             # Sliding expiration: extend the token lifetime
-            self.redis.expire(key, self.default_ttl)
+            self.redis.expire(key, DEFAULT_TTL)
             return int(user_id_str)
         return None
 

src/baby_monitor/static/add-child.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Add Child - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: #667eea;
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -33,13 +35,13 @@
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -51,7 +53,7 @@
       label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -59,19 +61,22 @@
       input {
         width: 100%;
         padding: 12px;
-        border: 1px solid #ddd;
+        border: 2px solid #ccc;
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: var(--input-focus-border);
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -135,7 +140,7 @@
 
       .help-text {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 4px;
       }
     </style>

src/baby_monitor/static/admin.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor - Admin</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: #667eea;
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -33,13 +35,13 @@
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -62,7 +64,8 @@
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -95,7 +98,7 @@
         display: none;
         margin-top: 20px;
         padding: 15px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
         border: 2px solid #667eea;
       }
@@ -106,7 +109,7 @@
 
       .link-label {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 8px;
         font-weight: 600;
         text-transform: uppercase;
@@ -121,13 +124,13 @@
       .link-text {
         flex: 1;
         padding: 10px;
-        background: white;
-        border: 1px solid #ddd;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         font-family: "Courier New", monospace;
         font-size: 13px;
         word-break: break-all;
-        color: #333;
+        color: var(--text-primary);
       }
 
       .copy-button {
@@ -193,7 +196,7 @@
       .search-box {
         width: 100%;
         padding: 10px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         font-size: 14px;
         margin-bottom: 15px;
@@ -202,7 +205,7 @@
       .user-list {
         max-height: 400px;
         overflow-y: auto;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 4px;
       }
 
@@ -211,8 +214,8 @@
         justify-content: space-between;
         align-items: center;
         padding: 12px;
-        border-bottom: 1px solid #eee;
-        background: white;
+        border-bottom: 1px solid var(--border-lighter);
+        background: var(--bg-secondary);
       }
 
       .user-item:last-child {
@@ -220,7 +223,7 @@
       }
 
       .user-item:hover {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
       }
 
       .user-info {
@@ -229,13 +232,13 @@
 
       .user-name {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 4px;
       }
 
       .user-meta {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .admin-badge {
@@ -506,8 +509,8 @@
                 ID: ${user.id} • Created: ${new Date(user.created_at).toLocaleDateString()}
               </div>
             </div>
-            <button 
-              class="delete-user-btn" 
+            <button
+              class="delete-user-btn"
               onclick="showDeleteModal(${user.id}, '${user.username}', ${user.is_admin})"
               ${user.is_admin ? 'disabled title="Cannot delete admin users"' : ""}
             >

src/baby_monitor/static/chart-theme.js

@@ -0,0 +1,203 @@
+/* Chart.js Dark Mode Helper
+ * Provides theme-aware color palettes and chart options for Chart.js
+ * Usage: Include this before your chart initialization code
+ */
+
+(function() {
+    'use strict';
+    
+    // Helper to get effective theme
+    function getEffectiveTheme() {
+        return window.getEffectiveTheme ? window.getEffectiveTheme() : 'light';
+    }
+    
+    // Get theme-appropriate colors for Chart.js
+    window.getChartColors = function() {
+        const isDark = getEffectiveTheme() === 'dark';
+        
+        return {
+            // Grid lines
+            grid: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
+            gridMajor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
+            
+            // Text colors
+            text: isDark ? '#b0b0b0' : '#666666',
+            textPrimary: isDark ? '#e0e0e0' : '#333333',
+            
+            // Data series colors (optimized for background)
+            series: isDark ? [
+                'rgba(139, 158, 255, 0.8)',  // Brighter purple
+                'rgba(110, 197, 255, 0.8)',  // Brighter blue
+                'rgba(255, 179, 255, 0.8)',  // Brighter pink
+                'rgba(129, 199, 132, 0.8)',  // Brighter green
+                'rgba(255, 183, 77, 0.8)',   // Brighter orange
+                'rgba(156, 107, 184, 0.8)',  // Brighter deep purple
+                'rgba(77, 255, 255, 0.8)',   // Brighter cyan
+                'rgba(255, 138, 155, 0.8)',  // Brighter red
+            ] : [
+                'rgba(102, 126, 234, 0.8)',  // Purple
+                'rgba(118, 75, 162, 0.8)',   // Deep purple
+                'rgba(255, 159, 64, 0.8)',   // Orange
+                'rgba(76, 175, 80, 0.8)',    // Green
+                'rgba(244, 67, 54, 0.8)',    // Red
+                'rgba(156, 39, 176, 0.8)',   // Violet
+                'rgba(102, 126, 234, 0.6)',  // Light purple
+                'rgba(118, 75, 162, 0.6)',   // Light deep purple
+            ],
+            
+            // Solid data colors (for pie charts, etc.)
+            solidSeries: isDark ? [
+                '#8b9eff',
+                '#6ec5ff',
+                '#ffb3ff',
+                '#81c784',
+                '#ffb74d',
+                '#9c6bb8',
+                '#4dffff',
+                '#ff8a9b',
+            ] : [
+                '#667eea',
+                '#764ba2',
+                '#ff9f40',
+                '#4caf50',
+                '#f44336',
+                '#9c27b0',
+                '#667eea',
+                '#764ba2',
+            ],
+            
+            // Background colors
+            background: isDark ? '#2d2d2d' : '#f8f9fa',
+        };
+    };
+    
+    // Get default Chart.js options with theme support
+    window.getChartOptions = function(customOptions = {}) {
+        const colors = window.getChartColors();
+        
+        const defaults = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: colors.text,
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    backgroundColor: getEffectiveTheme() === 'dark' ? '#3a3a3a' : '#ffffff',
+                    titleColor: colors.textPrimary,
+                    bodyColor: colors.text,
+                    borderColor: colors.grid,
+                    borderWidth: 1,
+                }
+            },
+            scales: {}
+        };
+        
+        // Deep merge customOptions with defaults
+        return mergeDeep(defaults, customOptions);
+    };
+    
+    // Get theme-appropriate scale options
+    window.getChartScaleOptions = function(axis = 'x', customOptions = {}) {
+        const colors = window.getChartColors();
+        
+        const defaults = {
+            grid: {
+                color: colors.grid,
+                borderColor: colors.gridMajor,
+            },
+            ticks: {
+                color: colors.text,
+                font: {
+                    size: 12
+                }
+            },
+            title: {
+                color: colors.textPrimary,
+                font: {
+                    size: 13,
+                    weight: '600'
+                }
+            }
+        };
+        
+        return mergeDeep(defaults, customOptions);
+    };
+    
+    // Helper function to deep merge objects
+    function mergeDeep(target, source) {
+        const output = Object.assign({}, target);
+        if (isObject(target) && isObject(source)) {
+            Object.keys(source).forEach(key => {
+                if (isObject(source[key])) {
+                    if (!(key in target)) {
+                        Object.assign(output, { [key]: source[key] });
+                    } else {
+                        output[key] = mergeDeep(target[key], source[key]);
+                    }
+                } else {
+                    Object.assign(output, { [key]: source[key] });
+                }
+            });
+        }
+        return output;
+    }
+    
+    function isObject(item) {
+        return item && typeof item === 'object' && !Array.isArray(item);
+    }
+    
+    // Function to update all charts on theme change
+    window.updateChartsForTheme = function(chartInstances) {
+        if (!Array.isArray(chartInstances)) {
+            chartInstances = [chartInstances];
+        }
+        
+        const colors = window.getChartColors();
+        
+        chartInstances.forEach(chart => {
+            if (!chart) return;
+            
+            // Update grid colors
+            if (chart.options.scales) {
+                Object.keys(chart.options.scales).forEach(axis => {
+                    if (chart.options.scales[axis].grid) {
+                        chart.options.scales[axis].grid.color = colors.grid;
+                        chart.options.scales[axis].grid.borderColor = colors.gridMajor;
+                    }
+                    if (chart.options.scales[axis].ticks) {
+                        chart.options.scales[axis].ticks.color = colors.text;
+                    }
+                    if (chart.options.scales[axis].title) {
+                        chart.options.scales[axis].title.color = colors.textPrimary;
+                    }
+                });
+            }
+            
+            // Update legend colors
+            if (chart.options.plugins && chart.options.plugins.legend) {
+                if (chart.options.plugins.legend.labels) {
+                    chart.options.plugins.legend.labels.color = colors.text;
+                }
+            }
+            
+            // Update tooltip colors
+            if (chart.options.plugins && chart.options.plugins.tooltip) {
+                chart.options.plugins.tooltip.backgroundColor = 
+                    getEffectiveTheme() === 'dark' ? '#3a3a3a' : '#ffffff';
+                chart.options.plugins.tooltip.titleColor = colors.textPrimary;
+                chart.options.plugins.tooltip.bodyColor = colors.text;
+                chart.options.plugins.tooltip.borderColor = colors.grid;
+            }
+            
+            // Update the chart
+            chart.update();
+        });
+    };
+    
+})();

src/baby_monitor/static/dark-mode.css

@@ -0,0 +1,258 @@
+/* Dark Mode CSS Variables and Theming System
+ * Supports automatic detection via prefers-color-scheme and manual override via .dark-mode class
+ */
+
+:root {
+    /* ===== LIGHT MODE (Default) ===== */
+    
+    /* Background colors */
+    --bg-primary: #f0f0f0;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f8f9fa;
+    --bg-card: #ffffff;
+    
+    /* Text colors */
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-muted: #999999;
+    --text-inverse: #ffffff;
+    
+    /* Border colors */
+    --border-color: #dddddd;
+    --border-light: #e0e0e0;
+    --border-lighter: #eeeeee;
+    
+    /* Gradients - Brand */
+    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --gradient-green: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+    --gradient-orange: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
+    
+    /* Action colors */
+    --color-success: #4caf50;
+    --color-error: #dc3545;
+    --color-warning: #ff9800;
+    --color-info: #2196f3;
+    --color-danger: #f44336;
+    
+    /* Action gradients */
+    --gradient-success: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+    --gradient-error: linear-gradient(135deg, #dc3545 0%, #c62828 100%);
+    --gradient-danger: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+    
+    /* Interactive elements */
+    --input-bg: #ffffff;
+    --input-border: #dddddd;
+    --input-focus-border: #667eea;
+    --input-text: #333333;
+    --input-placeholder: #999999;
+    
+    /* Shadows */
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
+    --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.2);
+    
+    /* Modal/Overlay */
+    --overlay-bg: rgba(0, 0, 0, 0.5);
+    
+    /* Chart colors (vibrant for light backgrounds) */
+    --chart-grid: rgba(0, 0, 0, 0.1);
+    --chart-text: #666666;
+    --chart-color-1: #667eea;
+    --chart-color-2: #4facfe;
+    --chart-color-3: #f093fb;
+    --chart-color-4: #56ab2f;
+    --chart-color-5: #f2994a;
+    --chart-color-6: #764ba2;
+    --chart-color-7: #00f2fe;
+    --chart-color-8: #f5576c;
+}
+
+/* ===== DARK MODE ===== */
+/* Applied via @media query (auto-detect) OR .dark-mode class (manual override) */
+
+@media (prefers-color-scheme: dark) {
+    :root:not(.light-mode) {
+        /* Background colors - Dark theme */
+        --bg-primary: #1a1a1a;
+        --bg-secondary: #2d2d2d;
+        --bg-tertiary: #3a3a3a;
+        --bg-card: #2d2d2d;
+        
+        /* Text colors - Light on dark */
+        --text-primary: #e0e0e0;
+        --text-secondary: #b0b0b0;
+        --text-muted: #808080;
+        --text-inverse: #1a1a1a;
+        
+        /* Border colors - Lighter for visibility */
+        --border-color: #444444;
+        --border-light: #4a4a4a;
+        --border-lighter: #505050;
+        
+        /* Gradients - Dimmed (~50% brightness reduction) */
+        --gradient-purple: linear-gradient(135deg, #3d4d8c 0%, #452d61 100%);
+        --gradient-blue: linear-gradient(135deg, #2f667f 0%, #00919a 100%);
+        --gradient-pink: linear-gradient(135deg, #905997 0%, #924344 100%);
+        --gradient-green: linear-gradient(135deg, #33661c 0%, #64873c 100%);
+        --gradient-orange: linear-gradient(135deg, #915b2d 0%, #917a2e 100%);
+        
+        /* Action colors - Slightly brighter for visibility */
+        --color-success: #66bb6a;
+        --color-error: #ef5350;
+        --color-warning: #ffa726;
+        --color-info: #42a5f5;
+        --color-danger: #ff5252;
+        
+        /* Action gradients - Dimmed */
+        --gradient-success: linear-gradient(135deg, #33661c 0%, #64873c 100%);
+        --gradient-error: linear-gradient(135deg, #a32a2a 0%, #8b2020 100%);
+        --gradient-danger: linear-gradient(135deg, #a32929 0%, #8b1e1e 100%);
+        
+        /* Interactive elements */
+        --input-bg: #2d2d2d;
+        --input-border: #444444;
+        --input-focus-border: #667eea;
+        --input-text: #e0e0e0;
+        --input-placeholder: #808080;
+        
+        /* Shadows - Lighter/softer for dark mode */
+        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+        --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
+        --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
+        --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.6);
+        
+        /* Modal/Overlay - Same opacity */
+        --overlay-bg: rgba(0, 0, 0, 0.5);
+        
+        /* Chart colors - Brighter and more saturated for dark backgrounds */
+        --chart-grid: rgba(255, 255, 255, 0.1);
+        --chart-text: #b0b0b0;
+        --chart-color-1: #8b9eff;
+        --chart-color-2: #6ec5ff;
+        --chart-color-3: #ffb3ff;
+        --chart-color-4: #81c784;
+        --chart-color-5: #ffb74d;
+        --chart-color-6: #9c6bb8;
+        --chart-color-7: #4dffff;
+        --chart-color-8: #ff8a9b;
+    }
+}
+
+/* Manual override with .dark-mode class */
+body.dark-mode {
+    /* Background colors - Dark theme */
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #3a3a3a;
+    --bg-card: #2d2d2d;
+    
+    /* Text colors - Light on dark */
+    --text-primary: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --text-muted: #808080;
+    --text-inverse: #1a1a1a;
+    
+    /* Border colors - Lighter for visibility */
+    --border-color: #444444;
+    --border-light: #4a4a4a;
+    --border-lighter: #505050;
+    
+    /* Gradients - Dimmed (~50% brightness reduction) */
+    --gradient-purple: linear-gradient(135deg, #3d4d8c 0%, #452d61 100%);
+    --gradient-blue: linear-gradient(135deg, #2f667f 0%, #00919a 100%);
+    --gradient-pink: linear-gradient(135deg, #905997 0%, #924344 100%);
+    --gradient-green: linear-gradient(135deg, #33661c 0%, #64873c 100%);
+    --gradient-orange: linear-gradient(135deg, #915b2d 0%, #917a2e 100%);
+    
+    /* Action colors - Slightly brighter for visibility */
+    --color-success: #66bb6a;
+    --color-error: #ef5350;
+    --color-warning: #ffa726;
+    --color-info: #42a5f5;
+    --color-danger: #ff5252;
+    
+    /* Action gradients - Dimmed */
+    --gradient-success: linear-gradient(135deg, #33661c 0%, #64873c 100%);
+    --gradient-error: linear-gradient(135deg, #a32a2a 0%, #8b2020 100%);
+    --gradient-danger: linear-gradient(135deg, #a32929 0%, #8b1e1e 100%);
+    
+    /* Interactive elements */
+    --input-bg: #2d2d2d;
+    --input-border: #444444;
+    --input-focus-border: #667eea;
+    --input-text: #e0e0e0;
+    --input-placeholder: #808080;
+    
+    /* Shadows - Lighter/softer for dark mode */
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
+    --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.6);
+    
+    /* Modal/Overlay - Same opacity */
+    --overlay-bg: rgba(0, 0, 0, 0.5);
+    
+    /* Chart colors - Brighter and more saturated for dark backgrounds */
+    --chart-grid: rgba(255, 255, 255, 0.1);
+    --chart-text: #b0b0b0;
+    --chart-color-1: #8b9eff;
+    --chart-color-2: #6ec5ff;
+    --chart-color-3: #ffb3ff;
+    --chart-color-4: #81c784;
+    --chart-color-5: #ffb74d;
+    --chart-color-6: #9c6bb8;
+    --chart-color-7: #4dffff;
+    --chart-color-8: #ff8a9b;
+}
+
+/* Manual override with .light-mode class (forces light even when browser prefers dark) */
+body.light-mode {
+    /* Force light mode values - same as root defaults */
+    --bg-primary: #f0f0f0;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f8f9fa;
+    --bg-card: #ffffff;
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-muted: #999999;
+    --text-inverse: #ffffff;
+    --border-color: #dddddd;
+    --border-light: #e0e0e0;
+    --border-lighter: #eeeeee;
+    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --gradient-green: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+    --gradient-orange: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
+    --color-success: #4caf50;
+    --color-error: #dc3545;
+    --color-warning: #ff9800;
+    --color-info: #2196f3;
+    --color-danger: #f44336;
+    --gradient-success: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+    --gradient-error: linear-gradient(135deg, #dc3545 0%, #c62828 100%);
+    --gradient-danger: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+    --input-bg: #ffffff;
+    --input-border: #dddddd;
+    --input-focus-border: #667eea;
+    --input-text: #333333;
+    --input-placeholder: #999999;
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
+    --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.2);
+    --overlay-bg: rgba(0, 0, 0, 0.5);
+    --chart-grid: rgba(0, 0, 0, 0.1);
+    --chart-text: #666666;
+    --chart-color-1: #667eea;
+    --chart-color-2: #4facfe;
+    --chart-color-3: #f093fb;
+    --chart-color-4: #56ab2f;
+    --chart-color-5: #f2994a;
+    --chart-color-6: #764ba2;
+    --chart-color-7: #00f2fe;
+    --chart-color-8: #f5576c;
+}

src/baby_monitor/static/diapers.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diapers - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
+    <script src="/chart-theme.js"></script>
     <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
@@ -16,7 +19,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
         min-height: 100vh;
         max-width: 800px;
         margin: 2rem auto;
@@ -24,26 +27,27 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
 
       .button {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        background: var(--gradient-pink);
+        background-color: #f093fb;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -79,13 +83,13 @@
       .loading {
         text-align: center;
         padding: 40px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state-icon {
@@ -94,7 +98,7 @@
       }
 
       .empty-state h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
       }
 
@@ -105,12 +109,12 @@
       .chart-container {
         margin-bottom: 40px;
         padding: 20px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
       }
 
       .chart-container h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -150,29 +154,37 @@
 
       .controls label {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
       }
 
-      .controls select {
+      .controls select,
+      .controls input {
         padding: 8px 16px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         cursor: pointer;
-        background: white;
+        background: var(--bg-secondary);
+        color: var(--text-primary);
       }
 
-      .controls select:focus {
+      .controls select:focus,
+      .controls input:focus {
         outline: none;
         border-color: #f093fb;
       }
 
+      .controls input[readonly] {
+        opacity: 0.6;
+        cursor: default;
+      }
+
       .diapers-list {
         margin-top: 40px;
       }
 
       .diapers-list h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -180,9 +192,9 @@
       .diapers-scroll {
         max-height: 500px;
         overflow-y: auto;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
       }
 
       .diaper-item {
@@ -190,13 +202,13 @@
         justify-content: space-between;
         align-items: center;
         padding: 15px 20px;
-        background: white;
-        border-bottom: 1px solid #eee;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border-lighter);
         transition: background 0.2s;
       }
 
       .diaper-item:hover {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
       }
 
       .diaper-item:last-child {
@@ -209,13 +221,13 @@
 
       .diaper-time {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 5px;
       }
 
       .diaper-details {
         font-size: 14px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .diaper-badge {
@@ -281,6 +293,9 @@
       let currentDaysRange =
         parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
       let selectedChildId = null; // null means show first/only child
+      let barChartInstance = null; // Track chart instance for proper cleanup
+      let poopPieChartInstance = null;
+      let peePieChartInstance = null;
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastDiaperChildFilter");
@@ -353,6 +368,7 @@
               <div class="empty-state-icon">🧷</div>
               <h2>No Diaper Changes Yet</h2>
               <p>Start tracking diaper changes from the home page</p>
+              <button class="button" onclick="window.location.href='/'">Go Home</button>
             </div>
           `;
         } else {
@@ -380,7 +396,6 @@
                   id="childDisplay"
                   value="${allChildren[0].name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
                 />
               `
                   : `
@@ -782,7 +797,12 @@
       function renderBarChart(chartData) {
         const ctx = document.getElementById("diaperChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart instance if it exists
+        if (barChartInstance) {
+          barChartInstance.destroy();
+        }
+
+        barChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,
@@ -837,7 +857,7 @@
               },
             },
             scales: {
-              y: {
+              y: getChartScaleOptions('y', {
                 beginAtZero: true,
                 title: {
                   display: true,
@@ -853,10 +873,7 @@
                     size: 12,
                   },
                 },
-                grid: {
-                  color: "rgba(0, 0, 0, 0.05)",
-                },
-              },
+              }),
               x: {
                 ticks: {
                   font: {
@@ -875,6 +892,11 @@
       function renderPoopPieChart(chartData) {
         const ctx = document.getElementById("poopPieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (poopPieChartInstance) {
+          poopPieChartInstance.destroy();
+        }
+
         const colors = {
           Light: {
             bg: "rgba(139, 69, 19, 0.5)",
@@ -901,7 +923,7 @@
           (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        poopPieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -957,6 +979,11 @@
       function renderPeePieChart(chartData) {
         const ctx = document.getElementById("peePieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (peePieChartInstance) {
+          peePieChartInstance.destroy();
+        }
+
         const colors = {
           Light: {
             bg: "rgba(255, 215, 0, 0.5)",
@@ -983,7 +1010,7 @@
           (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        peePieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -1069,6 +1096,12 @@
 
       // Load data on page load
       loadDiaperChanges();
+
+      // Listen for theme changes and update charts
+      window.addEventListener('themechange', () => {
+        const charts = [barChartInstance, poopPieChartInstance, peePieChartInstance].filter(c => c);
+        updateChartsForTheme(charts);
+      });
     </script>
   </body>
 </html>

src/baby_monitor/static/feedings.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Feedings - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
+    <script src="/chart-theme.js"></script>
     <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
@@ -16,7 +19,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
         min-height: 100vh;
         max-width: 800px;
         margin: 2rem auto;
@@ -24,26 +27,27 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -79,13 +83,13 @@
       .loading {
         text-align: center;
         padding: 40px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state-icon {
@@ -94,7 +98,7 @@
       }
 
       .empty-state h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
       }
 
@@ -105,12 +109,12 @@
       .chart-container {
         margin-bottom: 40px;
         padding: 20px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
       }
 
       .chart-container h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -148,14 +152,14 @@
       }
 
       .stat-card {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         padding: 20px;
         border-radius: 8px;
         text-align: center;
       }
 
       .stat-card h3 {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 14px;
         font-weight: 600;
         text-transform: uppercase;
@@ -163,7 +167,7 @@
       }
 
       .stat-card .stat-value {
-        color: #333;
+        color: var(--text-primary);
         font-size: 32px;
         font-weight: 700;
       }
@@ -182,21 +186,34 @@
 
       .controls label {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
       }
 
-      .controls select {
+      .controls select,
+      .controls input {
         padding: 8px 16px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         cursor: pointer;
-        background: white;
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+
+      .controls select:focus,
+      .controls input:focus {
+        outline: none;
+        border-color: var(--input-focus-border);
+      }
+
+      .controls input[readonly] {
+        opacity: 0.6;
+        cursor: default;
       }
 
       .controls select:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: var(--input-focus-border);
       }
 
       .feedings-list {
@@ -204,7 +221,7 @@
       }
 
       .feedings-list h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -212,9 +229,9 @@
       .feedings-scroll {
         max-height: 500px;
         overflow-y: auto;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
       }
 
       .feeding-item {
@@ -222,13 +239,13 @@
         justify-content: space-between;
         align-items: center;
         padding: 15px 20px;
-        background: white;
-        border-bottom: 1px solid #eee;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border-lighter);
         transition: background 0.2s;
       }
 
       .feeding-item:hover {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
       }
 
       .feeding-item:last-child {
@@ -241,13 +258,13 @@
 
       .feeding-time {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 5px;
       }
 
       .feeding-details {
         font-size: 14px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .feeding-type-badge {
@@ -319,6 +336,8 @@
         parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
       let selectedChildId = null; // null means show first/only child
       let barChartInstance = null;
+      let pieChartInstance = null;
+      let durationChartInstance = null;
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastFeedingChildFilter");
@@ -385,22 +404,26 @@
       function displayFeedings(feedings) {
         const content = document.getElementById("content");
 
-        if (feedings.length === 0) {
+        // Check if we have children data
+        if (allChildren.length === 0) {
           content.innerHTML = `
             <div class="empty-state">
-              <div class="empty-state-icon">🍼</div>
-              <h2>No Feedings Yet</h2>
-              <p>Start tracking feeding sessions from the home page</p>
+              <div class="empty-state-icon">👶</div>
+              <h2>No Children Added</h2>
+              <p>Please add a child first before tracking feedings</p>
+              <button class="button" onclick="window.location.href='/add-child.html'">Add Child</button>
             </div>
           `;
-        } else {
-          // Prepare chart data
-          const barChartData = prepareBarChartData(feedings);
-          const pieChartData = preparePieChartData(feedings);
-          const durationChartData = prepareDurationChartData(feedings);
+          return;
+        }
 
-          // Build child dropdown options
-          const childOptions = allChildren
+        // Prepare chart data (works with empty arrays too)
+        const barChartData = prepareBarChartData(feedings);
+        const pieChartData = preparePieChartData(feedings);
+        const durationChartData = prepareDurationChartData(feedings);
+
+        // Build child dropdown options
+        const childOptions = allChildren
             .map(
               (child) =>
                 `<option value="${child.id}" ${selectedChildId === child.id ? "selected" : ""}>${child.name}</option>`,
@@ -418,7 +441,6 @@
                   id="childDisplay"
                   value="${allChildren[0].name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
                 />
               `
                   : `
@@ -471,7 +493,6 @@
 
           // Render feeding list
           renderFeedingList(feedings);
-        }
       }
 
       function renderFeedingList(feedings) {
@@ -919,7 +940,7 @@
                   display: false,
                 },
               },
-              y: {
+              y: getChartScaleOptions('y', {
                 stacked: true,
                 beginAtZero: true,
                 title: {
@@ -938,10 +959,7 @@
                     return Math.round(value) + "m";
                   },
                 },
-                grid: {
-                  color: "rgba(0, 0, 0, 0.05)",
-                },
-              },
+              }),
             },
             plugins: {
               legend: {
@@ -979,6 +997,11 @@
       function renderPieChart(chartData) {
         const ctx = document.getElementById("pieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (pieChartInstance) {
+          pieChartInstance.destroy();
+        }
+
         // Color mapping for each type
         const colorMap = {
           "Left Breast": {
@@ -1003,7 +1026,7 @@
           (label) => colorMap[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        pieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -1059,7 +1082,12 @@
       function renderDurationChart(chartData) {
         const ctx = document.getElementById("durationChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart instance if it exists
+        if (durationChartInstance) {
+          durationChartInstance.destroy();
+        }
+
+        durationChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,
@@ -1099,7 +1127,7 @@
               },
             },
             scales: {
-              y: {
+              y: getChartScaleOptions('y', {
                 beginAtZero: true,
                 title: {
                   display: true,
@@ -1115,11 +1143,8 @@
                     size: 12,
                   },
                 },
-                grid: {
-                  color: "rgba(0, 0, 0, 0.05)",
-                },
-              },
-              x: {
+              }),
+              x: getChartScaleOptions('x', {
                 title: {
                   display: true,
                   text: "Duration (minutes)",
@@ -1136,7 +1161,7 @@
                 grid: {
                   display: false,
                 },
-              },
+              }),
             },
           },
         });
@@ -1175,6 +1200,12 @@
 
       // Load data on page load
       loadFeedings();
+
+      // Listen for theme changes and update charts
+      window.addEventListener('themechange', () => {
+        const charts = [barChartInstance, pieChartInstance, durationChartInstance].filter(c => c);
+        updateChartsForTheme(charts);
+      });
     </script>
   </body>
 </html>

src/baby_monitor/static/index.html

@@ -3,28 +3,36 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Baby Monitor</title>
-    <link rel="stylesheet" href="/menu.css" />
+    <title>Baby Monitor</title>    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
+    <script src="/chart-theme.js"></script>    <link rel="stylesheet" href="/menu.css" />
     <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
       body {
         font-family: Arial, sans-serif;
         max-width: 800px;
         margin: 2rem auto;
         padding: 0 1rem;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
+        overflow-x: hidden;
       }
       .container {
-        background: white;
+        background: var(--bg-secondary);
         padding: 2rem;
         border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--shadow-md);
       }
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 1rem;
       }
       .greeting {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 1.1rem;
         margin-bottom: 2rem;
       }
@@ -59,7 +67,9 @@
         padding: 2rem;
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
+        color: white;
         border-radius: 8px;
         transition:
           transform 0.2s,
@@ -68,13 +78,16 @@
       .feeding-button:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
       }
       .feeding-button.active {
         background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
+        background-color: #f44336;
       }
       .feeding-button.active:hover {
         background: linear-gradient(135deg, #e91e63 0%, #f44336 100%);
+        background-color: #e91e63;
       }
       .feeding-info {
         font-size: 0.9rem;
@@ -97,7 +110,7 @@
         display: flex;
       }
       .modal-content {
-        background: white;
+        background: var(--bg-secondary);
         padding: 2rem;
         border-radius: 8px;
         max-width: 400px;
@@ -107,7 +120,7 @@
       .modal h2 {
         margin-top: 0;
         margin-bottom: 1.5rem;
-        color: #333;
+        color: var(--text-primary);
       }
       .form-group {
         margin-bottom: 1rem;
@@ -115,13 +128,13 @@
       .form-group label {
         display: block;
         margin-bottom: 0.5rem;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
       }
       .form-group select {
         width: 100%;
         padding: 0.75rem;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         font-size: 1rem;
       }
@@ -145,7 +158,9 @@
         padding: 2rem;
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
+        color: white;
         border-radius: 8px;
         transition:
           transform 0.2s,
@@ -153,20 +168,69 @@
       }
       .sleep-button:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
       }
       .sleep-button.active {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
       }
       .sleep-button.active:hover {
-        background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
       }
       .sleep-info {
         font-size: 0.9rem;
         margin-top: 0.5rem;
         opacity: 0.9;
       }
+      .recent-activity {
+        margin-top: 2rem;
+        padding: 1.5rem;
+        background: var(--bg-tertiary);
+        border-radius: 8px;
+      }
+      .recent-activity h3 {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        color: var(--text-primary);
+        font-size: 1.1rem;
+      }
+      .activity-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .activity-card {
+        background: var(--bg-secondary);
+        padding: 1rem;
+        border-radius: 6px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+      .activity-card .icon {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+      }
+      .activity-card .type {
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.25rem;
+      }
+      .activity-card .time {
+        font-size: 0.85rem;
+        color: var(--text-secondary);
+      }
+      .activity-card .details {
+        font-size: 0.85rem;
+        color: #888;
+        margin-top: 0.5rem;
+      }
+      .activity-card.empty {
+        opacity: 0.5;
+        font-style: italic;
+        color: #999;
+      }
     </style>
   </head>
   <body>
@@ -240,6 +304,9 @@
       const token = localStorage.getItem("access_token");
       const username = localStorage.getItem("username");
 
+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
       // Check if user is logged in
       if (!token) {
         window.location.href = "/login.html";
@@ -262,11 +329,6 @@
             }
           })
           .then((user) => {
-            // Initialize burger menu
-            initBurgerMenu({
-              includeHome: true,
-            });
-
             // Check if user has any children
             return fetch("/api/children", {
               headers: {
@@ -321,6 +383,7 @@
       let activeSleep = null;
       let lastSleep = null;
       let sleepUpdateTimerInterval = null;
+      let lastDiaperChange = null;
 
       async function loadFeedingStatus(children) {
         userChildren = children;
@@ -337,8 +400,8 @@
             activeFeeding = await activeResponse.json();
           }
 
-          // Fetch all feedings to get the last one
-          const feedingsResponse = await fetch("/api/feedings", {
+          // Fetch the 10 most recent feedings to calculate the most recent session
+          const feedingsResponse = await fetch("/api/feedings?limit=10", {
             headers: {
               Authorization: `Bearer ${token}`,
             },
@@ -347,8 +410,68 @@
           if (feedingsResponse.ok) {
             const feedings = await feedingsResponse.json();
             if (feedings.length > 0) {
-              // Feedings are ordered by start_time desc, so first is most recent
-              lastFeeding = feedings[0];
+              // Calculate the most recent feeding session
+              let sessionStart = feedings[0].start_time;
+              let sessionEnd = feedings[0].end_time || feedings[0].start_time;
+              let sessionChildId = feedings[0].child_id;
+              let sessionEntries = [feedings[0]];
+
+              for (let i = 1; i < feedings.length; i++) {
+                const entry = feedings[i];
+                // Only group entries for the same child (ignore feeding type)
+                if (entry.child_id !== sessionChildId) {
+                  break;
+                }
+                // If the gap between this entry's end_time and current sessionStart is more than 30 min, stop
+                const prevEnd = entry.end_time || entry.start_time;
+                const sessionStartDate = new Date(sessionStart);
+                const prevEndDate = new Date(prevEnd);
+                const diffMins = Math.abs(
+                  (sessionStartDate - prevEndDate) / 60000,
+                );
+                if (diffMins > 30) {
+                  break;
+                }
+                // Extend session to include this entry
+                sessionStart = entry.start_time;
+                sessionEntries.push(entry);
+              }
+
+              // Calculate accumulated feeding time for all events in the session
+              let accumulatedMinutes = 0;
+              sessionEntries.forEach((entry) => {
+                if (entry.end_time && entry.start_time) {
+                  const start = new Date(entry.start_time);
+                  const end = new Date(entry.end_time);
+                  const diffMs = end - start;
+                  if (diffMs > 0) {
+                    accumulatedMinutes += Math.floor(diffMs / 60000);
+                  }
+                }
+              });
+
+              // Build a string showing all feeding types used during the session
+              const feedingTypesSet = new Set();
+              sessionEntries.forEach((entry) => {
+                if (entry.feeding_type) {
+                  feedingTypesSet.add(entry.feeding_type);
+                }
+              });
+              const feedingTypesString = Array.from(feedingTypesSet)
+                .map(formatFeedingType)
+                .join(", ");
+
+              // Compose a session object
+              lastFeeding = {
+                child_id: sessionChildId,
+                feeding_type: feedings[0].feeding_type,
+                start_time: sessionStart,
+                end_time: sessionEnd,
+                entries: sessionEntries,
+                child_name: feedings[0].child_name,
+                accumulated_minutes: accumulatedMinutes,
+                feeding_types_string: feedingTypesString,
+              };
             }
           }
 
@@ -376,6 +499,20 @@
               lastSleep = sleeps[0];
             }
           }
+
+          // Fetch all diaper changes to get the last one
+          const diaperResponse = await fetch("/api/diaper-changes", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (diaperResponse.ok) {
+            const diapers = await diaperResponse.json();
+            if (diapers.length > 0) {
+              lastDiaperChange = diapers[0];
+            }
+          }
         } catch (error) {
           console.error("Error loading feeding status:", error);
         }
@@ -449,7 +586,7 @@
             </button>
           `
           : `
-            <button class="feeding-button" onclick="showStartFeedingModal()">
+            <button class="feeding-button" onclick="window.location.href='/log-feeding.html'">
               🍼 Started Feeding
             </button>
           `;
@@ -478,9 +615,100 @@
           </button>
           ${feedingButtonHtml}
           ${sleepButtonHtml}
+          ${buildRecentActivitySection()}
         `;
       }
 
+      function buildRecentActivitySection() {
+        // Build diaper card
+        const diaperCard = lastDiaperChange
+          ? `
+            <a href="/diapers.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">🧷</div>
+              <div class="type">Last Diaper</div>
+              <div class="time">${formatTime(lastDiaperChange.change_time)}</div>
+              <div class="details">
+                ${lastDiaperChange.poop_amount ? `💩 ${lastDiaperChange.poop_amount}` : ""}
+                ${lastDiaperChange.poop_amount && lastDiaperChange.pee_amount ? " • " : ""}
+                ${lastDiaperChange.pee_amount ? `💧 ${lastDiaperChange.pee_amount}` : ""}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/diapers.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">🧷</div>
+              <div class="type">No diaper changes yet</div>
+            </a>
+          `;
+
+        // Build feeding card
+        const feedingCard = lastFeeding
+          ? `
+            <a href="/feedings.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">🍼</div>
+              <div class="type">Last Feeding Session</div>
+              <div class="time">${formatTime(lastFeeding.start_time)}</div>
+              <div class="details">
+                ${lastFeeding.feeding_types_string ? `${lastFeeding.feeding_types_string}` : ""}
+                ${lastFeeding.feeding_types_string && lastFeeding.accumulated_minutes ? " • " : ""}
+                ${lastFeeding.accumulated_minutes} minutes total
+                ${lastFeeding.end_time ? "" : " (ongoing)"}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/feedings.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">🍼</div>
+              <div class="type">No feedings yet</div>
+            </a>
+          `;
+
+        // Build sleep card
+        const sleepCard = lastSleep
+          ? `
+            <a href="/sleep.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">😴</div>
+              <div class="type">Last Sleep</div>
+              <div class="time">${formatTime(lastSleep.start_time)}</div>
+              <div class="details">
+                Duration: ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/sleep.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">😴</div>
+              <div class="type">No sleep sessions yet</div>
+            </a>
+          `;
+
+        return `
+          <div class="recent-activity">
+            <h3>📊 Recent Activity</h3>
+            <div class="activity-grid">
+              ${diaperCard}
+              ${feedingCard}
+              ${sleepCard}
+            </div>
+          </div>
+        `;
+      }
+
+      function calculateDuration(startTime, endTime) {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const diffMs = end - start;
+        const diffMins = Math.floor(diffMs / 60000);
+
+        if (diffMins < 60) {
+          return `${diffMins} min`;
+        }
+
+        const hours = Math.floor(diffMins / 60);
+        const mins = diffMins % 60;
+        return `${hours}h ${mins}m`;
+      }
+
       function formatFeedingType(type) {
         const types = {
           left_breast: "Left Breast",
@@ -652,42 +880,7 @@
       }
 
       function showStartSleepModal() {
-        const modal = document.getElementById("startSleepModal");
-        const childSelect = document.getElementById("modalSleepChildId");
-
-        // Clear and populate child select or show single child
-        if (userChildren.length === 1) {
-          // Single child: replace dropdown with text display
-          const child = userChildren[0];
-          const formGroup = childSelect.parentElement;
-          formGroup.innerHTML = `
-            <label for="modalSleepChildName">Child</label>
-            <input
-              type="text"
-              id="modalSleepChildName"
-              value="${child.name}"
-              readonly
-              style="background-color: #f5f5f5; cursor: default;"
-            />
-            <input type="hidden" id="modalSleepChildId" value="${child.id}" />
-          `;
-        } else {
-          // Multiple children: show dropdown
-          childSelect.innerHTML = '<option value="">Select a child</option>';
-          userChildren.forEach((child) => {
-            const option = document.createElement("option");
-            option.value = child.id;
-            option.textContent = child.name;
-            childSelect.appendChild(option);
-          });
-
-          // Set default based on last sleep
-          if (lastSleep) {
-            childSelect.value = lastSleep.child_id;
-          }
-        }
-
-        modal.classList.add("show");
+        window.location.href = "/log-sleep.html";
       }
 
       function closeStartSleepModal() {

src/baby_monitor/static/log-diaper.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Log Diaper Change - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: var(--bg-primary);
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -24,22 +26,22 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--shadow-md);
         padding: 40px;
         max-width: 500px;
         width: 100%;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -51,7 +53,7 @@
       label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -60,20 +62,28 @@
       select {
         width: 100%;
         padding: 12px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus,
       select:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: #f093fb;
+      }
+
+      input[readonly] {
+        opacity: 0.6;
+        cursor: default;
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-pink);
+        background-color: #f093fb;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -90,7 +100,7 @@
 
       .button:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
       }
 
       .button:active {
@@ -137,25 +147,25 @@
 
       .help-text {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 4px;
       }
 
       .loading {
         text-align: center;
         padding: 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .section-title {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 13px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin: 25px 0 15px 0;
         padding-top: 15px;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--border-lighter);
       }
 
       .section-title:first-of-type {
@@ -299,7 +309,6 @@
                   id="childName"
                   value="${child.name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default;"
                 />
                 <input type="hidden" id="childSelect" name="childSelect" value="${child.id}" />
               `;
@@ -336,6 +345,29 @@
                     lastDiaperChange.child_id;
                 }
               }
+
+              // Prepopulate poop and pee fields from most recent entry
+              try {
+                const response = await fetch("/api/diaper-changes", {
+                  headers: { Authorization: `Bearer ${token}` },
+                });
+                if (response.ok) {
+                  const changes = await response.json();
+                  if (changes.length > 0) {
+                    const last = changes[0];
+                    document.getElementById("poopAmount").value =
+                      last.poop_amount || "";
+                    document.getElementById("poopColor").value =
+                      last.poop_color || "";
+                    document.getElementById("peeAmount").value =
+                      last.pee_amount || "";
+                    document.getElementById("peeColor").value =
+                      last.pee_color || "";
+                  }
+                }
+              } catch (error) {
+                // Ignore error, just use default
+              }
             }
           } else {
             showMessage("Failed to load children", "error");

src/baby_monitor/static/log-feeding.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Log Feeding - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: var(--bg-primary);
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -24,22 +26,22 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--shadow-md);
         padding: 40px;
         max-width: 500px;
         width: 100%;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -51,7 +53,7 @@
       label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -60,10 +62,12 @@
       select {
         width: 100%;
         padding: 12px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus,
@@ -72,8 +76,14 @@
         border-color: #667eea;
       }
 
+      input[readonly] {
+        opacity: 0.6;
+        cursor: default;
+      }
+
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -137,14 +147,14 @@
 
       .help-text {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 4px;
       }
 
       .loading {
         text-align: center;
         padding: 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
     </style>
   </head>
@@ -281,7 +291,6 @@
                   id="childName"
                   value="${child.name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default;"
                 />
                 <input type="hidden" id="childId" name="childId" value="${child.id}" />
               `;
@@ -303,6 +312,22 @@
             // If editing, load the feeding data
             if (isEditMode) {
               loadFeedingData();
+            } else {
+              // Set default feeding type to most recent log entry
+              try {
+                const response = await fetch("/api/feedings", {
+                  headers: { Authorization: `Bearer ${token}` },
+                });
+                if (response.ok) {
+                  const feedings = await response.json();
+                  if (feedings.length > 0) {
+                    document.getElementById("feedingType").value =
+                      feedings[0].feeding_type;
+                  }
+                }
+              } catch (error) {
+                // Ignore error, just use default
+              }
             }
           } else {
             showMessage("Failed to load children", "error");

src/baby_monitor/static/log-sleep.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Log Sleep - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background-color: var(--bg-primary);
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -24,22 +26,22 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--shadow-md);
         padding: 40px;
         max-width: 500px;
         width: 100%;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -51,7 +53,7 @@
       label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -60,10 +62,12 @@
       select {
         width: 100%;
         padding: 12px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus,
@@ -72,8 +76,14 @@
         border-color: #4facfe;
       }
 
+      input[readonly] {
+        opacity: 0.6;
+        cursor: default;
+      }
+
       .button {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -137,14 +147,14 @@
 
       .help-text {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 4px;
       }
 
       .loading {
         text-align: center;
         padding: 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
     </style>
   </head>
@@ -271,7 +281,6 @@
                   id="childName"
                   value="${child.name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default;"
                 />
                 <input type="hidden" id="childId" name="childId" value="${child.id}" />
               `;

src/baby_monitor/static/login.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       body {
         font-family: Arial, sans-serif;
@@ -12,27 +14,33 @@
         align-items: center;
         height: 100vh;
         margin: 0;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
       }
       .login-container {
-        background: white;
+        background: var(--bg-secondary);
         padding: 2rem;
         border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--shadow-md);
         width: 300px;
       }
       h1 {
         text-align: center;
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 1.5rem;
       }
       input {
         width: 100%;
         padding: 0.75rem;
         margin-bottom: 1rem;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         box-sizing: border-box;
+        background-color: var(--input-bg);
+        color: var(--input-text);
+      }
+      input:focus {
+        outline: none;
+        border-color: var(--input-focus-border);
       }
       button {
         width: 100%;

src/baby_monitor/static/menu.css

@@ -5,18 +5,19 @@
   left: 1rem;
   cursor: pointer;
   z-index: 1000;
-  background: white;
+  background: var(--bg-secondary, #ffffff);
   padding: 0.5rem;
   border-radius: 4px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0, 0, 0, 0.1));
+  transition: background 0.3s, box-shadow 0.3s;
 }
 
 .burger-menu div {
   width: 25px;
   height: 3px;
-  background-color: #333;
+  background-color: var(--text-primary, #333333);
   margin: 5px 0;
-  transition: 0.3s;
+  transition: background-color 0.3s;
 }
 
 .menu-backdrop {
@@ -37,14 +38,15 @@
 .menu-overlay {
   position: fixed;
   top: 0;
-  left: -250px;
+  left: -100%;
   width: 250px;
   height: 100vh;
-  background: white;
-  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-  transition: left 0.3s;
+  background: var(--bg-secondary, #ffffff);
+  box-shadow: var(--shadow-md, 2px 0 10px rgba(0, 0, 0, 0.1));
+  transition: left 0.3s, background 0.3s;
   z-index: 999;
   padding: 4rem 1rem 1rem 1rem;
+  overflow: hidden;
 }
 
 .menu-overlay.open {
@@ -53,13 +55,14 @@
 
 .menu-item {
   padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border-color, #eeeeee);
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.2s, color 0.3s, border-color 0.3s;
+  color: var(--text-primary, #333333);
 }
 
 .menu-item:hover {
-  background: #f5f5f5;
+  background: var(--bg-tertiary, #f5f5f5);
 }
 
 .menu-item.admin {

src/baby_monitor/static/register.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor - Register</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: #667eea;
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -33,14 +35,14 @@
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
         text-align: center;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
         text-align: center;
@@ -61,20 +63,23 @@
       input {
         width: 100%;
         padding: 12px;
-        border: 2px solid #e0e0e0;
+        border: 2px solid #ccc;
         border-radius: 6px;
         font-size: 16px;
         transition: border-color 0.3s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: var(--input-focus-border);
       }
 
       .button {
         width: 100%;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 14px;
@@ -173,7 +178,7 @@
 
       .password-requirements {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 5px;
       }
 
@@ -186,7 +191,7 @@
     <div class="container">
       <div id="loadingContainer" class="loading-container">
         <div class="spinner"></div>
-        <p style="color: #666">Validating invitation...</p>
+        <p style="color: var(--text-secondary)">Validating invitation...</p>
       </div>
 
       <div id="registerContainer" class="hidden">

src/baby_monitor/static/settings.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Settings - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
@@ -16,7 +18,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
         min-height: 100vh;
         max-width: 800px;
         margin: 2rem auto;
@@ -24,20 +26,20 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -45,12 +47,12 @@
       .section {
         margin-bottom: 40px;
         padding: 20px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
       }
 
       .section h2 {
-        color: #333;
+        color: var(--text-primary);
         font-size: 20px;
         margin-bottom: 20px;
         display: flex;
@@ -65,7 +67,7 @@
       .form-group label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -73,24 +75,27 @@
       .form-group input {
         width: 100%;
         padding: 12px;
-        border: 2px solid #e0e0e0;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       .form-group input:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: var(--input-focus-border);
       }
 
       .form-group input:disabled {
-        background-color: #f5f5f5;
+        opacity: 0.6;
         cursor: not-allowed;
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-purple);
+        background-color: #667eea;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -125,7 +130,7 @@
       }
 
       .button.success {
-        background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+        background: var(--gradient-success);
       }
 
       .button.success:hover {
@@ -139,20 +144,20 @@
       }
 
       .child-card {
-        background: white;
+        background: var(--bg-secondary);
         padding: 20px;
         border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--shadow-md);
       }
 
       .child-card h3 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 18px;
       }
 
       .child-info {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 14px;
         margin-bottom: 15px;
       }
@@ -169,7 +174,7 @@
       .loading {
         text-align: center;
         padding: 40px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .alert {
@@ -200,7 +205,7 @@
         width: 100%;
         padding: 15px;
         margin-bottom: 15px;
-        background: white;
+        background: var(--bg-secondary);
         border: 2px solid #667eea;
         color: #667eea;
         border-radius: 8px;
@@ -233,6 +238,38 @@
         </div>
       </div>
 
+      <div class="section">
+        <h2>🌓 Theme Preference</h2>
+        <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 14px">
+          Choose how Baby Monitor looks to you.
+        </p>
+        <div class="form-group">
+          <div style="display: flex; flex-direction: column; gap: 15px">
+            <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="light">
+              <input type="radio" name="theme" value="light" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">☀️ Light Mode</div>
+                <div style="font-size: 12px; color: var(--text-secondary);">Always use light theme</div>
+              </div>
+            </label>
+            <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="dark">
+              <input type="radio" name="theme" value="dark" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">🌙 Dark Mode</div>
+                <div style="font-size: 12px; color: var(--text-secondary);">Always use dark theme</div>
+              </div>
+            </label>
+            <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="auto">
+              <input type="radio" name="theme" value="auto" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">🔄 Auto</div>
+                <div style="font-size: 12px; color: var(--text-secondary);">Match your browser settings</div>
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+
       <div class="section">
         <h2>🔑 Change Password</h2>
         <form id="userForm">
@@ -261,12 +298,12 @@
           "
         >
           <h3 style="color: #dc3545; margin-bottom: 15px">⚠️ Danger Zone</h3>
-          <p style="color: #666; margin-bottom: 15px; font-size: 14px">
+          <p style="color: var(--text-secondary); margin-bottom: 15px; font-size: 14px">
             Deleting your account is permanent and cannot be undone. This will:
           </p>
           <ul
             style="
-              color: #666;
+              color: var(--text-secondary);
               margin-bottom: 20px;
               margin-left: 20px;
               font-size: 14px;
@@ -286,7 +323,7 @@
           <button
             class="button"
             style="
-              background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+              background: var(--gradient-error);
             "
             onclick="confirmDeleteAccount()"
           >
@@ -338,15 +375,15 @@
     >
       <div
         style="
-          background: white;
+          background: var(--bg-secondary);
           padding: 30px;
           border-radius: 12px;
           max-width: 400px;
           width: 90%;
         "
       >
-        <h2 style="margin-top: 0">🔗 Redeem Share Code</h2>
-        <p style="color: #666; margin-bottom: 20px">
+        <h2 style="margin-top: 0; color: var(--text-primary);">🔗 Redeem Share Code</h2>
+        <p style="color: var(--text-secondary); margin-bottom: 20px">
           Enter the share code to get access to a child.
         </p>
         <form id="redeemCodeForm">
@@ -360,9 +397,11 @@
               style="
                 width: 100%;
                 padding: 12px;
-                border: 2px solid #e0e0e0;
+                border: 2px solid var(--border-color, #ddd);
                 border-radius: 6px;
                 font-size: 14px;
+                background-color: var(--input-bg);
+                color: var(--input-text);
               "
             />
           </div>
@@ -402,18 +441,18 @@
     >
       <div
         style="
-          background: white;
+          background: var(--bg-secondary);
           padding: 30px;
           border-radius: 12px;
           max-width: 400px;
           width: 90%;
         "
       >
-        <h2 style="margin-top: 0">🔗 Share Code</h2>
-        <p style="color: #666; margin-bottom: 20px" id="shareCodeChildName"></p>
+        <h2 style="margin-top: 0; color: var(--text-primary);">🔗 Share Code</h2>
+        <p style="color: var(--text-secondary); margin-bottom: 20px" id="shareCodeChildName"></p>
         <div
           style="
-            background: #f8f9fa;
+            background: var(--bg-tertiary);
             padding: 20px;
             border-radius: 8px;
             margin-bottom: 20px;
@@ -430,7 +469,7 @@
               style="
                 font-size: 24px;
                 font-weight: bold;
-                color: #333;
+                color: var(--text-primary);
                 letter-spacing: 2px;
               "
               id="shareCodeValue"
@@ -451,7 +490,7 @@
             </button>
           </div>
         </div>
-        <p style="color: #666; font-size: 14px; margin-bottom: 20px">
+        <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 20px">
           Share this code with another user. They can use it in Settings >
           Redeem Share Code to get access to this child.
           <br /><br />
@@ -478,6 +517,43 @@
       // Initialize burger menu
       initBurgerMenu({ includeHome: true });
 
+      // Initialize theme selector
+      function initThemeSelector() {
+        const currentTheme = window.getThemePreference();
+        const themeRadio = document.querySelector(`input[name="theme"][value="${currentTheme}"]`);
+        if (themeRadio) {
+          themeRadio.checked = true;
+        }
+
+        // Add visual feedback for selected theme option
+        updateThemeOptionStyles();
+
+        // Listen for theme changes
+        document.querySelectorAll('input[name="theme"]').forEach(radio => {
+          radio.addEventListener('change', (e) => {
+            window.setTheme(e.target.value);
+            updateThemeOptionStyles();
+          });
+        });
+      }
+
+      function updateThemeOptionStyles() {
+        const selectedValue = document.querySelector('input[name="theme"]:checked')?.value;
+        document.querySelectorAll('.theme-option').forEach(option => {
+          const isSelected = option.dataset.theme === selectedValue;
+          if (isSelected) {
+            option.style.borderColor = '#667eea';
+            option.style.background = 'rgba(102, 126, 234, 0.05)';
+          } else {
+            option.style.borderColor = '#e0e0e0';
+            option.style.background = 'transparent';
+          }
+        });
+      }
+
+      // Initialize theme selector on load
+      initThemeSelector();
+
       let currentUser = null;
       let children = [];
 

src/baby_monitor/static/sleep.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sleep - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
+    <script src="/chart-theme.js"></script>
     <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
@@ -16,7 +19,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background-color: #f0f0f0;
+        background-color: var(--bg-primary);
         min-height: 100vh;
         max-width: 800px;
         margin: 2rem auto;
@@ -24,26 +27,27 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
 
       .button {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background: var(--gradient-blue);
+        background-color: #4facfe;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -79,13 +83,13 @@
       .loading {
         text-align: center;
         padding: 40px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .empty-state-icon {
@@ -94,7 +98,7 @@
       }
 
       .empty-state h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
       }
 
@@ -105,12 +109,12 @@
       .chart-container {
         margin-bottom: 40px;
         padding: 20px;
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
       }
 
       .chart-container h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -148,14 +152,14 @@
       }
 
       .stat-card {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         padding: 20px;
         border-radius: 8px;
         text-align: center;
       }
 
       .stat-card h3 {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 14px;
         font-weight: 600;
         text-transform: uppercase;
@@ -169,13 +173,13 @@
       }
 
       .list-container {
-        background: #f8f9fa;
+        background: var(--bg-tertiary);
         border-radius: 8px;
         padding: 20px;
       }
 
       .list-container h2 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 20px;
         font-size: 20px;
       }
@@ -186,14 +190,14 @@
       }
 
       .sleep-item {
-        background: white;
+        background: var(--bg-secondary);
         padding: 16px;
         border-radius: 6px;
         margin-bottom: 12px;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--shadow-sm);
       }
 
       .sleep-item:last-child {
@@ -206,12 +210,12 @@
 
       .sleep-child {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 4px;
       }
 
       .sleep-time {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 14px;
         margin-bottom: 4px;
       }
@@ -252,23 +256,31 @@
 
       .controls label {
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
       }
 
-      .controls select {
+      .controls select,
+      .controls input {
         padding: 8px 16px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         cursor: pointer;
-        background: white;
+        background: var(--bg-secondary);
+        color: var(--text-primary);
       }
 
-      .controls select:focus {
+      .controls select:focus,
+      .controls input:focus {
         outline: none;
         border-color: #4facfe;
       }
 
+      .controls input[readonly] {
+        opacity: 0.6;
+        cursor: default;
+      }
+
       .badge {
         display: inline-block;
         padding: 4px 8px;
@@ -345,13 +357,16 @@
         }
       }
 
-      document
-        .getElementById("timeRangeFilter")
-        .addEventListener("change", function () {
-          // Save selection to localStorage
-          localStorage.setItem("lastSleepTimeRange", this.value);
-          loadData();
-        });
+      function attachTimeRangeListener() {
+        const timeRangeFilter = document.getElementById("timeRangeFilter");
+        if (timeRangeFilter) {
+          timeRangeFilter.addEventListener("change", function () {
+            // Save selection to localStorage
+            localStorage.setItem("lastSleepTimeRange", this.value);
+            renderCharts();
+          });
+        }
+      }
 
       async function loadData() {
         try {
@@ -385,9 +400,8 @@
                 id="childDisplay"
                 value="${child.name}"
                 readonly
-                style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
               />
-              
+
               <label for="timeRangeFilter">Time Range:</label>
               <select id="timeRangeFilter">
                 <option value="1">Last 24 hours</option>
@@ -443,6 +457,9 @@
             attachChildFilterListener();
           }
 
+          // Always attach time range listener after recreating the controls
+          attachTimeRangeListener();
+
           renderCharts();
         } catch (error) {
           console.error("Error loading data:", error);
@@ -473,19 +490,7 @@
           return matchesTimeRange && matchesChild;
         });
 
-        if (filteredSleeps.length === 0) {
-          document.getElementById("content").innerHTML = `
-            <div class="empty-state">
-              <div class="empty-state-icon">😴</div>
-              <h2>No Sleep Data</h2>
-              <p>Start tracking sleep sessions from the home page.</p>
-              <button class="button" onclick="window.location.href='/'">Go Home</button>
-            </div>
-          `;
-          return;
-        }
-
-        // Calculate stats
+        // Calculate stats (works with empty arrays too)
         const completedSleeps = filteredSleeps.filter(
           (sleep) => sleep.end_time,
         );
@@ -890,7 +895,7 @@
               x: {
                 stacked: true,
               },
-              y: {
+              y: getChartScaleOptions('y', {
                 stacked: true,
                 beginAtZero: true,
                 title: {
@@ -906,7 +911,7 @@
                     }
                   },
                 },
-              },
+              }),
             },
             plugins: {
               legend: {
@@ -1051,14 +1056,14 @@
             responsive: true,
             maintainAspectRatio: false,
             scales: {
-              y: {
+              y: getChartScaleOptions('y', {
                 beginAtZero: true,
                 ticks: {
                   callback: function (value) {
                     return value + "m";
                   },
                 },
-              },
+              }),
             },
             plugins: {
               legend: {
@@ -1098,6 +1103,9 @@
               </div>
               <div class="sleep-duration">${durationText}</div>
             </div>
+            <div class="sleep-actions">
+              <button class="edit-button" onclick="window.location.href='/log-sleep.html?id=${sleep.id}'">Edit</button>
+            </div>
           </div>
         `;
       }
@@ -1125,6 +1133,12 @@
 
       // Load data on page load
       loadData();
+
+      // Listen for theme changes and update charts
+      window.addEventListener('themechange', () => {
+        const charts = [barChartInstance, durationChartInstance, avgDurationChartInstance].filter(c => c);
+        updateChartsForTheme(charts);
+      });
     </script>
   </body>
 </html>

src/baby_monitor/static/theme-init.js

@@ -0,0 +1,76 @@
+/* Theme Initialization Script
+ * Handles theme detection and application based on localStorage preference or browser settings
+ * Must be loaded in <head> before page content to prevent flash of unstyled content
+ */
+
+(function() {
+    'use strict';
+    
+    // Get saved theme preference from localStorage
+    const savedTheme = localStorage.getItem('theme-preference');
+    
+    // Apply theme immediately to prevent FOUC (Flash of Unstyled Content)
+    function applyTheme(theme) {
+        const body = document.body || document.documentElement;
+        
+        if (theme === 'dark') {
+            body.classList.remove('light-mode');
+            body.classList.add('dark-mode');
+        } else if (theme === 'light') {
+            body.classList.remove('dark-mode');
+            body.classList.add('light-mode');
+        } else {
+            // 'auto' mode - remove manual override classes
+            body.classList.remove('dark-mode', 'light-mode');
+        }
+    }
+    
+    // Apply theme based on preference
+    if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'auto') {
+        applyTheme(savedTheme);
+    }
+    // If no preference saved, default to 'auto' (browser preference)
+    
+    // Make theme switching function available globally
+    window.setTheme = function(theme) {
+        if (theme === 'light' || theme === 'dark' || theme === 'auto') {
+            localStorage.setItem('theme-preference', theme);
+            applyTheme(theme);
+            
+            // Trigger custom event for components that need to update (e.g., charts)
+            window.dispatchEvent(new CustomEvent('themechange', { detail: { theme } }));
+        }
+    };
+    
+    // Get current effective theme (resolves 'auto' to actual theme)
+    window.getEffectiveTheme = function() {
+        const savedTheme = localStorage.getItem('theme-preference');
+        
+        if (savedTheme === 'dark') return 'dark';
+        if (savedTheme === 'light') return 'light';
+        
+        // 'auto' or no preference - check system preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    };
+    
+    // Get saved theme preference (returns 'light', 'dark', 'auto', or null)
+    window.getThemePreference = function() {
+        return localStorage.getItem('theme-preference') || 'auto';
+    };
+    
+    // Listen for system theme changes when in auto mode
+    if (window.matchMedia) {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', function(e) {
+            const savedTheme = localStorage.getItem('theme-preference');
+            // Only react to system changes if in auto mode
+            if (!savedTheme || savedTheme === 'auto') {
+                // Trigger theme change event for components that need to update
+                window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: 'auto' } }));
+            }
+        });
+    }
+})();