From 9bff33400da7e63710ca9e0b7326cc78c331e855 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sat, 2 Aug 2025 19:10:17 +0500
Subject: [PATCH] dark mode

---
 .../templates/databases/OptimizeMySQL.html    | 210 +++++++++++++-----
 .../templates/databases/createDatabase.html   | 120 +++++-----
 .../templates/databases/deleteDatabase.html   | 116 +++++-----
 databases/templates/databases/index.html      |  93 ++++++++
 .../templates/databases/listDataBases.html    | 166 ++++++++------
 .../templates/databases/mysqlmanager.html     | 206 +++++++++++------
 databases/templates/databases/phpMyAdmin.html |  94 ++++++++
 .../templates/packages/createPackage.html     |  90 ++++----
 .../templates/packages/deletePackage.html     | 120 +++++-----
 packages/templates/packages/index.html        |  93 ++++++++
 packages/templates/packages/listPackages.html | 142 ++++++------
 .../templates/packages/modifyPackage.html     |  96 ++++----
 .../websiteFunctions/installJoomla.html       |  12 +-
 .../websiteFunctions/installMagento.html      |  16 +-
 .../websiteFunctions/installMautic.html       |   8 +-
 .../websiteFunctions/installPrestaShop.html   |  17 +-
 16 files changed, 1036 insertions(+), 563 deletions(-)

diff --git a/databases/templates/databases/OptimizeMySQL.html b/databases/templates/databases/OptimizeMySQL.html
index 997c9e8f4..f3fbea0fc 100644
--- a/databases/templates/databases/OptimizeMySQL.html
+++ b/databases/templates/databases/OptimizeMySQL.html
@@ -8,6 +8,96 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
+    :root {
+        /* Light mode variables */
+        --bg-primary: #f8f9ff;
+        --bg-secondary: #ffffff;
+        --bg-card: #ffffff;
+        --bg-hover: #f8f9ff;
+        --bg-gradient-primary: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        --bg-gradient-warning: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        --bg-gradient-info: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
+        --text-primary: #1e293b;
+        --text-secondary: #64748b;
+        --text-muted: #94a3b8;
+        --text-accent: #5b5fcf;
+        --text-warning: #92400e;
+        --text-warning-dark: #78350f;
+        --text-info: #475569;
+        --border-color: #e8e9ff;
+        --border-light: #cbd5e1;
+        --border-warning: #fcd34d;
+        --shadow-color: rgba(0,0,0,0.05);
+        --shadow-color-md: rgba(0,0,0,0.08);
+        --shadow-color-lg: rgba(0,0,0,0.1);
+        --shadow-color-xl: rgba(0,0,0,0.12);
+        --shadow-warning: rgba(252, 211, 77, 0.3);
+        --shadow-accent: rgba(91, 95, 207, 0.4);
+        --shadow-success: rgba(16, 185, 129, 0.4);
+        --shadow-danger: rgba(239, 68, 68, 0.4);
+        --shadow-info: rgba(59, 130, 246, 0.4);
+        --accent-color: #5b5fcf;
+        --accent-hover: #4547a9;
+        --success-color: #10b981;
+        --success-hover: #059669;
+        --danger-color: #ef4444;
+        --danger-hover: #dc2626;
+        --info-color: #3b82f6;
+        --info-hover: #2563eb;
+        --warning-color: #f59e0b;
+        --editor-bg: #1e293b;
+        --editor-header-bg: #334155;
+        --editor-text: #e2e8f0;
+        --editor-readonly-bg: #1a202c;
+        --editor-readonly-text: #94a3b8;
+        --bg-radial-overlay: rgba(91, 95, 207, 0.1);
+    }
+    
+    [data-theme="dark"] {
+        /* Dark mode variables */
+        --bg-primary: #0f0f23;
+        --bg-secondary: #1a1a3e;
+        --bg-card: #1e1e42;
+        --bg-hover: #252550;
+        --bg-gradient-primary: linear-gradient(135deg, #16162e 0%, #1a1a3e 100%);
+        --bg-gradient-warning: linear-gradient(135deg, #78350f 0%, #451a03 100%);
+        --bg-gradient-info: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        --text-primary: #e4e4e7;
+        --text-secondary: #9ca3af;
+        --text-muted: #6b7280;
+        --text-accent: #7c7ff3;
+        --text-warning: #fbbf24;
+        --text-warning-dark: #fbbf24;
+        --text-info: #cbd5e1;
+        --border-color: #2a2a5e;
+        --border-light: #374151;
+        --border-warning: #92400e;
+        --shadow-color: rgba(0,0,0,0.3);
+        --shadow-color-md: rgba(0,0,0,0.4);
+        --shadow-color-lg: rgba(0,0,0,0.5);
+        --shadow-color-xl: rgba(0,0,0,0.6);
+        --shadow-warning: rgba(120, 53, 15, 0.5);
+        --shadow-accent: rgba(124, 127, 243, 0.4);
+        --shadow-success: rgba(52, 211, 153, 0.4);
+        --shadow-danger: rgba(248, 113, 113, 0.4);
+        --shadow-info: rgba(96, 165, 250, 0.4);
+        --accent-color: #7c7ff3;
+        --accent-hover: #6b6ee8;
+        --success-color: #34d399;
+        --success-hover: #10b981;
+        --danger-color: #f87171;
+        --danger-hover: #ef4444;
+        --info-color: #60a5fa;
+        --info-hover: #3b82f6;
+        --warning-color: #fbbf24;
+        --editor-bg: #0f172a;
+        --editor-header-bg: #1e293b;
+        --editor-text: #e4e4e7;
+        --editor-readonly-bg: #111827;
+        --editor-readonly-text: #6b7280;
+        --bg-radial-overlay: rgba(124, 127, 243, 0.1);
+    }
+    
     .modern-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -18,7 +108,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient-primary);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,14 +122,14 @@
         left: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle at 30% 70%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
+        background: radial-gradient(circle at 30% 70%, var(--bg-radial-overlay) 0%, transparent 50%);
         animation: float 20s ease-in-out infinite;
     }
     
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -52,17 +142,17 @@
     .mysql-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 12px var(--shadow-color-lg);
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -78,8 +168,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color);
+        color: var(--bg-secondary);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -94,16 +184,16 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--shadow-accent);
+        color: var(--bg-secondary);
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary);
+        color: var(--text-accent);
+        border: 1px solid var(--border-color);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -117,15 +207,15 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover);
+        border-color: var(--accent-color);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 12px var(--shadow-accent);
     }
     
     .btn-success {
-        background: #10b981;
-        color: white;
+        background: var(--success-color);
+        color: var(--bg-secondary);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -139,14 +229,14 @@
     }
     
     .btn-success:hover {
-        background: #059669;
+        background: var(--success-hover);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
+        box-shadow: 0 8px 20px var(--shadow-success);
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color);
+        color: var(--bg-secondary);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -160,14 +250,14 @@
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 8px 20px var(--shadow-danger);
     }
     
     .btn-info {
-        background: #3b82f6;
-        color: white;
+        background: var(--info-color);
+        color: var(--bg-secondary);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -181,38 +271,38 @@
     }
     
     .btn-info:hover {
-        background: #2563eb;
+        background: var(--info-hover);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
+        box-shadow: 0 8px 20px var(--shadow-info);
     }
     
     .ram-info-card {
-        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-        border: 1px solid #fcd34d;
+        background: var(--bg-gradient-warning);
+        border: 1px solid var(--border-warning);
         border-radius: 12px;
         padding: 1.25rem 2rem;
         margin-bottom: 2rem;
         display: inline-flex;
         align-items: center;
         gap: 1rem;
-        box-shadow: 0 2px 8px rgba(252, 211, 77, 0.3);
+        box-shadow: 0 2px 8px var(--shadow-warning);
         animation: fadeInUp 0.5s ease-out;
     }
     
     .ram-icon {
         width: 48px;
         height: 48px;
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 8px var(--shadow-color-lg);
     }
     
     .ram-label {
         font-size: 0.875rem;
-        color: #92400e;
+        color: var(--text-warning);
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
@@ -222,7 +312,7 @@
     .ram-value {
         font-size: 1.75rem;
         font-weight: 700;
-        color: #78350f;
+        color: var(--text-warning-dark);
         margin: 0;
         line-height: 1;
     }
@@ -236,25 +326,25 @@
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-card);
         border-radius: 16px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 1px 3px var(--shadow-color), 0 10px 40px var(--shadow-color-md);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient-primary);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color);
     }
     
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
         margin: 0;
         display: flex;
         align-items: center;
@@ -266,15 +356,15 @@
     }
     
     .config-editor {
-        background: #1e293b;
+        background: var(--editor-bg);
         border-radius: 12px;
         overflow: hidden;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 20px var(--shadow-color-lg);
         animation: fadeInUp 0.5s ease-out;
     }
     
     .editor-header {
-        background: #334155;
+        background: var(--editor-header-bg);
         padding: 1rem 1.5rem;
         display: flex;
         justify-content: space-between;
@@ -282,7 +372,7 @@
     }
     
     .editor-title {
-        color: #e2e8f0;
+        color: var(--editor-text);
         font-size: 0.875rem;
         font-weight: 600;
         text-transform: uppercase;
@@ -305,22 +395,22 @@
     }
     
     .editor-dot.red {
-        background: #ef4444;
+        background: var(--danger-color);
     }
     
     .editor-dot.yellow {
-        background: #f59e0b;
+        background: var(--warning-color);
     }
     
     .editor-dot.green {
-        background: #10b981;
+        background: var(--success-color);
     }
     
     .editor-textarea {
         width: 100%;
         min-height: 500px;
-        background: #1e293b;
-        color: #e2e8f0;
+        background: var(--editor-bg);
+        color: var(--editor-text);
         border: none;
         padding: 1.5rem;
         font-family: 'Monaco', 'Consolas', monospace;
@@ -331,19 +421,19 @@
     
     .editor-textarea:focus {
         outline: none;
-        background: #1a202c;
+        background: var(--editor-readonly-bg);
     }
     
     .editor-textarea.readonly {
-        background: #1a202c;
-        color: #94a3b8;
+        background: var(--editor-readonly-bg);
+        color: var(--editor-readonly-text);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border: 3px solid var(--border-color);
+        border-top-color: var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -351,8 +441,8 @@
     }
     
     .recommendation-info {
-        background: #f0f4f8;
-        border: 1px solid #cbd5e1;
+        background: var(--bg-gradient-info);
+        border: 1px solid var(--border-light);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 1.5rem;
@@ -363,14 +453,14 @@
     }
     
     .recommendation-info i {
-        color: #3b82f6;
+        color: var(--info-color);
         font-size: 1.25rem;
         margin-top: 0.125rem;
     }
     
     .recommendation-info p {
         margin: 0;
-        color: #475569;
+        color: var(--text-info);
         font-size: 0.875rem;
         line-height: 1.6;
     }
diff --git a/databases/templates/databases/createDatabase.html b/databases/templates/databases/createDatabase.html
index 662896110..82c5f6a74 100644
--- a/databases/templates/databases/createDatabase.html
+++ b/databases/templates/databases/createDatabase.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px var(--accent-shadow, rgba(91,95,207,0.1));
     }
     
     /* Windows selectbox fixes */
@@ -113,8 +113,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -124,14 +124,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Website selector card */
     .website-selector-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -144,12 +144,12 @@
     
     /* Name preview */
     .name-preview {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 6px;
         padding: 8px 12px;
         font-size: 13px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-weight: 600;
         margin-top: 8px;
         display: inline-block;
@@ -178,8 +178,8 @@
     }
     
     .password-toggle {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-left: none;
         padding: 10px 14px;
         border-radius: 0 8px 8px 0;
@@ -188,19 +188,19 @@
     }
     
     .password-toggle:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--bg-active, #eef0ff);
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .password-toggle i {
-        color: #64748b;
+        color: var(--text-muted, #64748b);
         font-size: 16px;
     }
     
     /* Generated password section */
     .generated-password-box {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
         border-radius: 8px;
         padding: 16px;
         margin-top: 16px;
@@ -210,7 +210,7 @@
     .generated-password-label {
         font-size: 12px;
         font-weight: 600;
-        color: #2e7d32;
+        color: var(--success-text, #2e7d32);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin-bottom: 8px;
@@ -219,7 +219,7 @@
     .generated-password-value {
         font-family: 'Courier New', monospace;
         font-size: 14px;
-        color: #1b5e20;
+        color: var(--success-dark, #1b5e20);
         font-weight: 600;
         word-break: break-all;
         margin-bottom: 12px;
@@ -241,42 +241,42 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--text-white, white);
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
-        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4a4fc4);
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #ccc;
+        background: var(--bg-disabled, #ccc);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--bg-active, #eef0ff);
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .btn-success {
-        background: #66bb6a;
-        color: white;
+        background: var(--success-color, #66bb6a);
+        color: var(--text-white, white);
     }
     
     .btn-success:hover {
-        background: #4caf50;
-        box-shadow: 0 4px 12px rgba(102,187,106,0.3);
+        background: var(--success-hover, #4caf50);
+        box-shadow: 0 4px 12px var(--success-shadow, rgba(102,187,106,0.3));
         transform: translateY(-1px);
     }
     
@@ -302,15 +302,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     /* Loading spinner */
@@ -318,8 +318,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--bg-tertiary, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -334,13 +334,13 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Info box */
     .info-box {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
+        background: var(--info-bg, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 25px;
@@ -350,20 +350,20 @@
     }
     
     .info-box i {
-        color: #1976d2;
+        color: var(--info-color, #1976d2);
         font-size: 18px;
     }
     
     .info-box-text {
         font-size: 13px;
-        color: #1565c0;
+        color: var(--info-text, #1565c0);
         line-height: 1.5;
     }
     
     /* Help text */
     .help-text {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         margin-top: 6px;
     }
     
diff --git a/databases/templates/databases/deleteDatabase.html b/databases/templates/databases/deleteDatabase.html
index b8eae4dd0..1645e24a6 100644
--- a/databases/templates/databases/deleteDatabase.html
+++ b/databases/templates/databases/deleteDatabase.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #dc3545;
+        background: var(--danger-text, #dc3545);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #dc3545;
+        border-color: var(--danger-text, #dc3545);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #dc3545;
-        box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
+        border-color: var(--danger-text, #dc3545);
+        box-shadow: 0 0 0 3px var(--danger-bg, rgba(220,53,69,0.1));
     }
     
     /* Windows selectbox fixes */
@@ -113,8 +113,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -124,14 +124,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Website selector card */
     .website-selector-card {
-        background: #fff5f5;
-        border: 1px solid #ffdddd;
+        background: var(--danger-bg, #fff5f5);
+        border: 1px solid var(--danger-border, #ffdddd);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -144,8 +144,8 @@
     
     /* Database info card */
     .database-info-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -157,7 +157,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 12px 0;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .info-row:last-child {
@@ -167,20 +167,20 @@
     .info-label {
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .info-value {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         font-family: 'Courier New', monospace;
     }
     
     /* Warning box */
     .warning-box {
-        background: #fff3e0;
-        border: 1px solid #ffe0b2;
+        background: var(--warning-bg, #fff3e0);
+        border: 1px solid var(--warning-border, #ffe0b2);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -190,7 +190,7 @@
     }
     
     .warning-icon {
-        color: #ff9800;
+        color: var(--warning-text, #ff9800);
         font-size: 24px;
         flex-shrink: 0;
     }
@@ -202,13 +202,13 @@
     .warning-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .warning-text {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.6;
     }
     
@@ -219,7 +219,7 @@
     
     .warning-list li {
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 6px;
     }
     
@@ -239,38 +239,38 @@
     }
     
     .btn-danger {
-        background: #dc3545;
+        background: var(--danger-text, #dc3545);
         color: white;
     }
     
     .btn-danger:hover {
-        background: #c82333;
-        box-shadow: 0 4px 12px rgba(220,53,69,0.3);
+        background: var(--danger-hover, #c82333);
+        box-shadow: 0 4px 12px var(--danger-shadow, rgba(220,53,69,0.3));
         transform: translateY(-1px);
     }
     
     .btn-danger:disabled {
-        background: #ccc;
+        background: var(--text-disabled, #ccc);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--accent-bg, #eef0ff);
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     /* Confirmation section */
     .confirmation-section {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
         border-radius: 10px;
         padding: 25px;
         margin-top: 25px;
@@ -280,27 +280,27 @@
     
     .confirmation-icon {
         font-size: 48px;
-        color: #dc3545;
+        color: var(--danger-text, #dc3545);
         margin-bottom: 15px;
     }
     
     .confirmation-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .confirmation-text {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 20px;
     }
     
     .confirmation-database {
         font-size: 18px;
         font-weight: 700;
-        color: #dc3545;
+        color: var(--danger-text, #dc3545);
         margin-bottom: 25px;
         font-family: 'Courier New', monospace;
     }
@@ -328,15 +328,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     /* Loading spinner */
@@ -344,8 +344,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #dc3545;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--danger-text, #dc3545);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -360,25 +360,25 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Empty state */
     .empty-state {
         text-align: center;
         padding: 40px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     .empty-state i {
         font-size: 48px;
-        color: #e8e9ff;
+        color: var(--border-color, #e8e9ff);
         margin-bottom: 16px;
     }
     
     .empty-state-text {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Hide elements by default */
diff --git a/databases/templates/databases/index.html b/databases/templates/databases/index.html
index 58d8ba4e0..68204badb 100644
--- a/databases/templates/databases/index.html
+++ b/databases/templates/databases/index.html
@@ -7,6 +7,99 @@
 {% get_current_language as LANGUAGE_CODE %}
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
+<style>
+    /* Database Page Styles with Dark Mode Support */
+    .container {
+        background: var(--bg-primary, #f0f0ff);
+        min-height: 100vh;
+        padding: 20px;
+    }
+
+    #page-title {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+
+    #page-title h2 {
+        color: var(--text-primary, #2f3640);
+        font-size: 32px;
+        font-weight: 700;
+        margin-bottom: 10px;
+    }
+
+    #page-title p {
+        color: var(--text-secondary, #8893a7);
+        font-size: 16px;
+    }
+
+    .panel {
+        background: var(--bg-secondary, white);
+        border-radius: 12px;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
+    }
+
+    .panel-body {
+        padding: 30px;
+    }
+
+    .content-box-header {
+        color: var(--text-primary, #2f3640);
+        font-size: 24px;
+        font-weight: 700;
+        margin-bottom: 30px;
+        text-align: center;
+    }
+
+    .tile-box {
+        display: block;
+        text-decoration: none;
+        padding: 25px;
+        border-radius: 8px;
+        text-align: center;
+        transition: all 0.3s ease;
+        margin-bottom: 20px;
+    }
+
+    .tile-box.btn-primary {
+        background: var(--accent-color, #5b5fcf) !important;
+        color: white !important;
+        border: 1px solid var(--accent-color, #5b5fcf);
+    }
+
+    .tile-box.btn-primary:hover {
+        background: var(--accent-hover, #4b4fbf) !important;
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
+        transform: translateY(-2px);
+    }
+
+    .tile-box .tile-header {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 15px;
+        color: inherit;
+    }
+
+    .tile-box .tile-content-wrapper i {
+        font-size: 48px;
+        color: inherit;
+    }
+
+    .example-box-wrapper {
+        background: transparent;
+    }
+
+    .btn-min-width {
+        min-width: 250px;
+    }
+
+    @media (max-width: 768px) {
+        .btn-min-width {
+            min-width: 100%;
+        }
+    }
+</style>
+
 <div class="container">
 <div id="page-title">
    <h2>{% trans "Database Functions" %}</h2>
diff --git a/databases/templates/databases/listDataBases.html b/databases/templates/databases/listDataBases.html
index 251956110..3543ad325 100644
--- a/databases/templates/databases/listDataBases.html
+++ b/databases/templates/databases/listDataBases.html
@@ -29,29 +29,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -62,7 +62,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -75,7 +75,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -84,21 +84,21 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -120,8 +120,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -131,14 +131,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Website selector card */
     .website-selector-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -147,33 +147,33 @@
     /* Table styles */
     .modern-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 10px;
         overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.05));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .modern-table thead {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .modern-table th {
         padding: 16px 20px;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         text-align: left;
     }
     
     .modern-table td {
         padding: 16px 20px;
         font-size: 14px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0f0;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-color, #f0f0f0);
     }
     
     .modern-table tbody tr:last-child td {
@@ -181,14 +181,14 @@
     }
     
     .modern-table tbody tr:hover {
-        background: #fafbff;
+        background: var(--bg-hover, #fafbff);
     }
     
     /* Database name styles */
     .db-name {
         font-family: 'Courier New', monospace;
         font-weight: 600;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     /* Button styles */
@@ -207,25 +207,36 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
+        background: var(--accent-hover, #4a4fc4);
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #eef0ff);
+        border-color: var(--accent-color, #5b5fcf);
+    }
+    
+    .btn-success {
+        background: var(--success-text, #10b981);
+        color: white;
+    }
+    
+    .btn-success:hover {
+        background: var(--success-text, #059669);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        transform: translateY(-1px);
     }
     
     .btn-sm {
@@ -251,8 +262,8 @@
     
     /* Password change section */
     .password-change-section {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 25px;
         margin-bottom: 25px;
@@ -262,7 +273,7 @@
     .password-change-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -270,7 +281,7 @@
     }
     
     .password-change-title i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     /* Password input group */
@@ -287,8 +298,8 @@
     
     /* Generated password box */
     .generated-password-box {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-text, #c8e6c9);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 20px;
@@ -298,7 +309,7 @@
     .generated-password-label {
         font-size: 12px;
         font-weight: 600;
-        color: #2e7d32;
+        color: var(--success-text, #2e7d32);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin-bottom: 8px;
@@ -307,7 +318,7 @@
     .generated-password-value {
         font-family: 'Courier New', monospace;
         font-size: 14px;
-        color: #1b5e20;
+        color: var(--success-text, #1b5e20);
         font-weight: 600;
         word-break: break-all;
     }
@@ -316,12 +327,12 @@
     .modal-content {
         border-radius: 12px;
         border: none;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.1));
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px 12px 0 0;
         padding: 20px 25px;
     }
@@ -329,7 +340,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         display: flex;
         align-items: center;
         gap: 10px;
@@ -340,8 +351,8 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         border-radius: 0 0 12px 12px;
         padding: 15px 25px;
         display: flex;
@@ -354,6 +365,35 @@
         margin-top: 20px;
     }
     
+    /* Help text styles */
+    .help-text {
+        color: var(--text-secondary, #64748b);
+        font-size: 12px;
+    }
+    
+    /* Password group button wrapper */
+    .password-btn-wrapper {
+        margin-top: 28px;
+    }
+    
+    /* Generated password button wrapper */
+    .generated-password-btn {
+        margin-top: 10px;
+    }
+    
+    /* Modal separator */
+    .modal-separator {
+        margin: 25px 0;
+        border-color: var(--border-color, #e8e9ff);
+    }
+    
+    /* Current access title */
+    .current-access-title {
+        font-weight: 600;
+        margin-bottom: 15px;
+        color: var(--text-primary, #2f3640);
+    }
+    
     /* Alert styles */
     .alert {
         padding: 16px 20px;
@@ -371,15 +411,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-text, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-text, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     /* Loading spinner */
@@ -387,8 +427,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--border-color, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -514,7 +554,7 @@
                     <input type="password" class="form-control" ng-model="dbPassword" 
                            placeholder="{% trans 'Enter new password' %}" required>
                 </div>
-                <div style="margin-top: 28px;">
+                <div class="password-btn-wrapper">
                     <button type="button" ng-click="generatePassword()" class="btn btn-secondary">
                         <i class="fas fa-sync"></i>
                         {% trans "Generate" %}
@@ -525,7 +565,7 @@
             <div class="generated-password-box" ng-show="!generatedPasswordView">
                 <div class="generated-password-label">{% trans "Generated Password" %}</div>
                 <div class="generated-password-value">{$ dbPassword $}</div>
-                <button type="button" ng-click="usePassword()" class="btn btn-success btn-sm" style="margin-top: 10px;">
+                <button type="button" ng-click="usePassword()" class="btn btn-success btn-sm generated-password-btn">
                     <i class="fas fa-check"></i>
                     {% trans "Use This Password" %}
                 </button>
@@ -595,7 +635,7 @@
                                                                class="form-control" 
                                                                ng-model="$parent.remoteIP" 
                                                                required>
-                                                        <div class="help-text" style="margin-top: 6px;">
+                                                        <div class="help-text">
                                                             {% trans "Use % for wildcard (e.g., 192.168.1.% for subnet)" %}
                                                         </div>
                                                     </div>
@@ -606,9 +646,9 @@
                                                     </button>
                                                 </form>
                                                 
-                                                <hr style="margin: 25px 0;">
+                                                <hr class="modal-separator">
                                                 
-                                                <h5 style="font-weight: 600; margin-bottom: 15px;">{% trans "Current Access" %}</h5>
+                                                <h5 class="current-access-title">{% trans "Current Access" %}</h5>
                                                 <table class="modern-table ip-access-table">
                                                     <thead>
                                                         <tr>
diff --git a/databases/templates/databases/mysqlmanager.html b/databases/templates/databases/mysqlmanager.html
index 7c59e4a2b..f158ae5cc 100644
--- a/databases/templates/databases/mysqlmanager.html
+++ b/databases/templates/databases/mysqlmanager.html
@@ -8,6 +8,68 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
+    :root {
+        /* Light mode variables */
+        --bg-primary: #f8f9ff;
+        --bg-secondary: #ffffff;
+        --bg-card: #ffffff;
+        --bg-hover: #f8f9ff;
+        --bg-gradient-primary: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        --bg-gradient-uptime: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        --bg-gradient-connections: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+        --bg-gradient-slow-queries: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        --text-primary: #1e293b;
+        --text-secondary: #64748b;
+        --text-muted: #94a3b8;
+        --border-color: #e8e9ff;
+        --border-light: #f3f4f6;
+        --shadow-color: rgba(0,0,0,0.05);
+        --shadow-color-md: rgba(0,0,0,0.08);
+        --shadow-color-lg: rgba(0,0,0,0.12);
+        --accent-color: #5b5fcf;
+        --accent-hover: #4547a9;
+        --accent-light: #e0e7ff;
+        --success-color: #10b981;
+        --warning-color: #f59e0b;
+        --warning-bg: #fef3c7;
+        --warning-text: #92400e;
+        --info-color: #0ea5e9;
+        --success-bg: #d1fae5;
+        --success-text: #065f46;
+        --icon-color: #cbd5e1;
+    }
+    
+    [data-theme="dark"] {
+        /* Dark mode variables */
+        --bg-primary: #0f0f23;
+        --bg-secondary: #1a1a3e;
+        --bg-card: #1e1e42;
+        --bg-hover: #252550;
+        --bg-gradient-primary: linear-gradient(135deg, #16162e 0%, #1a1a3e 100%);
+        --bg-gradient-uptime: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        --bg-gradient-connections: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
+        --bg-gradient-slow-queries: linear-gradient(135deg, #78350f 0%, #451a03 100%);
+        --text-primary: #e4e4e7;
+        --text-secondary: #9ca3af;
+        --text-muted: #6b7280;
+        --border-color: #2a2a5e;
+        --border-light: #374151;
+        --shadow-color: rgba(0,0,0,0.3);
+        --shadow-color-md: rgba(0,0,0,0.4);
+        --shadow-color-lg: rgba(0,0,0,0.5);
+        --accent-color: #7c7ff3;
+        --accent-hover: #6b6ee8;
+        --accent-light: #3730a3;
+        --success-color: #34d399;
+        --warning-color: #fbbf24;
+        --warning-bg: #78350f;
+        --warning-text: #fbbf24;
+        --info-color: #60a5fa;
+        --success-bg: #064e3b;
+        --success-text: #34d399;
+        --icon-color: #6b7280;
+    }
+    
     .modern-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -18,7 +80,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient-primary);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,14 +94,14 @@
         right: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
+        background: radial-gradient(circle at 70% 30%, var(--accent-color, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -52,17 +114,17 @@
     .mysql-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 12px var(--shadow-color-lg);
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -78,8 +140,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color);
+        color: var(--bg-secondary);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -94,16 +156,16 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--shadow-color-lg);
+        color: var(--bg-secondary);
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary);
+        color: var(--accent-color);
+        border: 1px solid var(--border-color);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -117,10 +179,10 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover);
+        border-color: var(--accent-color);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 12px var(--shadow-color-md);
     }
     
     .stats-grid {
@@ -131,11 +193,11 @@
     }
     
     .stat-card {
-        background: white;
+        background: var(--bg-card);
         border-radius: 16px;
         padding: 2rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 1px 3px var(--shadow-color), 0 10px 40px var(--shadow-color-md);
+        border: 1px solid var(--border-color);
         position: relative;
         overflow: hidden;
         transition: all 0.3s ease;
@@ -144,22 +206,22 @@
     
     .stat-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.12);
+        box-shadow: 0 1px 3px var(--shadow-color), 0 20px 60px var(--shadow-color-lg);
     }
     
     .stat-card.uptime {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-        border-color: #bae6fd;
+        background: var(--bg-gradient-uptime);
+        border-color: var(--info-color);
     }
     
     .stat-card.connections {
-        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
-        border-color: #bbf7d0;
+        background: var(--bg-gradient-connections);
+        border-color: var(--success-color);
     }
     
     .stat-card.slow-queries {
-        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-        border-color: #fcd34d;
+        background: var(--bg-gradient-slow-queries);
+        border-color: var(--warning-color);
     }
     
     .stat-header {
@@ -172,7 +234,7 @@
     .stat-title {
         font-size: 1rem;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary);
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
@@ -180,43 +242,43 @@
     .stat-icon {
         width: 48px;
         height: 48px;
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 8px var(--shadow-color-lg);
     }
     
     .stat-value {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary);
         margin: 0;
         line-height: 1;
     }
     
     .stat-label {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary);
         margin-top: 0.5rem;
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-card);
         border-radius: 16px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 1px 3px var(--shadow-color), 0 10px 40px var(--shadow-color-md);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient-primary);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -225,7 +287,7 @@
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
         margin: 0;
         display: flex;
         align-items: center;
@@ -238,30 +300,30 @@
     
     .processes-table {
         width: 100%;
-        background: white;
+        background: var(--bg-card);
     }
     
     .processes-table thead {
-        background: #f8f9ff;
+        background: var(--bg-hover);
     }
     
     .processes-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color);
         white-space: nowrap;
     }
     
     .processes-table td {
         padding: 1rem;
-        color: #64748b;
+        color: var(--text-secondary);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light);
     }
     
     .processes-table tbody tr {
@@ -269,7 +331,7 @@
     }
     
     .processes-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover);
     }
     
     .processes-table tbody tr:last-child td {
@@ -278,7 +340,7 @@
     
     .process-id {
         font-weight: 600;
-        color: #5b5fcf;
+        color: var(--accent-color);
         font-family: monospace;
     }
     
@@ -291,18 +353,18 @@
     .user-icon {
         width: 24px;
         height: 24px;
-        background: #e0e7ff;
+        background: var(--accent-light);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.75rem;
-        color: #5b5fcf;
+        color: var(--accent-color);
     }
     
     .command-badge {
-        background: #f3f4f6;
-        color: #1e293b;
+        background: var(--border-light);
+        color: var(--text-primary);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -311,8 +373,8 @@
     }
     
     .time-badge {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg);
+        color: var(--warning-text);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -327,13 +389,13 @@
     }
     
     .state-active {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-text);
     }
     
     .state-idle {
-        background: #e0e7ff;
-        color: #5b5fcf;
+        background: var(--accent-light);
+        color: var(--accent-color);
     }
     
     .info-text {
@@ -348,22 +410,22 @@
     .progress-bar {
         width: 100px;
         height: 6px;
-        background: #e8e9ff;
+        background: var(--border-color);
         border-radius: 3px;
         overflow: hidden;
     }
     
     .progress-fill {
         height: 100%;
-        background: #5b5fcf;
+        background: var(--accent-color);
         transition: width 0.3s ease;
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border: 3px solid var(--border-color);
+        border-top-color: var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -371,9 +433,9 @@
     }
     
     .refresh-btn {
-        background: #fff;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary);
+        color: var(--text-secondary);
+        border: 1px solid var(--border-color);
         padding: 0.5rem 1rem;
         border-radius: 8px;
         font-weight: 500;
@@ -386,20 +448,20 @@
     }
     
     .refresh-btn:hover {
-        color: #5b5fcf;
-        border-color: #5b5fcf;
+        color: var(--accent-color);
+        border-color: var(--accent-color);
         transform: rotate(180deg);
     }
     
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #94a3b8;
+        color: var(--text-muted);
     }
     
     .empty-state i {
         font-size: 3rem;
-        color: #cbd5e1;
+        color: var(--icon-color);
         margin-bottom: 1rem;
     }
     
@@ -472,7 +534,7 @@
     <div class="page-header">
         <h1 class="page-title">
             <div class="mysql-icon">
-                <i class="fas fa-database" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                <i class="fas fa-database" style="color: var(--accent-color); font-size: 1.75rem;"></i>
             </div>
             {% trans "MySQL Manager" %}
         </h1>
@@ -494,7 +556,7 @@
         <div class="stat-card uptime">
             <div class="stat-header">
                 <h3 class="stat-title">{% trans "MySQL Uptime" %}</h3>
-                <div class="stat-icon" style="color: #0ea5e9;">
+                <div class="stat-icon" style="color: var(--info-color);">
                     <i class="fas fa-clock"></i>
                 </div>
             </div>
@@ -505,7 +567,7 @@
         <div class="stat-card connections">
             <div class="stat-header">
                 <h3 class="stat-title">{% trans "Active Connections" %}</h3>
-                <div class="stat-icon" style="color: #10b981;">
+                <div class="stat-icon" style="color: var(--success-color);">
                     <i class="fas fa-link"></i>
                 </div>
             </div>
@@ -516,7 +578,7 @@
         <div class="stat-card slow-queries">
             <div class="stat-header">
                 <h3 class="stat-title">{% trans "Slow Queries" %}</h3>
-                <div class="stat-icon" style="color: #f59e0b;">
+                <div class="stat-icon" style="color: var(--warning-color);">
                     <i class="fas fa-exclamation-triangle"></i>
                 </div>
             </div>
@@ -566,7 +628,7 @@
                                 </div>
                             </td>
                             <td>
-                                <i class="fas fa-database" style="color: #94a3b8; margin-right: 0.5rem;"></i>
+                                <i class="fas fa-database" style="color: var(--text-muted); margin-right: 0.5rem;"></i>
                                 <span ng-bind="process.database || 'None'"></span>
                             </td>
                             <td>
diff --git a/databases/templates/databases/phpMyAdmin.html b/databases/templates/databases/phpMyAdmin.html
index 709a0ba8b..ff16f49b9 100644
--- a/databases/templates/databases/phpMyAdmin.html
+++ b/databases/templates/databases/phpMyAdmin.html
@@ -7,6 +7,100 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
+    <style>
+        /* PHPMyAdmin Page Styles with Dark Mode Support */
+        .container {
+            background: var(--bg-primary, #f0f0ff);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        #page-title {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        #page-title h2 {
+            color: var(--text-primary, #2f3640);
+            font-size: 32px;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+
+        #page-title p {
+            color: var(--text-secondary, #8893a7);
+            font-size: 16px;
+        }
+
+        .panel {
+            background: var(--bg-secondary, white);
+            border-radius: 12px;
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .panel-body {
+            padding: 30px;
+        }
+
+        .title-hero {
+            color: var(--text-primary, #2f3640);
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .example-box-wrapper {
+            background: transparent;
+            text-align: center;
+        }
+
+        .example-box-wrapper p {
+            color: var(--text-secondary, #8893a7);
+            font-size: 16px;
+            line-height: 1.6;
+            margin-bottom: 20px;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 28px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background: var(--accent-color, #5b5fcf);
+            color: white !important;
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-hover, #4b4fbf);
+            box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
+            transform: translateY(-2px);
+        }
+
+        .btn img {
+            width: 16px;
+            height: 16px;
+            margin-left: 8px;
+        }
+
+        a {
+            text-decoration: none;
+        }
+    </style>
+
 
     <div ng-controller="phpMyAdmin" class="container">
         <div id="page-title">
diff --git a/packages/templates/packages/createPackage.html b/packages/templates/packages/createPackage.html
index 947b8fd90..e71de12b3 100644
--- a/packages/templates/packages/createPackage.html
+++ b/packages/templates/packages/createPackage.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
     }
     
     /* Input group styles */
@@ -107,13 +107,13 @@
     }
     
     .input-suffix {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-left: none;
         padding: 10px 16px;
         border-radius: 0 8px 8px 0;
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 600;
         white-space: nowrap;
     }
@@ -121,18 +121,18 @@
     /* Help text */
     .help-text {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         margin-top: 6px;
     }
     
     /* Package name preview */
     .package-name-preview {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--accent-bg, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 6px;
         padding: 8px 12px;
         font-size: 13px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-weight: 600;
         margin-top: 8px;
         display: inline-block;
@@ -147,7 +147,7 @@
     
     /* Resource limits section */
     .resource-section {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -156,7 +156,7 @@
     .resource-title {
         font-size: 15px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -164,7 +164,7 @@
     }
     
     .resource-title i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     /* Checkbox styles */
@@ -177,8 +177,8 @@
         align-items: start;
         gap: 10px;
         padding: 12px 16px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         transition: all 0.2s ease;
         cursor: pointer;
@@ -186,8 +186,8 @@
     }
     
     .checkbox-wrapper:hover {
-        border-color: #5b5fcf;
-        background: #f0f1ff;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--accent-bg, #f0f1ff);
     }
     
     .checkbox-wrapper input[type="checkbox"] {
@@ -195,7 +195,7 @@
         height: 18px;
         border-radius: 4px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-color, #5b5fcf);
         margin-top: 2px;
     }
     
@@ -205,7 +205,7 @@
     
     .checkbox-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         cursor: pointer;
         user-select: none;
@@ -215,7 +215,7 @@
     
     .checkbox-desc {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         line-height: 1.5;
     }
     
@@ -235,13 +235,13 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
-        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4a4fc4);
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
@@ -269,21 +269,21 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #fee2e2);
+        border: 1px solid var(--danger-border, #fca5a5);
+        color: var(--danger-text, #991b1b);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #d1fae5);
+        border: 1px solid var(--success-border, #6ee7b7);
+        color: var(--success-text, #065f46);
     }
     
     /* Info box */
     .info-box {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
+        background: var(--info-bg, #dbeafe);
+        border: 1px solid var(--info-border, #93c5fd);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 25px;
@@ -293,13 +293,13 @@
     }
     
     .info-box i {
-        color: #1976d2;
+        color: var(--info-color, #3b82f6);
         font-size: 18px;
     }
     
     .info-box-text {
         font-size: 13px;
-        color: #1565c0;
+        color: var(--info-text, #1e40af);
         line-height: 1.5;
     }
     
@@ -307,7 +307,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Hide elements by default */
diff --git a/packages/templates/packages/deletePackage.html b/packages/templates/packages/deletePackage.html
index 3235e0690..cbbcdb4c1 100644
--- a/packages/templates/packages/deletePackage.html
+++ b/packages/templates/packages/deletePackage.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #dc3545;
+        background: var(--danger-color, #dc3545);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #dc3545;
+        border-color: var(--danger-color, #dc3545);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #dc3545;
-        box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
+        border-color: var(--danger-color, #dc3545);
+        box-shadow: 0 0 0 3px var(--danger-shadow, rgba(220,53,69,0.1));
     }
     
     /* Windows selectbox fixes */
@@ -113,8 +113,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -124,14 +124,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Package selector card */
     .package-selector-card {
-        background: #fff5f5;
-        border: 1px solid #ffdddd;
+        background: var(--bg-danger-light, #fff5f5);
+        border: 1px solid var(--border-danger-light, #ffdddd);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -139,8 +139,8 @@
     
     /* Package details card */
     .package-details {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -152,7 +152,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 12px 0;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .detail-row:last-child {
@@ -162,12 +162,12 @@
     .detail-label {
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .detail-value {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
     }
     
@@ -177,23 +177,23 @@
         align-items: center;
         gap: 6px;
         padding: 4px 10px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 6px;
         font-size: 13px;
         font-weight: 600;
     }
     
     .resource-badge.unlimited {
-        background: #e8f5e9;
-        border-color: #c8e6c9;
-        color: #2e7d32;
+        background: var(--bg-success-light, #e8f5e9);
+        border-color: var(--border-success-light, #c8e6c9);
+        color: var(--success-color, #2e7d32);
     }
     
     /* Warning box */
     .warning-box {
-        background: #fff3e0;
-        border: 1px solid #ffe0b2;
+        background: var(--bg-warning-light, #fff3e0);
+        border: 1px solid var(--border-warning-light, #ffe0b2);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -203,7 +203,7 @@
     }
     
     .warning-icon {
-        color: #ff9800;
+        color: var(--warning-color, #ff9800);
         font-size: 24px;
         flex-shrink: 0;
     }
@@ -215,13 +215,13 @@
     .warning-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .warning-text {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.6;
     }
     
@@ -241,38 +241,38 @@
     }
     
     .btn-danger {
-        background: #dc3545;
-        color: white;
+        background: var(--danger-color, #dc3545);
+        color: var(--text-on-danger, white);
     }
     
     .btn-danger:hover {
-        background: #c82333;
-        box-shadow: 0 4px 12px rgba(220,53,69,0.3);
+        background: var(--danger-hover, #c82333);
+        box-shadow: 0 4px 12px var(--danger-shadow, rgba(220,53,69,0.3));
         transform: translateY(-1px);
     }
     
     .btn-danger:disabled {
-        background: #ccc;
+        background: var(--bg-disabled, #ccc);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--primary-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--bg-primary-light, #eef0ff);
+        border-color: var(--primary-color, #5b5fcf);
     }
     
     /* Confirmation section */
     .confirmation-section {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
+        background: var(--bg-danger-light, #ffebee);
+        border: 1px solid var(--border-danger-light, #ffcdd2);
         border-radius: 10px;
         padding: 25px;
         margin-top: 25px;
@@ -282,27 +282,27 @@
     
     .confirmation-icon {
         font-size: 48px;
-        color: #dc3545;
+        color: var(--danger-color, #dc3545);
         margin-bottom: 15px;
     }
     
     .confirmation-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .confirmation-text {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 20px;
     }
     
     .confirmation-package {
         font-size: 18px;
         font-weight: 700;
-        color: #dc3545;
+        color: var(--danger-color, #dc3545);
         margin-bottom: 25px;
     }
     
@@ -329,15 +329,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--bg-danger-light, #ffebee);
+        border: 1px solid var(--border-danger-light, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--bg-success-light, #e8f5e9);
+        border: 1px solid var(--border-success-light, #c8e6c9);
+        color: var(--success-color, #2e7d32);
     }
     
     /* Loading spinner */
@@ -345,8 +345,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #dc3545;
+        border: 2px solid var(--spinner-bg, #f3f3f3);
+        border-top: 2px solid var(--danger-color, #dc3545);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -361,7 +361,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Hide elements by default */
diff --git a/packages/templates/packages/index.html b/packages/templates/packages/index.html
index 6e2de808f..27b609420 100644
--- a/packages/templates/packages/index.html
+++ b/packages/templates/packages/index.html
@@ -7,6 +7,99 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
+    <style>
+        /* Packages Page Styles with Dark Mode Support */
+        .container {
+            background: var(--bg-primary, #f0f0ff);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        #page-title {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        #page-title h2 {
+            color: var(--text-primary, #2f3640);
+            font-size: 32px;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+
+        #page-title p {
+            color: var(--text-secondary, #8893a7);
+            font-size: 16px;
+        }
+
+        .panel {
+            background: var(--bg-secondary, white);
+            border-radius: 12px;
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
+        }
+
+        .panel-body {
+            padding: 30px;
+        }
+
+        .content-box-header {
+            color: var(--text-primary, #2f3640);
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .tile-box {
+            display: block;
+            text-decoration: none;
+            padding: 25px;
+            border-radius: 8px;
+            text-align: center;
+            transition: all 0.3s ease;
+            margin-bottom: 20px;
+        }
+
+        .tile-box.btn-primary {
+            background: var(--accent-color, #5b5fcf) !important;
+            color: white !important;
+            border: 1px solid var(--accent-color, #5b5fcf);
+        }
+
+        .tile-box.btn-primary:hover {
+            background: var(--accent-hover, #4b4fbf) !important;
+            box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
+            transform: translateY(-2px);
+        }
+
+        .tile-box .tile-header {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: inherit;
+        }
+
+        .tile-box .tile-content-wrapper i {
+            font-size: 48px;
+            color: inherit;
+        }
+
+        .example-box-wrapper {
+            background: transparent;
+        }
+
+        .btn-min-width {
+            min-width: 250px;
+        }
+
+        @media (max-width: 768px) {
+            .btn-min-width {
+                min-width: 100%;
+            }
+        }
+    </style>
+
 
     <div class="container">
         <div id="page-title">
diff --git a/packages/templates/packages/listPackages.html b/packages/templates/packages/listPackages.html
index 0f37143fd..399511507 100644
--- a/packages/templates/packages/listPackages.html
+++ b/packages/templates/packages/listPackages.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--surface-primary);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-light);
+        border: 1px solid var(--border-primary);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,40 +55,40 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-primary);
         border-radius: 2px;
     }
     
     /* Table styles */
     .modern-table {
         width: 100%;
-        background: white;
+        background: var(--surface-primary);
         border-radius: 10px;
         overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 1px 3px var(--shadow-xs);
+        border: 1px solid var(--border-primary);
     }
     
     .modern-table thead {
-        background: #f8f9ff;
+        background: var(--surface-secondary);
     }
     
     .modern-table th {
         padding: 16px 20px;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary);
         text-align: left;
     }
     
     .modern-table td {
         padding: 16px 20px;
         font-size: 14px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0f0;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-light);
     }
     
     .modern-table tbody tr:last-child td {
@@ -96,7 +96,7 @@
     }
     
     .modern-table tbody tr:hover {
-        background: #fafbff;
+        background: var(--surface-hover);
     }
     
     /* Resource badges */
@@ -105,17 +105,17 @@
         align-items: center;
         gap: 6px;
         padding: 4px 10px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        border: 1px solid var(--border-primary);
         border-radius: 6px;
         font-size: 13px;
         font-weight: 600;
     }
     
     .resource-badge.unlimited {
-        background: #e8f5e9;
-        border-color: #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-light);
+        border-color: var(--success-border);
+        color: var(--success-dark);
     }
     
     /* Status badges */
@@ -130,13 +130,13 @@
     }
     
     .status-badge.enabled {
-        background: #e8f5e9;
-        color: #2e7d32;
+        background: var(--success-light);
+        color: var(--success-dark);
     }
     
     .status-badge.disabled {
-        background: #fff3e0;
-        color: #f57c00;
+        background: var(--warning-light);
+        color: var(--warning-dark);
     }
     
     /* Action buttons */
@@ -160,24 +160,24 @@
     }
     
     .btn-edit {
-        background: #f8f9ff;
-        color: #5b5fcf;
+        background: var(--surface-secondary);
+        color: var(--accent-primary);
     }
     
     .btn-edit:hover {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-primary);
+        color: var(--text-inverse);
         transform: translateY(-1px);
     }
     
     .btn-delete {
-        background: #ffebee;
-        color: #dc3545;
+        background: var(--error-light);
+        color: var(--error-primary);
     }
     
     .btn-delete:hover {
-        background: #dc3545;
-        color: white;
+        background: var(--error-primary);
+        color: var(--text-inverse);
         transform: translateY(-1px);
     }
     
@@ -185,12 +185,12 @@
     .modal-content {
         border-radius: 12px;
         border: none;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        box-shadow: 0 8px 32px var(--shadow-medium);
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        border-bottom: 1px solid var(--border-primary);
         border-radius: 12px 12px 0 0;
         padding: 20px 25px;
     }
@@ -198,7 +198,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         display: flex;
         align-items: center;
         gap: 10px;
@@ -209,8 +209,8 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        border-top: 1px solid var(--border-primary);
         border-radius: 0 0 12px 12px;
         padding: 15px 25px;
         display: flex;
@@ -226,7 +226,7 @@
     .form-section-title {
         font-size: 14px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 15px;
         display: flex;
         align-items: center;
@@ -234,7 +234,7 @@
     }
     
     .form-section-title i {
-        color: #5b5fcf;
+        color: var(--accent-primary);
     }
     
     .form-group {
@@ -245,7 +245,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-muted);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -254,26 +254,26 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary);
+        background: var(--surface-primary);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-primary);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 3px var(--accent-focus);
     }
     
     .form-control[readonly] {
-        background: #f8f9ff;
+        background: var(--surface-secondary);
         cursor: not-allowed;
     }
     
@@ -289,13 +289,13 @@
     }
     
     .input-suffix {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        border: 1px solid var(--border-primary);
         border-left: none;
         padding: 10px 16px;
         border-radius: 0 8px 8px 0;
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-muted);
         font-weight: 600;
         white-space: nowrap;
     }
@@ -303,7 +303,7 @@
     /* Help text */
     .help-text {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary);
         margin-top: 6px;
     }
     
@@ -313,8 +313,8 @@
         align-items: start;
         gap: 10px;
         padding: 12px 16px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        border: 1px solid var(--border-primary);
         border-radius: 8px;
         transition: all 0.2s ease;
         cursor: pointer;
@@ -322,8 +322,8 @@
     }
     
     .checkbox-wrapper:hover {
-        border-color: #5b5fcf;
-        background: #f0f1ff;
+        border-color: var(--accent-primary);
+        background: var(--accent-lighter);
     }
     
     .checkbox-wrapper input[type="checkbox"] {
@@ -331,7 +331,7 @@
         height: 18px;
         border-radius: 4px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-primary);
         margin-top: 2px;
     }
     
@@ -341,7 +341,7 @@
     
     .checkbox-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary);
         font-weight: 600;
         cursor: pointer;
         user-select: none;
@@ -351,7 +351,7 @@
     
     .checkbox-desc {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary);
         line-height: 1.5;
     }
     
@@ -371,25 +371,25 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-primary);
+        color: var(--text-inverse);
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
-        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        background: var(--accent-dark);
+        box-shadow: 0 4px 12px var(--accent-shadow);
         transform: translateY(-1px);
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--surface-secondary);
+        color: var(--accent-primary);
+        border: 1px solid var(--border-primary);
     }
     
     .btn-secondary:hover {
-        background: #eef0ff;
-        border-color: #5b5fcf;
+        background: var(--accent-light);
+        border-color: var(--accent-primary);
     }
     
     /* Loading spinner */
@@ -397,8 +397,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--border-light);
+        border-top: 2px solid var(--accent-primary);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
diff --git a/packages/templates/packages/modifyPackage.html b/packages/templates/packages/modifyPackage.html
index 222a58888..51435a611 100644
--- a/packages/templates/packages/modifyPackage.html
+++ b/packages/templates/packages/modifyPackage.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-label, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,26 +77,26 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px var(--focus-shadow, rgba(91,95,207,0.1));
     }
     
     .form-control[readonly] {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         cursor: not-allowed;
     }
     
@@ -118,8 +118,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -129,14 +129,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Package selector card */
     .package-selector-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -154,13 +154,13 @@
     }
     
     .input-suffix {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-left: none;
         padding: 10px 16px;
         border-radius: 0 8px 8px 0;
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-label, #64748b);
         font-weight: 600;
         white-space: nowrap;
     }
@@ -168,13 +168,13 @@
     /* Help text */
     .help-text {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         margin-top: 6px;
     }
     
     /* Form section */
     .form-section {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -183,7 +183,7 @@
     .form-section-title {
         font-size: 15px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -191,7 +191,7 @@
     }
     
     .form-section-title i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     /* Form row */
@@ -212,8 +212,8 @@
         align-items: start;
         gap: 10px;
         padding: 12px 16px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         transition: all 0.2s ease;
         cursor: pointer;
@@ -221,8 +221,8 @@
     }
     
     .checkbox-wrapper:hover {
-        border-color: #5b5fcf;
-        background: #f0f1ff;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-hover-alt, #f0f1ff);
     }
     
     .checkbox-wrapper input[type="checkbox"] {
@@ -230,7 +230,7 @@
         height: 18px;
         border-radius: 4px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-color, #5b5fcf);
         margin-top: 2px;
     }
     
@@ -240,7 +240,7 @@
     
     .checkbox-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         cursor: pointer;
         user-select: none;
@@ -250,7 +250,7 @@
     
     .checkbox-desc {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         line-height: 1.5;
     }
     
@@ -270,18 +270,18 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
-        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4a4fc4);
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #ccc;
+        background: var(--bg-disabled, #ccc);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -304,15 +304,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     /* Loading spinner */
@@ -320,8 +320,8 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--spinner-bg, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -336,7 +336,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
         display: none;
     }
     
diff --git a/websiteFunctions/templates/websiteFunctions/installJoomla.html b/websiteFunctions/templates/websiteFunctions/installJoomla.html
index bf105f89e..ba08b2e78 100644
--- a/websiteFunctions/templates/websiteFunctions/installJoomla.html
+++ b/websiteFunctions/templates/websiteFunctions/installJoomla.html
@@ -8,7 +8,7 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
-/* Joomla Installation Page Styles */
+/* Joomla Installation Page Styles with Dark Mode Support */
 .container {
     background: var(--bg-primary, #f0f0ff);
     min-height: 100vh;
@@ -144,14 +144,14 @@
 }
 
 .alert-success {
-    background: var(--success-bg, #f0f9ff);
-    border: 1px solid var(--success-border, #bae6fd);
-    color: var(--success-text, #0c4a6e);
+    background: var(--success-bg, #d1fae5);
+    border: 1px solid var(--success-border, #6ee7b7);
+    color: var(--success-text, #065f46);
 }
 
 .alert-danger {
-    background: var(--danger-bg, #fef2f2);
-    border: 1px solid var(--danger-border, #fecaca);
+    background: var(--danger-bg, #fee2e2);
+    border: 1px solid var(--danger-border, #fca5a5);
     color: var(--danger-text, #991b1b);
 }
 
diff --git a/websiteFunctions/templates/websiteFunctions/installMagento.html b/websiteFunctions/templates/websiteFunctions/installMagento.html
index 5a63fa34a..e34e1b180 100644
--- a/websiteFunctions/templates/websiteFunctions/installMagento.html
+++ b/websiteFunctions/templates/websiteFunctions/installMagento.html
@@ -8,7 +8,7 @@
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
-/* Magento Installation Page Styles */
+/* Magento Installation Page Styles with Dark Mode Support */
 .container {
     background: var(--bg-primary, #f0f0ff);
     min-height: 100vh;
@@ -158,20 +158,20 @@
 }
 
 .alert-success {
-    background: var(--success-bg, #f0f9ff);
-    border: 1px solid var(--success-border, #bae6fd);
-    color: var(--success-text, #0c4a6e);
+    background: var(--success-bg, #d1fae5);
+    border: 1px solid var(--success-border, #6ee7b7);
+    color: var(--success-text, #065f46);
 }
 
 .alert-danger {
-    background: var(--danger-bg, #fef2f2);
-    border: 1px solid var(--danger-border, #fecaca);
+    background: var(--danger-bg, #fee2e2);
+    border: 1px solid var(--danger-border, #fca5a5);
     color: var(--danger-text, #991b1b);
 }
 
 .alert-warning {
-    background: var(--warning-bg, #fffbeb);
-    border: 1px solid var(--warning-border, #fed7aa);
+    background: var(--warning-bg, #fef3c7);
+    border: 1px solid var(--warning-border, #fcd34d);
     color: var(--warning-text, #92400e);
 }
 
diff --git a/websiteFunctions/templates/websiteFunctions/installMautic.html b/websiteFunctions/templates/websiteFunctions/installMautic.html
index 46baea7ba..c2234a20d 100644
--- a/websiteFunctions/templates/websiteFunctions/installMautic.html
+++ b/websiteFunctions/templates/websiteFunctions/installMautic.html
@@ -262,7 +262,7 @@
     .progress {
         height: 12px;
         border-radius: var(--radius-full);
-        background: var(--border-color);
+        background: var(--border-color-local);
         overflow: hidden;
         margin-top: 15px;
         box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
@@ -372,7 +372,7 @@
     .mautic-logo {
         width: 40px;
         height: 40px;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 8px;
         padding: 5px;
         display: inline-flex;
@@ -392,12 +392,12 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        color: var(--text-secondary);
+        color: var(--text-secondary-local);
         font-size: 14px;
     }
     
     .feature-item i {
-        color: var(--success-color);
+        color: var(--success-color-local);
         font-size: 16px;
     }
     
diff --git a/websiteFunctions/templates/websiteFunctions/installPrestaShop.html b/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
index 89af93225..7d6d7524c 100644
--- a/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
+++ b/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
@@ -164,7 +164,7 @@
     
     .control-label {
         font-weight: 600;
-        color: var(--text-primary);
+        color: var(--text-primary-local);
         margin-bottom: 8px;
         font-size: 14px;
         letter-spacing: 0.3px;
@@ -174,12 +174,13 @@
     }
     
     .form-control {
-        border: 2px solid var(--border-color);
+        border: 2px solid var(--border-color-local);
         border-radius: var(--radius-md);
         padding: 12px 16px;
         font-size: 15px;
         transition: var(--transition-base);
-        background: white;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary-local);
     }
     
     .form-control:focus {
@@ -189,7 +190,7 @@
     }
     
     .form-control::placeholder {
-        color: var(--text-muted);
+        color: var(--text-muted-local);
         font-size: 14px;
     }
     
@@ -261,7 +262,7 @@
     .progress {
         height: 12px;
         border-radius: var(--radius-full);
-        background: var(--border-color);
+        background: var(--border-color-local);
         overflow: hidden;
         margin-top: 15px;
         box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
@@ -351,7 +352,7 @@
     .ps-logo {
         width: 40px;
         height: 40px;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 8px;
         padding: 5px;
         display: inline-flex;
@@ -371,12 +372,12 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        color: var(--text-secondary);
+        color: var(--text-secondary-local);
         font-size: 14px;
     }
     
     .feature-item i {
-        color: var(--success-color);
+        color: var(--success-color-local);
         font-size: 16px;
     }