From 8d437387e180ca30bb9eb565d7d40256248d249a Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sat, 2 Aug 2025 14:40:07 +0500
Subject: [PATCH] dark mode

---
 .../templates/baseTemplate/index.html         | 89 ++++++++++---------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/baseTemplate/templates/baseTemplate/index.html b/baseTemplate/templates/baseTemplate/index.html
index e9172ef31..ee49708ce 100644
--- a/baseTemplate/templates/baseTemplate/index.html
+++ b/baseTemplate/templates/baseTemplate/index.html
@@ -44,14 +44,14 @@
             --bg-secondary: white;
             --bg-sidebar: #f3f1ff;
             --bg-sidebar-item: white;
-            --bg-hover: #f8f9ff;
+            --bg-hover: #e8e6ff;
             --text-primary: #2f3640;
-            --text-secondary: #94a3b8;
+            --text-secondary: #64748b;
             --text-heading: #1e293b;
             --border-color: #e8e9ff;
-            --shadow-color: rgba(0,0,0,0.08);
+            --shadow-color: rgba(0,0,0,0.05);
             --accent-color: #5856d6;
-            --accent-hover: #4a48c8;
+            --accent-hover: #4644c0;
             --danger-color: #ef4444;
             --success-color: #10b981;
             --warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
@@ -244,24 +244,26 @@
         /* Sidebar */
         #sidebar {
             width: 260px;
-            background: #f3f1ff;
+            background: var(--bg-sidebar);
             height: 100vh;
             position: fixed;
             left: 0;
             top: 0;
             overflow-y: auto;
             z-index: 1001;
+            transition: background-color 0.3s ease;
         }
         
         .sidebar-logo {
             padding: 20px;
-            background: white;
+            background: var(--bg-secondary);
             margin: 15px;
             border-radius: 12px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+            box-shadow: 0 2px 8px var(--shadow-color);
             display: flex;
             align-items: center;
             gap: 12px;
+            transition: background-color 0.3s ease;
         }
         
         .sidebar-logo .logo-icon {
@@ -290,38 +292,40 @@
         .sidebar-logo .logo-text .brand {
             font-size: 16px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading);
         }
         
         .sidebar-logo .logo-text .tagline {
             font-size: 11px;
-            color: #94a3b8;
+            color: var(--text-secondary);
             font-weight: 400;
         }
         
         
         #sidebar .server-info {
             padding: 15px;
-            background: white;
+            background: var(--bg-secondary);
             margin: 15px;
             border-radius: 12px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+            box-shadow: 0 2px 8px var(--shadow-color);
             display: flex;
             align-items: center;
             gap: 12px;
+            transition: background-color 0.3s ease;
         }
         
         #sidebar .server-info .server-icon {
             width: 40px;
             height: 40px;
-            background: #e8e6ff;
+            background: var(--bg-hover);
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #5856d6;
+            color: var(--accent-color);
             font-size: 18px;
             flex-shrink: 0;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
         
         #sidebar .server-info .server-details {
@@ -333,7 +337,7 @@
         
         #sidebar .server-info .info-line {
             font-size: 12px;
-            color: #64748b;
+            color: var(--text-secondary);
             display: flex;
             align-items: center;
             white-space: nowrap;
@@ -341,14 +345,14 @@
         }
         
         #sidebar .server-info .info-line strong {
-            color: #2f3640;
+            color: var(--text-primary);
             font-weight: 600;
             margin-right: 4px;
             flex-shrink: 0;
         }
         
         #sidebar .server-info .ip-value {
-            color: #5856d6;
+            color: var(--accent-color);
             font-weight: 600;
             cursor: pointer;
             position: relative;
@@ -356,7 +360,7 @@
         }
         
         #sidebar .server-info .ip-value:hover {
-            color: #4644c0;
+            color: var(--accent-hover);
         }
         
         #sidebar .server-info .ip-value::after {
@@ -375,8 +379,8 @@
         
         .copy-tooltip {
             position: absolute;
-            background: #2f3640;
-            color: white;
+            background: var(--text-primary);
+            color: var(--bg-secondary);
             padding: 4px 8px;
             border-radius: 4px;
             font-size: 11px;
@@ -395,7 +399,7 @@
         }
         
         #sidebar .section-header {
-            background: #5856d6;
+            background: var(--accent-color);
             color: white;
             padding: 8px 15px;
             margin: 15px;
@@ -405,13 +409,14 @@
             font-weight: 700;
             border-radius: 8px;
             text-align: center;
+            transition: background-color 0.3s ease;
         }
         
         #sidebar .menu-item {
             display: flex;
             align-items: center;
             padding: 12px 15px;
-            color: #64748b;
+            color: var(--text-secondary);
             text-decoration: none;
             transition: all 0.3s ease;
             position: relative;
@@ -420,14 +425,14 @@
             font-weight: 500;
             border-radius: 8px;
             margin: 2px 15px;
-            background: white;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            background: var(--bg-secondary);
+            box-shadow: 0 1px 3px var(--shadow-color);
         }
         
         #sidebar .menu-item:hover {
-            background: #f8f9ff;
-            color: #5856d6;
-            box-shadow: 0 2px 8px rgba(88,86,214,0.1);
+            background: var(--bg-hover);
+            color: var(--accent-color);
+            box-shadow: 0 2px 8px var(--shadow-color);
         }
         
         #sidebar .menu-item.active {
@@ -443,16 +448,17 @@
         #sidebar .menu-item .icon-wrapper {
             width: 32px;
             height: 32px;
-            background: #e8e6ff;
+            background: var(--bg-hover);
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
+            transition: background-color 0.3s ease;
         }
         
         #sidebar .menu-item:hover .icon-wrapper {
-            background: #e8e6ff;
+            background: var(--bg-hover);
         }
         
         #sidebar .menu-item.active .icon-wrapper {
@@ -461,7 +467,8 @@
         
         #sidebar .menu-item i {
             font-size: 18px;
-            color: #5856d6;
+            color: var(--accent-color);
+            transition: color 0.3s ease;
         }
         
         #sidebar .menu-item.active i {
@@ -486,8 +493,8 @@
         #sidebar .menu-item .chevron {
             margin-left: auto;
             font-size: 12px;
-            transition: transform 0.3s ease;
-            color: #94a3b8;
+            transition: transform 0.3s ease, color 0.3s ease;
+            color: var(--text-secondary);
         }
         
         #sidebar .menu-item.expanded .chevron {
@@ -514,7 +521,7 @@
         }
         
         #sidebar .submenu .menu-item:hover {
-            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
+            box-shadow: 0 2px 6px var(--shadow-color);
         }
         
         #sidebar .submenu .menu-item.delete {
@@ -550,16 +557,16 @@
         
         /* Parent menu item with active child */
         #sidebar .menu-item.has-active-child {
-            color: #5856d6;
+            color: var(--accent-color);
             font-weight: 600;
         }
         
         #sidebar .menu-item.has-active-child .icon-wrapper {
-            background: #e8e6ff;
+            background: var(--bg-hover);
         }
         
         #sidebar .menu-item.has-active-child i {
-            color: #5856d6;
+            color: var(--accent-color);
         }
         
         /* Main Content */
@@ -860,35 +867,35 @@
         }
         
         ::-webkit-scrollbar-track {
-            background: #f1f1f1;
+            background: var(--bg-primary);
         }
         
         ::-webkit-scrollbar-thumb {
-            background: #5b5fcf;
+            background: var(--accent-color);
             border-radius: 4px;
         }
         
         ::-webkit-scrollbar-thumb:hover {
-            background: #4b4fbf;
+            background: var(--accent-hover);
         }
         
         /* Mobile Menu Toggle */
         #mobile-menu-toggle {
             display: none;
-            background: #e8e6ff;
+            background: var(--bg-hover);
             border: none;
             width: 40px;
             height: 40px;
             border-radius: 10px;
             cursor: pointer;
             margin-right: 15px;
-            color: #5856d6;
+            color: var(--accent-color);
             font-size: 18px;
             transition: all 0.3s ease;
         }
         
         #mobile-menu-toggle:hover {
-            background: #5856d6;
+            background: var(--accent-color);
             color: white;
         }