enable dark mode

serverStatus/templates/serverStatus/litespeedStatus.html

@@ -68,6 +68,59 @@
         --console-bg: #1e293b;
         --console-text: #10b981;
     }
+    
+    [data-theme="dark"] {
+        /* Dark mode overrides */
+        --ls-gradient-start: #7c7ff3;
+        --ls-gradient-end: #9b5de5;
+        
+        --text-primary: #e4e4e7;
+        --text-secondary: #9ca3af;
+        --text-muted: #6b7280;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        
+        --bg-primary: #1a1a3e;
+        --bg-secondary: #1e1e42;
+        --bg-light: #252550;
+        --bg-hover: #252550;
+        --bg-gradient: linear-gradient(135deg, var(--ls-gradient-start) 0%, var(--ls-gradient-end) 100%);
+        
+        --border-color: #2a2a5e;
+        --border-light: #374151;
+        
+        --accent-color: #7c7ff3;
+        --accent-hover: #9b5de5;
+        --accent-bg: #3730a3;
+        --accent-focus: rgba(124, 127, 243, 0.1);
+        --accent-shadow: rgba(124, 127, 243, 0.3);
+        
+        --success-bg: #064e3b;
+        --success-color: #34d399;
+        --success-border: #065f46;
+        --success-accent: #10b981;
+        --success-dark: #34d399;
+        
+        --danger-bg: #7f1d1d;
+        --danger-color: #fca5a5;
+        --danger-border: #991b1b;
+        --danger-accent: #ef4444;
+        --danger-hover: #dc2626;
+        
+        --warning-bg: #78350f;
+        --warning-color: #fbbf24;
+        --warning-border: #92400e;
+        
+        --info-bg: #1e3a8a;
+        --info-color: #93c5fd;
+        --info-border: #1e40af;
+        
+        --shadow-light: rgba(0,0,0,0.3);
+        --shadow-medium: rgba(0,0,0,0.4);
+        --shadow-color: rgba(0,0,0,0.5);
+        
+        --console-bg: #0f0f23;
+        --console-text: #4ade80;
+    }
     .modern-container {
         max-width: 1200px;
         margin: 0 auto;
@@ -275,7 +328,7 @@
     }
     
     .btn-primary {
-        background: #667eea;
+        background: var(--accent-color);
         color: white;
     }
     
@@ -336,7 +389,7 @@
     }
     
     .module-item:hover {
-        background: #667eea;
+        background: var(--accent-color);
         color: white;
         border-color: var(--accent-color);
     }
@@ -367,7 +420,6 @@
     
     .alert-message {
         font-size: 0.875rem;
-        color: var(--text-secondary);
     }
     
     .alert-success {
@@ -463,6 +515,7 @@
         font-size: 0.875rem;
         transition: all 0.3s ease;
         background: var(--bg-primary);
+        color: var(--text-primary);
     }
     
     .form-control:focus {
@@ -474,7 +527,7 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
+        border: 2px solid var(--border-color);
         border-top: 2px solid var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -805,7 +858,7 @@
                             <i class="fas fa-exchange-alt"></i>
                             {% trans "Switch to Enterprise" %}
                         </button>
-                        <button type="button" ng-click="confrimtril()" class="btn btn-primary" style="background: #8b5cf6;">
+                        <button type="button" ng-click="confrimtril()" class="btn btn-primary" style="background: var(--accent-hover);">
                             <i class="fas fa-clock"></i>
                             {% trans "Get 15 Days Trial" %}
                         </button>

serverStatus/templates/serverStatus/topProcesses.html

@@ -63,6 +63,63 @@
         /* Console colors */
         --console-bg: #1e293b;
         --console-text: #10b981;
+        
+        /* Table specific */
+        --table-header-bg: #f8f9ff;
+        --command-bg: #f3f4f6;
+    }
+    
+    [data-theme="dark"] {
+        /* Dark mode overrides */
+        --text-primary: #e4e4e7;
+        --text-secondary: #9ca3af;
+        --text-muted: #6b7280;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        
+        --bg-primary: #1a1a3e;
+        --bg-secondary: #1e1e42;
+        --bg-light: #252550;
+        --bg-hover: #252550;
+        --bg-gradient: linear-gradient(135deg, #7c7ff3 0%, #9b5de5 100%);
+        
+        --border-color: #2a2a5e;
+        --border-light: #374151;
+        
+        --accent-color: #7c7ff3;
+        --accent-hover: #9b5de5;
+        --accent-bg: #3730a3;
+        --accent-focus: rgba(124, 127, 243, 0.1);
+        --accent-shadow: rgba(124, 127, 243, 0.3);
+        
+        --success-bg: #064e3b;
+        --success-color: #34d399;
+        --success-border: #065f46;
+        --success-accent: #10b981;
+        --success-dark: #34d399;
+        
+        --danger-bg: #7f1d1d;
+        --danger-color: #fca5a5;
+        --danger-border: #991b1b;
+        --danger-accent: #ef4444;
+        --danger-hover: #dc2626;
+        
+        --warning-bg: #78350f;
+        --warning-color: #fbbf24;
+        --warning-border: #92400e;
+        
+        --info-bg: #1e3a8a;
+        --info-color: #93c5fd;
+        --info-border: #1e40af;
+        
+        --shadow-light: rgba(0,0,0,0.3);
+        --shadow-medium: rgba(0,0,0,0.4);
+        --shadow-color: rgba(0,0,0,0.5);
+        
+        --console-bg: #0f0f23;
+        --console-text: #4ade80;
+        
+        --table-header-bg: #252550;
+        --command-bg: #16162e;
     }
     .modern-container {
         max-width: 1400px;
@@ -228,7 +285,7 @@
     
     .stat-label {
         font-size: 0.75rem;
-        color: #94a3b8;
+        color: var(--text-muted);
     }
     
     .processes-panel {
@@ -306,7 +363,7 @@
     .modern-table thead {
         position: sticky;
         top: 0;
-        background: var(--bg-hover);
+        background: var(--table-header-bg);
         z-index: 10;
     }
     
@@ -407,7 +464,7 @@
     .command-text {
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.75rem;
-        background: #f3f4f6;
+        background: var(--command-bg);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         max-width: 300px;
@@ -443,7 +500,8 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--bg-primary);
+        opacity: 0.9;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -453,7 +511,7 @@
     .loading-spinner {
         width: 40px;
         height: 40px;
-        border: 3px solid #f3f3f3;
+        border: 3px solid var(--border-color);
         border-top: 3px solid var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -463,7 +521,7 @@
         display: inline-flex;
         align-items: center;
         padding: 0.25rem 0.5rem;
-        background: #f3f4f6;
+        background: var(--bg-light);
         border-radius: 4px;
         font-size: 0.75rem;
         gap: 0.25rem;