feat: add dark/light theme toggle (#26)

krisharmaa · web-flow · commit 936dbb4de650 · 2025-10-15T04:55:26.000-03:00
diff --git a/app/static/script.js b/app/static/script.js
@@ -82,6 +82,25 @@ const SQL_EXAMPLES = {
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', function() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const htmlElement = document.documentElement;
+
+    // This function applies the theme and saves it to the browser's memory
+    const applyTheme = (theme) => {
+        htmlElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    };
+
+    // When the page loads, immediately apply the saved theme or default to 'light'
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    applyTheme(savedTheme);
+
+    // This is the main click event that switches the theme
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = htmlElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        applyTheme(newTheme);
+    });
     setupEventListeners();
     initializeCommandDropdowns();
     showNicknameModal();
@@ -591,38 +610,21 @@ function switchTab(tabName) {
 }
 
 function initializeDashboard() {
-    // Initialize CDC Activity Chart
     const ctx = document.getElementById('cdcActivityChart');
     if (ctx) {
+        // Check the current theme to set the correct colors for the chart
+        const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+        const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)';
+        const textColor = isDarkMode ? '#f9fafb' : '#64748b';
+
         cdcActivityChart = new Chart(ctx, {
             type: 'line',
             data: {
                 labels: [],
                 datasets: [
-                    {
-                        label: 'Create',
-                        data: [],
-                        borderColor: '#10b981',
-                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                        tension: 0.4,
-                        fill: true
-                    },
-                    {
-                        label: 'Update',
-                        data: [],
-                        borderColor: '#f59e0b',
-                        backgroundColor: 'rgba(245, 158, 11, 0.1)',
-                        tension: 0.4,
-                        fill: true
-                    },
-                    {
-                        label: 'Delete',
-                        data: [],
-                        borderColor: '#ef4444',
-                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
-                        tension: 0.4,
-                        fill: true
-                    }
+                    { label: 'Create', data: [], borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', tension: 0.4, fill: true },
+                    { label: 'Update', data: [], borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.1)', tension: 0.4, fill: true },
+                    { label: 'Delete', data: [], borderColor: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.1)', tension: 0.4, fill: true }
                 ]
             },
             options: {
@@ -631,14 +633,18 @@ function initializeDashboard() {
                 plugins: {
                     legend: {
                         position: 'bottom',
+                        labels: { color: textColor } // Use theme-aware text color
                     }
                 },
                 scales: {
                     y: {
                         beginAtZero: true,
-                        ticks: {
-                            stepSize: 1
-                        }
+                        ticks: { stepSize: 1, color: textColor }, // Use theme-aware text color
+                        grid: { color: gridColor } // Use theme-aware grid color
+                    },
+                    x: {
+                        ticks: { color: textColor }, // Use theme-aware text color
+                        grid: { color: gridColor } // Use theme-aware grid color
                     }
                 }
             }
diff --git a/app/static/styles.css b/app/static/styles.css
@@ -12,23 +12,62 @@
     --danger-color: #ef4444;
     --warning-color: #f59e0b;
     --success-color: #10b981;
+    
+    /* Light Theme Colors */
     --background: #f8fafc;
     --surface: #ffffff;
     --text-primary: #1e293b;
     --text-secondary: #64748b;
     --border: #e2e8f0;
+    --header-bg: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    --header-text: #ffffff;
+    --welcome-bg: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+    --welcome-border: #bae6fd;
+    --welcome-text: #0369a1;
+    --cdc-bg: linear-gradient(135deg, #f8fafc, #f1f5f9);
+    --create-label-bg: #dcfce7;
+    --create-label-text: #166534;
+    --update-label-bg: #fef3c7;
+    --update-label-text: #92400e;
+    --delete-label-bg: #fee2e2;
+    --delete-label-text: #991b1b;
     --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --radius: 0.5rem;
     --radius-lg: 1rem;
+    --theme-transition-duration: 0.3s;
+}
+
+[data-theme="dark"] {
+    /* Dark Theme Colors */
+    --background: #111827;
+    --surface: #1f2937;
+    --text-primary: #f9fafb;
+    --text-secondary: #9ca3af;
+    --border: #374151;
+    --header-bg: #1f2937;
+    --header-text: #f9fafb;
+    --welcome-bg: linear-gradient(135deg, #1e2937, #111827);
+    --welcome-border: #374151;
+    --welcome-text: #9ca3af;
+    --cdc-bg: linear-gradient(135deg, #111827, #1f2937);
+    --create-label-bg: #052e16;
+    --create-label-text: #bbf7d0;
+    --update-label-bg: #422006;
+    --update-label-text: #fde68a;
+    --delete-label-bg: #450a0a;
+    --delete-label-text: #fecaca;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
 }
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: var(--text-primary);
     min-height: 100vh;
     line-height: 1.6;
+    background: var(--background);
+    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
 }
 
 /* App Container */
@@ -38,13 +77,15 @@ body {
     min-height: 100vh;
     width: 100%;
     background: var(--surface);
+    transition: background-color var(--theme-transition-duration) ease;
 }
 
 /* Header */
 .header {
-    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-    color: white;
+    color: var(--header-text);
     box-shadow: var(--shadow);
+    background: var(--header-bg);
+    transition: background var(--theme-transition-duration) ease;
 }
 
 .header-content {
@@ -55,6 +96,12 @@ body {
     padding: 1rem 2rem;
 }
 
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem; 
+}
+
 .logo {
     display: flex;
     align-items: center;
@@ -280,7 +327,7 @@ body {
 
 .message-item.cdc {
     border-left: 4px solid var(--primary-color);
-    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+    background: var(--cdc-bg);
 }
 
 @keyframes slideIn {
@@ -300,6 +347,7 @@ body {
     line-height: 1.5;
     white-space: pre-wrap;
     word-break: break-word;
+    color: var(--text-primary);
 }
 
 .message-meta {
@@ -323,18 +371,18 @@ body {
 }
 
 .message-type.create {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--create-label-bg);
+    color: var(--create-label-text);
 }
 
 .message-type.update {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--update-label-bg);
+    color: var(--update-label-text);
 }
 
 .message-type.delete {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--delete-label-bg);
+    color: var(--delete-label-text);
 }
 
 /* Input Container */
@@ -362,6 +410,7 @@ body {
     font-size: 0.875rem;
     transition: all 0.2s;
     background: var(--surface);
+    color: var(--text-primary);
 }
 
 .input-group input:focus {
@@ -566,6 +615,7 @@ body {
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: left;
+    color: var(--text-primary);
     flex: 1;
 }
 
@@ -1184,6 +1234,7 @@ body {
     font-size: 1rem;
     transition: all 0.2s;
     background: var(--surface);
+    color: var(--text-primary);
 }
 
 .form-group input:focus {
@@ -1571,3 +1622,34 @@ body {
     min-width: 0;
     min-height: 0;
 }
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem; 
+}
+
+/* Styles for the new button */
+.theme-toggle-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--header-text);
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.theme-toggle-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    transform: scale(1.1);
+}
+
+.theme-toggle-button:active {
+    transform: scale(0.95);
+}
+#messageText, #nickname-input {
+    color: var(--text-primary);
+}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -54,18 +54,25 @@ <h2>Choose Your Nickname</h2>
                     <i class="fas fa-database"></i>
                     <h1>Debezium Real-Time Chat</h1>
                 </div>
-                <div class="user-info">
-                    <div class="connection-status">
-                        <span class="status-indicator" id="connection-status"></span>
-                        <span id="connection-text">Connecting...</span>
-                    </div>
-                    <div class="user-id">
-                        <i class="fas fa-user"></i>
-                        <span id="nickname-display">Guest</span>
-                        <button id="edit-nickname-btn" class="edit-nickname-btn" onclick="editNickname()" title="Edit Nickname">
-                            <i class="fas fa-edit"></i>
-                        </button>
+
+                <div class="header-right">
+                    <div class="user-info">
+                        <div class="connection-status">
+                            <span class="status-indicator" id="connection-status"></span>
+                            <span id="connection-text">Connecting...</span>
+                        </div>
+                        <div class="user-id">
+                            <i class="fas fa-user"></i>
+                            <span id="nickname-display">Guest</span>
+                            <button id="edit-nickname-btn" class="edit-nickname-btn" onclick="editNickname()" title="Edit Nickname">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                        </div>
                     </div>
+
+                    <button id="theme-toggle" class="theme-toggle-button" aria-label="Toggle dark mode">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                    </button>
                 </div>
             </div>
             
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -10,10 +10,14 @@ services:
     networks:
       - debezium-compose-network
     depends_on:
-      - connect-debezium
-      - zookeeper-debezium
-      - kafka-debezium
-      - tester_db
+      kafka-debezium:
+        condition: service_healthy
+      connect-debezium:
+        condition: service_started
+      zookeeper-debezium:
+        condition: service_started
+      tester_db:
+        condition: service_started
 
   zookeeper-debezium:
     image: debezium/zookeeper:1.4
@@ -38,6 +42,11 @@ services:
      - ZOOKEEPER_CONNECT=zookeeper-debezium:2181
     networks:
       - debezium-compose-network
+    healthcheck:
+      test: ["CMD-SHELL", "ps aux | grep -v grep | grep Kafka"]
+      interval: 15s
+      timeout: 10s
+      retries: 10
 
   connect-debezium:
     image: debezium/connect:1.4
diff --git a/package-lock.json b/package-lock.json
