diff --git a/IncBackups/templates/IncBackups/ConfigureV2Backup.html b/IncBackups/templates/IncBackups/ConfigureV2Backup.html
index 544e035a1..6f2235154 100644
--- a/IncBackups/templates/IncBackups/ConfigureV2Backup.html
+++ b/IncBackups/templates/IncBackups/ConfigureV2Backup.html
@@ -195,8 +195,8 @@
         </style>
         <div class="container">
             <div id="page-title" align="center">
-                <h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
-                <p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
+                <h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
+                <p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
                     to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
                     level of robustness you need? <br><br>
 
diff --git a/IncBackups/templates/IncBackups/CreateV2Backup.html b/IncBackups/templates/IncBackups/CreateV2Backup.html
index 13bf303b8..81f0726c0 100644
--- a/IncBackups/templates/IncBackups/CreateV2Backup.html
+++ b/IncBackups/templates/IncBackups/CreateV2Backup.html
@@ -99,7 +99,7 @@
                             <label class="col-sm-3 control-label">{% trans " " %} </label>
                             <div class="col-sm-6">
                                 <button class="btn" id="CreateV2BackupButton" ng-click="CreateV2BackupButton()"
-                                        style="border-radius: 6px;background-color: #3447b7;color: white !important;">
+                                        style="border-radius: 6px;background-color: var(--accent-color, #3447b7);color: var(--bg-secondary, white) !important;">
                                     Create Backup
                                 </button>
                             </div>
diff --git a/IncBackups/templates/IncBackups/RestoreV2Backup.html b/IncBackups/templates/IncBackups/RestoreV2Backup.html
index 70325d9c2..f5b27f3b3 100644
--- a/IncBackups/templates/IncBackups/RestoreV2Backup.html
+++ b/IncBackups/templates/IncBackups/RestoreV2Backup.html
@@ -262,8 +262,8 @@
         </style>
         <div class="container">
             <div id="page-title" align="center">
-                <h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
-                <p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
+                <h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
+                <p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
                     to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
                     level of robustness you need? <br><br>
 
diff --git a/IncBackups/templates/IncBackups/ScheduleV2Backup.html b/IncBackups/templates/IncBackups/ScheduleV2Backup.html
index 39c629031..f33a1a5d9 100644
--- a/IncBackups/templates/IncBackups/ScheduleV2Backup.html
+++ b/IncBackups/templates/IncBackups/ScheduleV2Backup.html
@@ -120,7 +120,7 @@
                                 <label class="col-sm-3 control-label">{% trans " " %} </label>
                                 <div class="col-sm-6">
                                     <button class="btn" id="CreateV2BackupButton" ng-click="CreateScheduleV2()"
-                                            style="border-radius: 6px;background-color: #3447b7;color: white !important;">
+                                            style="border-radius: 6px;background-color: var(--accent-color, #3447b7);color: var(--bg-secondary, white) !important;">
                                         Create Schedule
                                     </button>
                                 </div>
@@ -224,8 +224,8 @@
         </style>
         <div class="container">
             <div id="page-title" align="center">
-                <h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
-                <p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
+                <h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
+                <p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
                     to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
                     level of robustness you need? <br><br>
 
diff --git a/IncBackups/templates/IncBackups/createBackup.html b/IncBackups/templates/IncBackups/createBackup.html
index 4e03be62e..6e22b7192 100644
--- a/IncBackups/templates/IncBackups/createBackup.html
+++ b/IncBackups/templates/IncBackups/createBackup.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -38,19 +38,19 @@
     .page-header .icon {
         width: 48px;
         height: 48px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: white;
+        color: var(--bg-secondary, white);
         font-size: 24px;
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
     }
     
     .page-header p {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
         line-height: 1.6;
     }
@@ -59,7 +59,7 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         text-decoration: none;
         font-size: 13px;
         font-weight: 600;
@@ -68,24 +68,24 @@
     }
     
     .docs-link:hover {
-        color: #4b4fbf;
+        color: var(--accent-hover, #4b4fbf);
         transform: translateX(2px);
     }
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -96,7 +96,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -109,7 +109,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -119,17 +119,17 @@
         width: 100%;
         padding: 12px 16px;
         font-size: 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--text-primary, #2f3640);
         transition: all 0.3s ease;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        background: white;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-secondary, white);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -137,18 +137,18 @@
         width: 100%;
         padding: 12px 16px;
         font-size: 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--text-primary, #2f3640);
         transition: all 0.3s ease;
         cursor: pointer;
     }
     
     .form-select:focus {
         outline: none;
-        border-color: #5b5fcf;
-        background: white;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-secondary, white);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -163,16 +163,16 @@
         display: flex;
         align-items: center;
         padding: 15px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.3s ease;
     }
     
     .checkbox-wrapper:hover {
-        background: #f0f0ff;
-        border-color: #5b5fcf;
+        background: var(--hover-light, #f0f0ff);
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .checkbox-wrapper input[type="checkbox"] {
@@ -184,7 +184,7 @@
     
     .checkbox-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
         cursor: pointer;
         user-select: none;
@@ -192,8 +192,8 @@
     
     /* Button Styles */
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 12px 30px;
         border-radius: 8px;
@@ -209,13 +209,13 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
+        background: var(--accent-hover, #4b4fbf);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(91,95,207,0.3);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
+        background: var(--text-muted, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -228,10 +228,10 @@
         font-size: 13px;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--text-primary, #2f3640);
         resize: vertical;
         min-height: 200px;
     }
@@ -239,29 +239,29 @@
     /* Table Styles */
     .backups-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .backups-table th {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         padding: 15px;
         text-align: left;
         font-size: 12px;
         font-weight: 700;
-        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);
     }
     
     .backups-table td {
         padding: 15px;
         font-size: 14px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0ff;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-light, #f0f0ff);
     }
     
     .backups-table tr:last-child td {
@@ -269,12 +269,12 @@
     }
     
     .backups-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .action-btn {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 6px 16px;
         border-radius: 6px;
@@ -289,16 +289,16 @@
     }
     
     .action-btn:hover {
-        background: #4b4fbf;
+        background: var(--accent-hover, #4b4fbf);
         transform: translateY(-1px);
         box-shadow: 0 2px 8px rgba(91,95,207,0.3);
-        color: white;
+        color: var(--bg-secondary, white);
         text-decoration: none;
     }
     
     .delete-btn {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 6px 16px;
         border-radius: 6px;
@@ -312,7 +312,7 @@
     }
     
     .delete-btn:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-1px);
         box-shadow: 0 2px 8px rgba(239,68,68,0.3);
     }
@@ -325,8 +325,8 @@
     }
     
     .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;
     }
@@ -334,7 +334,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .modal-body {
@@ -342,8 +342,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 20px;
     }
@@ -353,7 +353,7 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        border: 2px solid #5b5fcf;
+        border: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         border-top-color: transparent;
         animation: spin 0.8s linear infinite;
@@ -374,12 +374,12 @@
     .empty-state {
         text-align: center;
         padding: 40px;
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
     }
     
     .empty-state i {
         font-size: 48px;
-        color: #e8e9ff;
+        color: var(--border-color, #e8e9ff);
         margin-bottom: 15px;
     }
     
@@ -516,7 +516,7 @@
                 <tbody>
                     <tr ng-repeat="record in records track by $index">
                         <td>
-                            <i class="fas fa-archive" style="color: #5b5fcf; margin-right: 8px;"></i>
+                            <i class="fas fa-archive" style="color: var(--accent-color, #5b5fcf); margin-right: 8px;"></i>
                             <span ng-bind="record.id"></span>
                         </td>
                         <td ng-bind="record.date"></td>
diff --git a/backup/templates/backup/OneClickBackupSchedule.html b/backup/templates/backup/OneClickBackupSchedule.html
index 2683402a7..cb4a02d08 100644
--- a/backup/templates/backup/OneClickBackupSchedule.html
+++ b/backup/templates/backup/OneClickBackupSchedule.html
@@ -23,7 +23,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -31,7 +31,7 @@
         .page-title {
             font-size: 3rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -41,7 +41,7 @@
         
         .page-subtitle {
             font-size: 1.25rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 1.5rem;
             max-width: 600px;
             margin-left: auto;
@@ -56,7 +56,7 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             border: none;
             padding: 0.875rem 2.25rem;
@@ -72,7 +72,7 @@
         }
         
         .btn-primary:hover {
-            background: #4547a9;
+            background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
             box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
             color: white;
@@ -80,8 +80,8 @@
         
         .btn-secondary {
             background: #fff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
@@ -95,14 +95,14 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-color: var(--accent-color, #5b5fcf);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
         }
         
         .btn-danger {
-            background: #ef4444;
+            background: var(--danger-color, #ef4444);
             color: white;
             border: none;
             padding: 0.625rem 1.25rem;
@@ -114,13 +114,13 @@
         }
         
         .btn-danger:hover {
-            background: #dc2626;
+            background: var(--danger-hover, #dc2626);
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
         }
         
         .btn-gray {
-            background: #6b7280;
+            background: var(--text-secondary, #6b7280);
             color: white;
             border: none;
             padding: 0.625rem 1.25rem;
@@ -132,7 +132,7 @@
         }
         
         .btn-gray:hover {
-            background: #4b5563;
+            background: var(--text-secondary, #4b5563);
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
         }
@@ -141,22 +141,22 @@
             background: white;
             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;
+            border: 1px solid var(--border-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -181,14 +181,14 @@
         .form-label {
             flex: 0 0 200px;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 1.0625rem;
         }
         
         .form-control {
             flex: 1;
             padding: 1rem 1.125rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 1.0625rem;
             transition: all 0.3s ease;
@@ -197,7 +197,7 @@
         
         .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);
         }
         
@@ -206,34 +206,34 @@
             background: white;
             border-radius: 12px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .data-table thead {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         }
         
         .data-table th {
             padding: 1.125rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 1.0625rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .data-table td {
             padding: 1.125rem;
-            color: #475569;
+            color: var(--text-secondary, #475569);
             font-size: 1.125rem;
-            border-bottom: 1px solid #f3f4f6;
+            border-bottom: 1px solid var(--border-light, #f3f4f6);
             font-weight: 400;
         }
         
         .data-table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
         }
         
         .data-table tbody tr:last-child td {
@@ -241,7 +241,7 @@
         }
         
         .sites-section {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-radius: 12px;
             padding: 1.5rem;
             margin-top: 2rem;
@@ -250,7 +250,7 @@
         .section-title {
             font-size: 1.125rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -258,8 +258,8 @@
         }
         
         .info-box {
-            background: #f0f9ff;
-            border: 1px solid #bae6fd;
+            background: var(--info-bg, #f0f9ff);
+            border: 1px solid var(--info-border, #bae6fd);
             border-radius: 12px;
             padding: 1.5rem;
             margin-bottom: 1.5rem;
@@ -279,7 +279,7 @@
         
         .info-label {
             font-size: 0.875rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             text-transform: uppercase;
             letter-spacing: 0.05em;
         }
@@ -287,7 +287,7 @@
         .info-value {
             font-size: 1.125rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
         }
         
         @keyframes fadeInDown {
@@ -320,16 +320,16 @@
         }
         
         .modal-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 16px 16px 0 0;
             padding: 1.5rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .modal-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
         }
         
         .modal-body {
@@ -340,7 +340,7 @@
         input[type="number"] {
             width: 100px;
             padding: 0.875rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
@@ -349,7 +349,7 @@
         
         input[type="number"]:focus {
             outline: none;
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
         }
         
@@ -423,7 +423,7 @@
                             <label class="form-label">{% trans "Backup Retention" %}</label>
                             <div style="display: flex; align-items: center; gap: 1rem;">
                                 <input ng-model="backupRetention" type="number" value="0" min="0">
-                                <span style="color: #64748b; font-size: 0.875rem;">{% trans "days (0 for no limit)" %}</span>
+                                <span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "days (0 for no limit)" %}</span>
                             </div>
                         </div>
 
@@ -555,7 +555,7 @@
 
                             <div style="margin-top: 1.5rem; text-align: right;">
                                 <div style="display: inline-flex; align-items: center; gap: 1rem;">
-                                    <span style="color: #64748b; font-size: 0.875rem;">{% trans "Page" %}</span>
+                                    <span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "Page" %}</span>
                                     <select ng-model="currentPage" class="form-control" ng-change="fetchWebsites()" style="width: 80px;">
                                         <option ng-repeat="page in pagination">{$ $index + 1 $}</option>
                                     </select>
@@ -604,7 +604,7 @@
 
                             <div style="margin-top: 1.5rem; text-align: right;">
                                 <div style="display: inline-flex; align-items: center; gap: 1rem;">
-                                    <span style="color: #64748b; font-size: 0.875rem;">{% trans "Page" %}</span>
+                                    <span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "Page" %}</span>
                                     <select ng-model="currentPageLogs" class="form-control" ng-change="fetchLogs()" style="width: 80px;">
                                         <option ng-repeat="page in paginationLogs">{$ $index + 1 $}</option>
                                     </select>
diff --git a/backup/templates/backup/backup.html b/backup/templates/backup/backup.html
index 1fd2c8cbb..0bc03f0d1 100644
--- a/backup/templates/backup/backup.html
+++ b/backup/templates/backup/backup.html
@@ -18,7 +18,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -26,7 +26,7 @@
         .page-title {
             font-size: 3rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -36,7 +36,7 @@
         
         .page-subtitle {
             font-size: 1.25rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 1.5rem;
         }
         
@@ -48,8 +48,8 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
-            color: white;
+            background: var(--accent-color, #5b5fcf);
+            color: var(--text-inverse, white);
             border: none;
             padding: 0.75rem 2rem;
             border-radius: 10px;
@@ -64,16 +64,16 @@
         }
         
         .btn-primary:hover {
-            background: #4547a9;
+            background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-            color: white;
+            box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+            color: var(--text-inverse, white);
         }
         
         .btn-secondary {
-            background: #fff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-secondary, #fff);
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.75rem 2rem;
             border-radius: 10px;
             font-weight: 500;
@@ -87,15 +87,15 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-color: var(--accent-color, #5b5fcf);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+            box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
         }
         
         .btn-danger {
-            background: #ef4444;
-            color: white;
+            background: var(--danger-color, #ef4444);
+            color: var(--text-inverse, white);
             border: none;
             padding: 0.5rem 1rem;
             border-radius: 8px;
@@ -109,31 +109,31 @@
         }
         
         .btn-danger:hover {
-            background: #dc2626;
+            background: var(--danger-hover, #dc2626);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+            box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
         }
         
         .main-card {
-            background: white;
+            background: var(--bg-secondary, white);
             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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -145,15 +145,15 @@
         }
         
         .promo-banner {
-            background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
-            color: white;
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
+            color: var(--text-inverse, white);
             padding: 1.5rem 2rem;
             border-radius: 12px;
             margin-bottom: 2rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            box-shadow: 0 4px 20px rgba(91, 95, 207, 0.3);
+            box-shadow: 0 4px 20px var(--accent-shadow, rgba(91, 95, 207, 0.3));
         }
         
         .promo-text {
@@ -162,8 +162,8 @@
         }
         
         .promo-link {
-            background: white;
-            color: #5b5fcf;
+            background: var(--bg-secondary, white);
+            color: var(--accent-color, #5b5fcf);
             padding: 0.5rem 1.5rem;
             border-radius: 8px;
             text-decoration: none;
@@ -173,7 +173,7 @@
         
         .promo-link:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+            box-shadow: 0 4px 12px var(--shadow-dark, rgba(0,0,0,0.2));
         }
         
         .form-section {
@@ -188,29 +188,29 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.875rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: #fff;
+            background: var(--bg-secondary, #fff);
         }
         
         .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));
         }
         
         .running-backup-card {
-            background: #fef3c7;
-            border: 1px solid #fde68a;
+            background: var(--warning-bg, #fef3c7);
+            border: 1px solid var(--warning-border, #fde68a);
             border-radius: 12px;
             padding: 1.5rem;
             margin-bottom: 2rem;
@@ -232,7 +232,7 @@
         .status-icon {
             width: 40px;
             height: 40px;
-            background: #fbbf24;
+            background: var(--warning-color, #fbbf24);
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -242,49 +242,49 @@
         
         .status-details h4 {
             margin: 0;
-            color: #92400e;
+            color: var(--warning-text, #92400e);
             font-size: 1rem;
         }
         
         .status-details p {
             margin: 0;
-            color: #92400e;
+            color: var(--warning-text, #92400e);
             font-size: 0.875rem;
             opacity: 0.8;
         }
         
         .backup-table {
             width: 100%;
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .backup-table thead {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         }
         
         .backup-table th {
             padding: 1rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .backup-table td {
             padding: 1rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 0.875rem;
-            border-bottom: 1px solid #f3f4f6;
+            border-bottom: 1px solid var(--border-light, #f3f4f6);
         }
         
         .backup-table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
         }
         
         .backup-table tbody tr:last-child td {
@@ -292,8 +292,8 @@
         }
         
         .file-badge {
-            background: #e0e7ff;
-            color: #5b5fcf;
+            background: var(--accent-bg, #e0e7ff);
+            color: var(--accent-color, #5b5fcf);
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
             font-size: 0.75rem;
@@ -302,8 +302,8 @@
         }
         
         .size-badge {
-            background: #f3f4f6;
-            color: #1e293b;
+            background: var(--border-light, #f3f4f6);
+            color: var(--text-primary, #1e293b);
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
             font-size: 0.875rem;
@@ -311,8 +311,8 @@
         }
         
         .status-complete {
-            background: #d1fae5;
-            color: #065f46;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
             padding: 0.25rem 0.75rem;
             border-radius: 20px;
             font-size: 0.75rem;
@@ -332,22 +332,22 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .loading-spinner {
             width: 20px;
             height: 20px;
-            border: 3px solid #e8e9ff;
-            border-top-color: #5b5fcf;
+            border: 3px solid var(--border-color, #e8e9ff);
+            border-top-color: var(--accent-color, #5b5fcf);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             display: inline-block;
@@ -578,7 +578,7 @@
                                 <span class="file-badge" ng-bind="record.file"></span>
                             </td>
                             <td>
-                                <i class="fas fa-calendar-alt" style="color: #64748b; margin-right: 0.5rem;"></i>
+                                <i class="fas fa-calendar-alt" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
                                 <span ng-bind="record.date"></span>
                             </td>
                             <td>
diff --git a/backup/templates/backup/backupDestinations.html b/backup/templates/backup/backupDestinations.html
index 8d7f1aaf3..2f4caeff6 100644
--- a/backup/templates/backup/backupDestinations.html
+++ b/backup/templates/backup/backupDestinations.html
@@ -18,7 +18,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -26,7 +26,7 @@
         .page-title {
             font-size: 3rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -36,7 +36,7 @@
         
         .page-subtitle {
             font-size: 1.25rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 1.5rem;
         }
         
@@ -48,8 +48,8 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
-            color: white;
+            background: var(--accent-color, #5b5fcf);
+            color: var(--bg-secondary, white);
             border: none;
             padding: 0.75rem 2rem;
             border-radius: 10px;
@@ -64,16 +64,16 @@
         }
         
         .btn-primary:hover {
-            background: #4547a9;
+            background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-            color: white;
+            box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+            color: var(--bg-secondary, white);
         }
         
         .btn-secondary {
-            background: #fff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-secondary, #fff);
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.75rem 2rem;
             border-radius: 10px;
             font-weight: 500;
@@ -87,15 +87,15 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-color: var(--accent-color, #5b5fcf);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+            box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
         }
         
         .btn-danger {
-            background: #ef4444;
-            color: white;
+            background: var(--danger-color, #ef4444);
+            color: var(--bg-secondary, white);
             border: none;
             padding: 0.5rem 1rem;
             border-radius: 8px;
@@ -109,21 +109,21 @@
         }
         
         .btn-danger:hover {
-            background: #dc2626;
+            background: var(--danger-hover, #dc2626);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+            box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
         }
         
         .promo-banner {
-            background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
-            color: white;
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
+            color: var(--bg-secondary, white);
             padding: 1.5rem 2rem;
             border-radius: 12px;
             margin-bottom: 2rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            box-shadow: 0 4px 20px rgba(91, 95, 207, 0.3);
+            box-shadow: 0 4px 20px var(--accent-shadow, rgba(91, 95, 207, 0.3));
         }
         
         .promo-text {
@@ -132,8 +132,8 @@
         }
         
         .promo-link {
-            background: white;
-            color: #5b5fcf;
+            background: var(--bg-secondary, white);
+            color: var(--accent-color, #5b5fcf);
             padding: 0.5rem 1.5rem;
             border-radius: 8px;
             text-decoration: none;
@@ -143,29 +143,29 @@
         
         .promo-link:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+            box-shadow: 0 4px 12px var(--shadow-dark, rgba(0,0,0,0.2));
         }
         
         .main-card {
-            background: white;
+            background: var(--bg-secondary, white);
             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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -177,8 +177,8 @@
         }
         
         .destination-type-selector {
-            background: #f8f9ff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #f8f9ff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 12px;
             padding: 2rem;
             margin-bottom: 2rem;
@@ -194,24 +194,24 @@
         
         .tab-button {
             padding: 0.75rem 2rem;
-            background: #fff;
-            border: 2px solid #e8e9ff;
+            background: var(--bg-secondary, #fff);
+            border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
         }
         
         .tab-button.active {
-            background: #5b5fcf;
-            color: white;
-            border-color: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
+            color: var(--bg-secondary, white);
+            border-color: var(--accent-color, #5b5fcf);
         }
         
         .tab-button:hover:not(.active) {
-            border-color: #5b5fcf;
-            color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
+            color: var(--accent-color, #5b5fcf);
         }
         
         .form-section {
@@ -226,59 +226,59 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.875rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: #fff;
+            background: var(--bg-secondary, #fff);
         }
         
         .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));
         }
         
         .destination-table {
             width: 100%;
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             margin-top: 2rem;
         }
         
         .destination-table thead {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         }
         
         .destination-table th {
             padding: 1rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .destination-table td {
             padding: 1rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 0.875rem;
-            border-bottom: 1px solid #f3f4f6;
+            border-bottom: 1px solid var(--border-light, #f3f4f6);
         }
         
         .destination-table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
         }
         
         .destination-table tbody tr:last-child td {
@@ -288,8 +288,8 @@
         .loading-spinner {
             width: 20px;
             height: 20px;
-            border: 3px solid #e8e9ff;
-            border-top-color: #5b5fcf;
+            border: 3px solid var(--border-color, #e8e9ff);
+            border-top-color: var(--accent-color, #5b5fcf);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             display: inline-block;
@@ -297,8 +297,8 @@
         }
         
         .info-badge {
-            background: #e0e7ff;
-            color: #5b5fcf;
+            background: var(--accent-bg, #e0e7ff);
+            color: var(--accent-color, #5b5fcf);
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
             font-size: 0.75rem;
@@ -307,8 +307,8 @@
         }
         
         .port-badge {
-            background: #f3f4f6;
-            color: #1e293b;
+            background: var(--border-light, #f3f4f6);
+            color: var(--text-primary, #1e293b);
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
             font-size: 0.875rem;
@@ -317,7 +317,7 @@
         
         .destination-icon {
             font-size: 2.5rem;
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             margin-bottom: 1rem;
         }
         
@@ -440,8 +440,8 @@
 
                     <!-- SFTP Configuration -->
                     <div ng-hide="sftpHide" class="form-section">
-                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
-                            <i class="fas fa-network-wired" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                        <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
+                            <i class="fas fa-network-wired" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                             {% trans "SFTP Server Configuration" %}
                         </h3>
                         
@@ -502,8 +502,8 @@
 
                     <!-- Local Configuration -->
                     <div ng-hide="localHide" class="form-section">
-                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
-                            <i class="fas fa-hdd" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                        <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
+                            <i class="fas fa-hdd" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                             {% trans "Local Storage Configuration" %}
                         </h3>
                         
@@ -565,11 +565,11 @@
                                     <span class="info-badge" ng-bind="record.ip"></span>
                                 </td>
                                 <td>
-                                    <i class="fas fa-user" style="color: #64748b; margin-right: 0.5rem;"></i>
+                                    <i class="fas fa-user" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
                                     <span ng-bind="record.username"></span>
                                 </td>
                                 <td>
-                                    <i class="fas fa-folder" style="color: #64748b; margin-right: 0.5rem;"></i>
+                                    <i class="fas fa-folder" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
                                     <span ng-bind="record.path"></span>
                                 </td>
                                 <td>
@@ -614,8 +614,8 @@
                                     <strong ng-bind="record.name"></strong>
                                 </td>
                                 <td>
-                                    <i class="fas fa-folder-open" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
-                                    <span style="font-family: monospace; background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 4px;" 
+                                    <i class="fas fa-folder-open" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
+                                    <span style="font-family: monospace; background: var(--border-light, #f3f4f6); padding: 0.25rem 0.5rem; border-radius: 4px;" 
                                           ng-bind="record.path"></span>
                                 </td>
                                 <td style="text-align: center;">
diff --git a/backup/templates/backup/backupSchedule.html b/backup/templates/backup/backupSchedule.html
index 921de8101..904bcf303 100644
--- a/backup/templates/backup/backupSchedule.html
+++ b/backup/templates/backup/backupSchedule.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
     }
@@ -26,7 +26,7 @@
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -36,7 +36,7 @@
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
     }
     
@@ -48,8 +48,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -64,16 +64,16 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+        color: var(--bg-secondary, white);
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #fff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -87,15 +87,15 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -109,9 +109,9 @@
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
     }
     
     .btn-gray {
@@ -136,25 +136,25 @@
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -177,29 +177,29 @@
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .form-control {
         width: 100%;
         padding: 0.875rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .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));
     }
     
     .schedule-info-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -207,36 +207,36 @@
     
     .schedule-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .schedule-table thead {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
     }
     
     .schedule-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .schedule-table td {
         padding: 1rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
     }
     
     .schedule-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .schedule-table tbody tr:last-child td {
@@ -244,8 +244,8 @@
     }
     
     .status-badge {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
         font-size: 0.75rem;
@@ -255,8 +255,8 @@
     }
     
     .frequency-badge {
-        background: #e0e7ff;
-        color: #5b5fcf;
+        background: var(--accent-bg, #e0e7ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.875rem;
@@ -266,8 +266,8 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border: 3px solid var(--border-color, #e8e9ff);
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -281,8 +281,8 @@
     }
     
     .job-selector {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -296,15 +296,15 @@
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        border-bottom: 1px solid #e8e9ff;
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 1.5rem 2rem;
     }
     
     .modal-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
@@ -314,7 +314,7 @@
     
     .log-table {
         width: 100%;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
         overflow: hidden;
     }
@@ -324,20 +324,20 @@
         padding: 0.75rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .log-table td {
         padding: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .log-type {
         font-weight: 600;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     @keyframes spin {
@@ -545,7 +545,7 @@
                     </thead>
                     <tbody>
                         <tr>
-                            <td><i class="fas fa-calendar-check" style="color: #5b5fcf; margin-right: 0.5rem;"></i>{$ lastRun $}</td>
+                            <td><i class="fas fa-calendar-check" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>{$ lastRun $}</td>
                             <td><span class="frequency-badge">{$ allSites $}</span></td>
                             <td>
                                 <select ng-change="changeFrequency()" ng-model="backupFrequency" 
@@ -623,7 +623,7 @@
                     <tbody>
                         <tr ng-repeat="website in websites track by $index">
                             <td>
-                                <i class="fas fa-globe" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                                <i class="fas fa-globe" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                                 <strong ng-bind="website.name"></strong>
                             </td>
                             <td style="text-align: center;">
diff --git a/backup/templates/backup/oneClickBackups.html b/backup/templates/backup/oneClickBackups.html
index 2d10a4d51..829d64db9 100644
--- a/backup/templates/backup/oneClickBackups.html
+++ b/backup/templates/backup/oneClickBackups.html
@@ -23,7 +23,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -31,7 +31,7 @@
         .page-title {
             font-size: 3rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -41,7 +41,7 @@
         
         .page-subtitle {
             font-size: 1.25rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 1.5rem;
             max-width: 600px;
             margin-left: auto;
@@ -56,7 +56,7 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             border: none;
             padding: 0.875rem 2.25rem;
@@ -72,7 +72,7 @@
         }
         
         .btn-primary:hover {
-            background: #4547a9;
+            background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
             box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
             color: white;
@@ -80,8 +80,8 @@
         
         .btn-secondary {
             background: #fff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
@@ -95,16 +95,16 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-color: var(--accent-color, #5b5fcf);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
         }
         
         .btn-outline {
             background: transparent;
-            color: #5b5fcf;
-            border: 2px solid #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
+            border: 2px solid var(--accent-color, #5b5fcf);
             padding: 0.75rem 2rem;
             border-radius: 10px;
             font-weight: 500;
@@ -118,7 +118,7 @@
         }
         
         .btn-outline:hover {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
@@ -128,22 +128,22 @@
             background: white;
             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;
+            border: 1px solid var(--border-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -163,7 +163,7 @@
         .section-title {
             font-size: 2rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
             position: relative;
             display: inline-block;
@@ -177,7 +177,7 @@
             transform: translateX(-50%);
             width: 60px;
             height: 4px;
-            background: linear-gradient(90deg, #5b5fcf 0%, #8187ff 100%);
+            background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
             border-radius: 2px;
         }
         
@@ -192,27 +192,27 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .alert-info {
-            background: #dbeafe;
-            color: #1e40af;
-            border: 1px solid #bfdbfe;
+            background: var(--info-bg, #dbeafe);
+            color: var(--info-text, #1e40af);
+            border: 1px solid var(--info-border, #bfdbfe);
         }
         
         .fetch-plans-section {
             text-align: center;
             padding: 4rem 2rem;
-            background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
             border-radius: 20px;
             margin-bottom: 3rem;
             position: relative;
@@ -232,7 +232,7 @@
         
         .fetch-plans-btn {
             background: white;
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             padding: 1rem 3rem;
             border-radius: 50px;
             font-weight: 600;
@@ -263,14 +263,14 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 1rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.875rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 1rem;
             transition: all 0.3s ease;
@@ -279,7 +279,7 @@
         
         .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);
         }
         
@@ -288,34 +288,34 @@
             background: white;
             border-radius: 12px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .data-table thead {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         }
         
         .data-table th {
             padding: 1rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 1rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .data-table td {
             padding: 1.125rem;
-            color: #475569;
+            color: var(--text-secondary, #475569);
             font-size: 1.125rem;
-            border-bottom: 1px solid #f3f4f6;
+            border-bottom: 1px solid var(--border-light, #f3f4f6);
             font-weight: 400;
         }
         
         .data-table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
         }
         
         .data-table tbody tr:last-child td {
@@ -335,13 +335,13 @@
         }
         
         .status-badge.active {
-            background: #d1fae5;
-            color: #065f46;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
         }
         
         .status-badge.inactive {
-            background: #fee2e2;
-            color: #991b1b;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
         }
         
         .plan-grid {
@@ -355,7 +355,7 @@
             background: white;
             border-radius: 20px;
             padding: 2rem;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-color, #e8e9ff);
             transition: all 0.3s ease;
             position: relative;
             overflow: hidden;
@@ -364,12 +364,12 @@
         .plan-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
         }
         
         .plan-card.featured {
-            border-color: #5b5fcf;
-            background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
+            border-color: var(--accent-color, #5b5fcf);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-secondary, #fff) 100%);
         }
         
         .plan-card.featured::before {
@@ -377,7 +377,7 @@
             position: absolute;
             top: 20px;
             right: -30px;
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             padding: 0.25rem 3rem;
             font-size: 0.875rem;
@@ -394,19 +394,19 @@
         .plan-name {
             font-size: 1.5rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
         }
         
         .plan-storage {
             font-size: 3rem;
             font-weight: 700;
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             margin-bottom: 1rem;
         }
         
         .price-container {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-radius: 12px;
             padding: 1.5rem;
             margin-bottom: 1.5rem;
@@ -416,18 +416,18 @@
         .price-amount {
             font-size: 2.5rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             line-height: 1;
         }
         
         .price-currency {
             font-size: 1.5rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
         }
         
         .price-period {
             font-size: 1rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-weight: 500;
         }
         
@@ -615,7 +615,7 @@
                         </thead>
                         <tbody>
                             <tr ng-repeat="sub in subscriptions">
-                                <td><code style="background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 4px;">{$ sub.subscription_id $}</code></td>
+                                <td><code style="background: var(--border-light, #f3f4f6); padding: 0.25rem 0.5rem; border-radius: 4px;">{$ sub.subscription_id $}</code></td>
                                 <td>
                                     <span class="status-badge" 
                                           ng-class="{'active': sub.status === 'active', 'inactive': sub.status !== 'active'}">
@@ -682,13 +682,13 @@
                             {% for plan in bPlans %}
                                 <tr>
                                     <td>
-                                        <i class="fas fa-user-circle" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                                        <i class="fas fa-user-circle" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                                         {{ plan.sftpUser }}
                                     </td>
                                     <td><strong>{{ plan.planName }}</strong></td>
                                     <td>{{ plan.subscription }}</td>
                                     <td>
-                                        <span style="background: #e0e7ff; color: #5b5fcf; padding: 0.375rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 500;">
+                                        <span style="background: var(--accent-bg, #e0e7ff); color: var(--accent-color, #5b5fcf); padding: 0.375rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 500;">
                                             {% if plan.months == '1' %}
                                                 ${{ plan.price }}/month
                                             {% else %}
@@ -744,7 +744,7 @@
                         <span class="price-amount">{{ plans.0.monthlyPrice }}</span>
                         <span class="price-period">/month</span>
                     </div>
-                    <div class="price-container" style="background: #e0e7ff;">
+                    <div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
                         <span class="price-currency">$</span>
                         <span class="price-amount">{{ plans.0.yearlyPrice }}</span>
                         <span class="price-period">/year</span>
@@ -769,7 +769,7 @@
                         <span class="price-amount">{{ plans.1.monthlyPrice }}</span>
                         <span class="price-period">/month</span>
                     </div>
-                    <div class="price-container" style="background: #e0e7ff;">
+                    <div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
                         <span class="price-currency">$</span>
                         <span class="price-amount">{{ plans.1.yearlyPrice }}</span>
                         <span class="price-period">/year</span>
@@ -800,7 +800,7 @@
                         <span class="price-amount">{{ plans.2.monthlyPrice }}</span>
                         <span class="price-period">/month</span>
                     </div>
-                    <div class="price-container" style="background: #e0e7ff;">
+                    <div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
                         <span class="price-currency">$</span>
                         <span class="price-amount">{{ plans.2.yearlyPrice }}</span>
                         <span class="price-period">/year</span>
@@ -831,7 +831,7 @@
                         <span class="price-amount">{{ plans.3.monthlyPrice }}</span>
                         <span class="price-period">/month</span>
                     </div>
-                    <div class="price-container" style="background: #e0e7ff;">
+                    <div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
                         <span class="price-currency">$</span>
                         <span class="price-amount">{{ plans.3.yearlyPrice }}</span>
                         <span class="price-period">/year</span>
@@ -862,7 +862,7 @@
                         <span class="price-amount">{{ plans.4.monthlyPrice }}</span>
                         <span class="price-period">/month</span>
                     </div>
-                    <div class="price-container" style="background: #e0e7ff;">
+                    <div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
                         <span class="price-currency">$</span>
                         <span class="price-amount">{{ plans.4.yearlyPrice }}</span>
                         <span class="price-period">/year</span>
diff --git a/backup/templates/backup/remoteBackups.html b/backup/templates/backup/remoteBackups.html
index 23563974f..3392c6c35 100644
--- a/backup/templates/backup/remoteBackups.html
+++ b/backup/templates/backup/remoteBackups.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -39,7 +39,7 @@
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -51,7 +51,7 @@
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -67,8 +67,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -83,23 +83,23 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+        color: var(--bg-secondary, white);
     }
     
     .btn-primary:disabled {
-        background: #cbd5e1;
+        background: var(--text-secondary, #cbd5e1);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #fff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -113,15 +113,15 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
     }
     
     .btn-success {
-        background: #10b981;
-        color: white;
+        background: var(--success-color, #10b981);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -135,14 +135,14 @@
     }
     
     .btn-success:hover {
-        background: #059669;
+        background: var(--success-hover, #059669);
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -156,31 +156,31 @@
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 8px 20px var(--danger-shadow, rgba(239, 68, 68, 0.4));
     }
     
     .main-card {
         background: white;
         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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -203,23 +203,23 @@
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .form-control {
         width: 100%;
         padding: 0.875rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .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);
     }
     
@@ -234,15 +234,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert p {
@@ -256,34 +256,34 @@
         background: white;
         border-radius: 12px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-top: 1rem;
     }
     
     .remote-table thead {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
     }
     
     .remote-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .remote-table td {
         padding: 1rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
     }
     
     .remote-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .remote-table tbody tr:last-child td {
@@ -300,7 +300,7 @@
         width: 18px;
         height: 18px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-color, #5b5fcf);
     }
     
     .search-box {
@@ -313,28 +313,28 @@
         left: 1rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
     }
     
     .search-input {
         width: 100%;
         padding: 0.875rem 1rem 0.875rem 3rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .terminal-section {
-        background: #1e293b;
+        background: var(--text-primary, #1e293b);
         border-radius: 12px;
         overflow: hidden;
         margin-top: 2rem;
@@ -342,7 +342,7 @@
     }
     
     .terminal-header {
-        background: #334155;
+        background: var(--text-secondary, #334155);
         padding: 0.75rem 1rem;
         display: flex;
         justify-content: space-between;
@@ -350,7 +350,7 @@
     }
     
     .terminal-title {
-        color: #e2e8f0;
+        color: var(--bg-secondary, #e2e8f0);
         font-size: 0.875rem;
         font-weight: 500;
         display: flex;
@@ -370,15 +370,15 @@
     }
     
     .terminal-dot.red {
-        background: #ef4444;
+        background: var(--danger-color, #ef4444);
     }
     
     .terminal-dot.yellow {
-        background: #f59e0b;
+        background: var(--warning-color, #f59e0b);
     }
     
     .terminal-dot.green {
-        background: #10b981;
+        background: var(--success-color, #10b981);
     }
     
     .terminal-body {
@@ -388,7 +388,7 @@
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
         line-height: 1.6;
-        color: #e2e8f0;
+        color: var(--bg-secondary, #e2e8f0);
     }
     
     .terminal-grid {
@@ -408,8 +408,8 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border: 3px solid var(--border-color, #e8e9ff);
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -417,8 +417,8 @@
     }
     
     .php-badge {
-        background: #e0e7ff;
-        color: #5b5fcf;
+        background: var(--accent-bg, #e0e7ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -426,8 +426,8 @@
     }
     
     .package-badge {
-        background: #f3f4f6;
-        color: #1e293b;
+        background: var(--border-light, #f3f4f6);
+        color: var(--text-primary, #1e293b);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.875rem;
@@ -618,7 +618,7 @@
                     <tbody>
                         <tr ng-repeat="record in records | filter:accountsSearch">
                             <td>
-                                <i class="fas fa-globe" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                                <i class="fas fa-globe" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                                 <strong ng-bind="record.website"></strong>
                             </td>
                             <td>
@@ -628,7 +628,7 @@
                                 <span class="package-badge" ng-bind="record.package"></span>
                             </td>
                             <td>
-                                <i class="fas fa-envelope" style="color: #94a3b8; margin-right: 0.5rem;"></i>
+                                <i class="fas fa-envelope" style="color: var(--text-secondary, #94a3b8); margin-right: 0.5rem;"></i>
                                 <span ng-bind="record.email"></span>
                             </td>
                             <td style="text-align: center;">
@@ -674,13 +674,13 @@
         <div class="terminal-body">
             <div class="terminal-grid">
                 <div>
-                    <h4 style="color: #94a3b8; margin-bottom: 1rem; font-size: 0.875rem;">
+                    <h4 style="color: var(--text-secondary, #94a3b8); margin-bottom: 1rem; font-size: 0.875rem;">
                         {% trans "Backup Progress" %}
                     </h4>
                     <div ng-bind="requestData" style="white-space: pre-wrap;"></div>
                 </div>
                 <div>
-                    <h4 style="color: #94a3b8; margin-bottom: 1rem; font-size: 0.875rem;">
+                    <h4 style="color: var(--text-secondary, #94a3b8); margin-bottom: 1rem; font-size: 0.875rem;">
                         {% trans "Restore Progress" %}
                     </h4>
                     <div ng-bind="restoreData" style="white-space: pre-wrap;"></div>
diff --git a/backup/templates/backup/restoreOCBackups.html b/backup/templates/backup/restoreOCBackups.html
index eab7fa8a1..3e8a44b8c 100644
--- a/backup/templates/backup/restoreOCBackups.html
+++ b/backup/templates/backup/restoreOCBackups.html
@@ -23,7 +23,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -31,7 +31,7 @@
         .page-title {
             font-size: 3rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -41,7 +41,7 @@
         
         .page-subtitle {
             font-size: 1.25rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 1.5rem;
             max-width: 700px;
             margin-left: auto;
@@ -50,7 +50,7 @@
         }
         
         .page-subtitle strong {
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             font-weight: 600;
         }
         
@@ -62,7 +62,7 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             border: none;
             padding: 0.875rem 2.25rem;
@@ -78,14 +78,14 @@
         }
         
         .btn-primary:hover {
-            background: #4547a9;
+            background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
             box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
             color: white;
         }
         
         .btn-primary:disabled {
-            background: #d1d5db;
+            background: var(--text-secondary, #d1d5db);
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
@@ -93,8 +93,8 @@
         
         .btn-secondary {
             background: #fff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
@@ -108,8 +108,8 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-color: var(--accent-color, #5b5fcf);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
         }
@@ -118,7 +118,7 @@
             background: white;
             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;
+            border: 1px solid var(--border-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
             animation: fadeInUp 0.5s ease-out;
@@ -128,15 +128,15 @@
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -157,14 +157,14 @@
         .form-label {
             flex: 0 0 150px;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 1.125rem;
         }
         
         .form-control {
             flex: 1;
             padding: 0.875rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-size: 1.125rem;
             transition: all 0.3s ease;
@@ -173,21 +173,21 @@
         
         .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);
         }
         
         .progress-section {
             margin-top: 2rem;
             padding: 2rem;
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-radius: 12px;
         }
         
         .status-message {
-            background: #e0f2fe;
-            border: 1px solid #7dd3fc;
-            color: #0369a1;
+            background: var(--info-bg, #e0f2fe);
+            border: 1px solid var(--info-border, #7dd3fc);
+            color: var(--info-text, #0369a1);
             padding: 1rem 1.5rem;
             border-radius: 10px;
             text-align: center;
@@ -197,7 +197,7 @@
         }
         
         .progress-wrapper {
-            background: #e2e8f0;
+            background: var(--border-light, #e2e8f0);
             border-radius: 10px;
             overflow: hidden;
             height: 24px;
@@ -205,7 +205,7 @@
         }
         
         .progress-bar {
-            background: linear-gradient(90deg, #5b5fcf 0%, #8187ff 100%);
+            background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
             height: 100%;
             border-radius: 10px;
             transition: width 0.3s ease;
@@ -228,15 +228,15 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .alert i {
diff --git a/dockerManager/templates/dockerManager/images.html b/dockerManager/templates/dockerManager/images.html
index 4c0ff0d9c..a550c6737 100644
--- a/dockerManager/templates/dockerManager/images.html
+++ b/dockerManager/templates/dockerManager/images.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,14 +32,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-shadow-light, 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, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -52,17 +52,17 @@
     .docker-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary, white);
         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-medium, rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -78,8 +78,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -94,16 +94,16 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+        color: var(--bg-secondary, white);
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #fff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -117,26 +117,26 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -145,7 +145,7 @@
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -163,8 +163,8 @@
     }
     
     .image-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         transition: all 0.3s ease;
@@ -179,15 +179,15 @@
         right: 0;
         width: 100px;
         height: 100px;
-        background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
+        background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
         border-radius: 0 0 0 100%;
         transition: all 0.3s ease;
     }
     
     .image-card:hover {
         transform: translateY(-4px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.15);
-        border-color: #5b5fcf;
+        box-shadow: 0 8px 20px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .image-card:hover::before {
@@ -205,13 +205,13 @@
     .image-icon {
         width: 48px;
         height: 48px;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        color: #5b5fcf;
+        box-shadow: 0 2px 8px var(--shadow-medium, rgba(0,0,0,0.1));
+        color: var(--accent-color, #5b5fcf);
         font-size: 1.5rem;
     }
     
@@ -222,14 +222,14 @@
     .image-title {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         word-break: break-word;
     }
     
     .image-subtitle {
         font-size: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-top: 0.25rem;
     }
     
@@ -240,7 +240,7 @@
     .tag-label {
         font-size: 0.75rem;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.05em;
         margin-bottom: 0.5rem;
@@ -250,10 +250,10 @@
     .tag-select {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        background: white;
-        color: #1e293b;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         transition: all 0.3s ease;
         cursor: pointer;
@@ -261,8 +261,8 @@
     
     .tag-select: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));
     }
     
     .image-actions {
@@ -289,25 +289,25 @@
     }
     
     .action-btn.create {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
     }
     
     .action-btn.create:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
     }
     
     .action-btn.details {
-        background: white;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .action-btn.details:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
     }
     
@@ -319,25 +319,25 @@
     .empty-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1.5rem;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-size: 2rem;
     }
     
     .empty-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 0.5rem;
     }
     
     .empty-text {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 2rem;
     }
     
@@ -345,7 +345,7 @@
         width: 20px;
         height: 20px;
         border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -363,8 +363,8 @@
     }
     
     .badge-count {
-        background: #e0e7ff;
-        color: #5b5fcf;
+        background: var(--accent-bg, #e0e7ff);
+        color: var(--accent-color, #5b5fcf);
     }
     
     @keyframes spin {
@@ -423,7 +423,7 @@
     <div class="page-header">
         <h1 class="page-title">
             <div class="docker-icon">
-                <i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
             </div>
             {% trans "Docker Images" %}
         </h1>
@@ -515,32 +515,32 @@
         </div>
         <div class="card-body">
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
-                <div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #5b5fcf;">
-                    <h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
-                        <i class="fas fa-tag" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
+                <div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--accent-color, #5b5fcf);">
+                    <h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
+                        <i class="fas fa-tag" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
                         {% trans "About Tags" %}
                     </h4>
-                    <p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
+                    <p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
                         {% trans "Tags represent different versions of an image. 'latest' is the most recent stable version." %}
                     </p>
                 </div>
                 
-                <div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;">
-                    <h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
-                        <i class="fas fa-memory" style="color: #10b981; margin-right: 0.5rem;"></i>
+                <div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--success-color, #10b981);">
+                    <h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
+                        <i class="fas fa-memory" style="color: var(--success-color, #10b981); margin-right: 0.5rem;"></i>
                         {% trans "Container Resources" %}
                     </h4>
-                    <p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
+                    <p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
                         {% trans "You can set memory limits and other resources when creating a container." %}
                     </p>
                 </div>
                 
-                <div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                    <h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
-                        <i class="fas fa-network-wired" style="color: #f59e0b; margin-right: 0.5rem;"></i>
+                <div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--warning-color, #f59e0b);">
+                    <h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
+                        <i class="fas fa-network-wired" style="color: var(--warning-color, #f59e0b); margin-right: 0.5rem;"></i>
                         {% trans "Port Mapping" %}
                     </h4>
-                    <p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
+                    <p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
                         {% trans "Configure port mappings to access services running inside containers." %}
                     </p>
                 </div>
diff --git a/dockerManager/templates/dockerManager/listContainers.html b/dockerManager/templates/dockerManager/listContainers.html
index 70ad12e57..e896b8165 100644
--- a/dockerManager/templates/dockerManager/listContainers.html
+++ b/dockerManager/templates/dockerManager/listContainers.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,14 +32,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-shadow-light, 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, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -52,17 +52,17 @@
     .docker-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary, white);
         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-medium, rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -78,8 +78,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -94,15 +94,15 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+        color: var(--bg-secondary, white);
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -117,14 +117,14 @@
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
     }
     
     .btn-info {
-        background: #3b82f6;
-        color: white;
+        background: var(--info-color, #3b82f6);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -139,14 +139,14 @@
     }
     
     .btn-info:hover {
-        background: #2563eb;
+        background: var(--info-hover, #2563eb);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+        box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
     }
     
     .btn-success {
-        background: #10b981;
-        color: white;
+        background: var(--success-color, #10b981);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -167,19 +167,19 @@
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -188,7 +188,7 @@
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -201,33 +201,33 @@
     
     .containers-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 2rem;
     }
     
     .containers-table thead {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
     }
     
     .containers-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color, #e8e9ff);
     }
     
     .containers-table td {
         padding: 1rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
         vertical-align: middle;
     }
     
@@ -236,7 +236,7 @@
     }
     
     .containers-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .containers-table tbody tr:last-child td {
@@ -252,13 +252,13 @@
     .container-icon {
         width: 32px;
         height: 32px;
-        background: #e0e7ff;
+        background: var(--accent-bg, #e0e7ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.875rem;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .status-badge {
@@ -271,8 +271,8 @@
     }
     
     .status-running {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
     }
     
     .status-stopped {
@@ -290,7 +290,7 @@
         width: 20px;
         height: 20px;
         border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -320,37 +320,37 @@
     .pagination li a {
         display: block;
         padding: 0.5rem 1rem;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         text-decoration: none;
         font-weight: 500;
         transition: all 0.2s ease;
     }
     
     .pagination li a:hover {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
     }
     
     .modal-content {
         border-radius: 16px;
         overflow: hidden;
         border: none;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        border-bottom: 1px solid #e8e9ff;
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 1.5rem 2rem;
     }
     
     .modal-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
@@ -359,8 +359,8 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         padding: 1rem 2rem;
     }
     
@@ -378,19 +378,19 @@
     }
     
     .modal-footer .btn.btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
     }
     
     .modal-footer .btn.btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
     }
     
     .modal-footer .btn.btn-secondary {
         background: #6b7280;
-        color: white;
+        color: var(--bg-secondary, white);
         margin-left: 0.5rem;
     }
     
@@ -474,7 +474,7 @@
     <div class="page-header">
         <h1 class="page-title">
             <div class="docker-icon">
-                <i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
             </div>
             {% trans "Container Management" %}
         </h1>
@@ -635,7 +635,7 @@
                     {% trans "Container Logs" %}
                 </h4>
                 <button type="button" class="close" data-dismiss="modal" 
-                        style="font-size: 1.5rem; background: none; border: none;">&times;</button>
+                        style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
             </div>
             <div class="modal-body">
                 <textarea name="logs" class="form-control" style="font-family: monospace; height: 400px; resize: vertical;" 
@@ -665,15 +665,15 @@
                     {% trans "Assign Container to User" %}
                 </h4>
                 <button type="button" class="close" data-dismiss="modal" 
-                        style="font-size: 1.5rem; background: none; border: none;">&times;</button>
+                        style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
             </div>
             <div class="modal-body">
                 <div class="form-group">
-                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #1e293b;">
+                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary, #1e293b);">
                         {% trans "Select Owner" %}
                     </label>
                     <select ng-model="dockerOwner" class="form-control" 
-                            style="width: 100%; padding: 0.75rem; border: 1px solid #e8e9ff; border-radius: 8px;">
+                            style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color, #e8e9ff); border-radius: 8px;">
                         {% for user in adminNames %}
                             <option>{{user}}</option>
                         {% endfor %}
diff --git a/dockerManager/templates/dockerManager/manageImages.html b/dockerManager/templates/dockerManager/manageImages.html
index 7e437c0ea..9e11bd4fd 100644
--- a/dockerManager/templates/dockerManager/manageImages.html
+++ b/dockerManager/templates/dockerManager/manageImages.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,14 +32,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-shadow-light, 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, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -52,17 +52,17 @@
     .docker-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary, white);
         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-medium, rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -78,8 +78,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -94,16 +94,16 @@
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
-        color: white;
+        box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
+        color: var(--bg-secondary, white);
     }
     
     .btn-secondary {
-        background: #fff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #fff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -117,15 +117,15 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
     }
     
     .btn-warning {
-        background: #f59e0b;
-        color: white;
+        background: var(--warning-color, #f59e0b);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -139,14 +139,14 @@
     }
     
     .btn-warning:hover {
-        background: #d97706;
+        background: var(--warning-hover, #d97706);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
+        box-shadow: 0 8px 20px var(--warning-shadow, rgba(245, 158, 11, 0.4));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -160,14 +160,14 @@
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
     }
     
     .btn-info {
-        background: #3b82f6;
-        color: white;
+        background: var(--info-color, #3b82f6);
+        color: var(--bg-secondary, white);
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -181,25 +181,25 @@
     }
     
     .btn-info:hover {
-        background: #2563eb;
+        background: var(--info-hover, #2563eb);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+        box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -208,7 +208,7 @@
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -220,8 +220,8 @@
     }
     
     .search-section {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -235,55 +235,55 @@
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .form-control {
         width: 100%;
         padding: 0.875rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .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));
     }
     
     .images-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 2rem;
     }
     
     .images-table thead {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
     }
     
     .images-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color, #e8e9ff);
     }
     
     .images-table td {
         padding: 1rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
     }
     
     .images-table tbody tr {
@@ -291,7 +291,7 @@
     }
     
     .images-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .images-table tbody tr:last-child td {
@@ -307,18 +307,18 @@
     .image-icon {
         width: 32px;
         height: 32px;
-        background: #e0e7ff;
+        background: var(--accent-bg, #e0e7ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.875rem;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .official-badge {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
         font-size: 0.75rem;
@@ -338,7 +338,7 @@
         width: 20px;
         height: 20px;
         border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -349,19 +349,19 @@
         border-radius: 16px;
         overflow: hidden;
         border: none;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        border-bottom: 1px solid #e8e9ff;
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 1.5rem 2rem;
     }
     
     .modal-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
@@ -370,32 +370,32 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         padding: 1rem 2rem;
     }
     
     .history-table {
         width: 100%;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
         overflow: hidden;
     }
     
     .history-table th {
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         padding: 0.75rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .history-table td {
         padding: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         word-break: break-all;
     }
     
@@ -458,7 +458,7 @@
     <div class="page-header">
         <h1 class="page-title">
             <div class="docker-icon">
-                <i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
             </div>
             {% trans "Manage Docker Images" %}
         </h1>
@@ -611,7 +611,7 @@
                         {% trans "Image History" %}
                     </h4>
                     <button type="button" class="close" data-dismiss="modal" 
-                            style="font-size: 1.5rem; background: none; border: none;">&times;</button>
+                            style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
                 </div>
                 <div class="modal-body">
                     <table class="history-table">
diff --git a/dockerManager/templates/dockerManager/runContainer.html b/dockerManager/templates/dockerManager/runContainer.html
index a637e7fd9..feeef0c51 100644
--- a/dockerManager/templates/dockerManager/runContainer.html
+++ b/dockerManager/templates/dockerManager/runContainer.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,7 +32,7 @@
         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-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
@@ -44,7 +44,7 @@
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -55,12 +55,12 @@
     .docker-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-secondary, white);
         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-medium, rgba(0,0,0,0.1));
     }
     
     .image-info {
@@ -70,12 +70,12 @@
         gap: 0.5rem;
         margin-top: 1rem;
         font-size: 1.125rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .image-badge {
-        background: #e0e7ff;
-        color: #5b5fcf;
+        background: var(--accent-bg, #e0e7ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 0.5rem 1rem;
         border-radius: 8px;
         font-weight: 600;
@@ -105,7 +105,7 @@
         left: 60px;
         width: 100%;
         height: 2px;
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
     }
     
     .progress-step:last-child::after {
@@ -115,12 +115,12 @@
     .step-icon {
         width: 40px;
         height: 40px;
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 1rem;
         position: relative;
         z-index: 1;
@@ -128,40 +128,40 @@
     }
     
     .progress-step.active .step-icon {
-        background: #5b5fcf;
-        color: white;
-        box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.2);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        box-shadow: 0 0 0 4px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
     }
     
     .progress-step.completed .step-icon {
-        background: #10b981;
-        color: white;
+        background: var(--success-color, #10b981);
+        color: var(--bg-secondary, white);
     }
     
     .step-label {
         margin-top: 0.5rem;
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 500;
     }
     
     .progress-step.active .step-label {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-weight: 600;
     }
     
     .form-container {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .form-section {
         padding: 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .form-section:last-child {
@@ -178,24 +178,24 @@
     .section-icon {
         width: 40px;
         height: 40px;
-        background: #e0e7ff;
+        background: var(--accent-bg, #e0e7ff);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .section-title {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
     .section-subtitle {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-top: 0.25rem;
     }
     
@@ -209,7 +209,7 @@
     
     .form-label {
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
         display: flex;
         align-items: center;
@@ -217,29 +217,29 @@
     }
     
     .required-star {
-        color: #ef4444;
+        color: var(--danger-color, #ef4444);
     }
     
     .form-control {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .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));
     }
     
     .form-control:disabled {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         cursor: not-allowed;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .input-group {
@@ -250,7 +250,7 @@
     
     .input-addon {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 500;
     }
     
@@ -261,19 +261,19 @@
         align-items: center;
         margin-bottom: 1rem;
         padding: 1rem;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .port-arrow {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-size: 1.25rem;
     }
     
     .port-label {
         font-size: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 0.25rem;
         font-weight: 600;
         text-transform: uppercase;
@@ -281,7 +281,7 @@
     }
     
     .dynamic-section {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-top: 1.5rem;
@@ -297,7 +297,7 @@
     .dynamic-title {
         font-size: 0.875rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
@@ -309,9 +309,9 @@
         align-items: center;
         margin-bottom: 1rem;
         padding: 1rem;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 8px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn {
@@ -328,31 +328,31 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
     }
     
     .btn-secondary {
-        background: white;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
     }
     
     .btn-danger {
         background: #fee2e2;
-        color: #ef4444;
+        color: var(--danger-color, #ef4444);
         border: 1px solid #fecaca;
     }
     
@@ -362,8 +362,8 @@
     }
     
     .btn-success {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
         border: 1px solid #a7f3d0;
     }
     
@@ -382,8 +382,8 @@
         gap: 1rem;
         margin-top: 2rem;
         padding: 2rem;
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     .status-message {
@@ -404,8 +404,8 @@
     }
     
     .status-success {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
     }
     
     .status-error {
@@ -416,12 +416,12 @@
     .status-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 0.5rem;
     }
     
     .status-text {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
     }
     
@@ -429,7 +429,7 @@
         width: 40px;
         height: 40px;
         border: 4px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin: 0 auto;
@@ -441,7 +441,7 @@
     }
     
     .tooltip-icon {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
     }
     
@@ -455,8 +455,8 @@
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
-        background: #1e293b;
-        color: white;
+        background: var(--text-primary, #1e293b);
+        color: var(--bg-secondary, white);
         padding: 0.5rem 1rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -471,7 +471,7 @@
         left: 50%;
         transform: translateX(-50%);
         border: 5px solid transparent;
-        border-top-color: #1e293b;
+        border-top-color: var(--text-primary, #1e293b);
     }
     
     @keyframes spin {
@@ -544,7 +544,7 @@
         <div class="header-content">
             <h1 class="page-title">
                 <div class="docker-icon">
-                    <i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                    <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
                 </div>
                 {% trans "Create New Container" %}
             </h1>
diff --git a/dockerManager/templates/dockerManager/viewContainer.html b/dockerManager/templates/dockerManager/viewContainer.html
index 8bd5bd0c6..5b020744c 100644
--- a/dockerManager/templates/dockerManager/viewContainer.html
+++ b/dockerManager/templates/dockerManager/viewContainer.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,7 +32,7 @@
         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-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
@@ -49,12 +49,12 @@
     .container-icon-large {
         width: 80px;
         height: 80px;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+        box-shadow: 0 8px 24px var(--shadow-medium, rgba(0,0,0,0.1));
     }
     
     .container-title-section {
@@ -64,7 +64,7 @@
     .container-name {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -73,7 +73,7 @@
     
     .container-id {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-top: 0.5rem;
         font-family: monospace;
     }
@@ -101,8 +101,8 @@
     }
     
     .status-running {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
     }
     
     .status-stopped {
@@ -123,11 +123,11 @@
     }
     
     .status-running .status-dot {
-        background: #10b981;
+        background: var(--success-color, #10b981);
     }
     
     .status-stopped .status-dot {
-        background: #ef4444;
+        background: var(--danger-color, #ef4444);
         animation: none;
     }
     
@@ -138,12 +138,12 @@
     
     .refresh-icon {
         cursor: pointer;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         transition: all 0.3s ease;
     }
     
     .refresh-icon:hover {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         transform: rotate(180deg);
     }
     
@@ -155,11 +155,11 @@
     }
     
     .stat-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         padding: 1.5rem;
-        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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
@@ -172,13 +172,13 @@
         right: 0;
         width: 100px;
         height: 100px;
-        background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
+        background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
         border-radius: 0 0 0 100%;
     }
     
     .stat-card:hover {
         transform: translateY(-4px);
-        box-shadow: 0 12px 30px rgba(91, 95, 207, 0.15);
+        box-shadow: 0 12px 30px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
     }
     
     .stat-header {
@@ -191,7 +191,7 @@
     .stat-title {
         font-size: 0.875rem;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
@@ -199,24 +199,24 @@
     .stat-icon {
         width: 40px;
         height: 40px;
-        background: #e0e7ff;
+        background: var(--accent-bg, #e0e7ff);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .stat-value {
         font-size: 2rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0.5rem 0;
     }
     
     .stat-subtitle {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .progress-bar {
@@ -230,31 +230,31 @@
     
     .progress-fill {
         height: 100%;
-        background: linear-gradient(90deg, #5b5fcf 0%, #7b7fd0 100%);
+        background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
         border-radius: 4px;
         transition: width 0.5s ease;
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-secondary, white);
         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-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -272,16 +272,16 @@
     }
     
     .info-item {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         padding: 1rem;
         border-radius: 12px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .info-label {
         font-size: 0.75rem;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.05em;
         margin-bottom: 0.5rem;
@@ -290,7 +290,7 @@
     .info-value {
         font-size: 0.875rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         word-break: break-all;
     }
     
@@ -301,15 +301,15 @@
     }
     
     .action-btn {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 1rem;
         border-radius: 12px;
         cursor: pointer;
         transition: all 0.3s ease;
         text-align: center;
         text-decoration: none;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         position: relative;
         overflow: hidden;
     }
@@ -321,7 +321,7 @@
         left: 50%;
         width: 0;
         height: 0;
-        background: rgba(91, 95, 207, 0.1);
+        background: var(--accent-focus, rgba(91, 95, 207, 0.1));
         border-radius: 50%;
         transform: translate(-50%, -50%);
         transition: width 0.6s, height 0.6s;
@@ -334,18 +334,18 @@
     
     .action-btn:hover {
         transform: translateY(-2px);
-        border-color: #5b5fcf;
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
     }
     
     .action-btn.primary {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .action-btn.primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
     }
     
     .action-btn.danger {
@@ -425,7 +425,7 @@
     
     .terminal-btn:hover {
         background: #718096;
-        color: white;
+        color: var(--bg-secondary, white);
     }
     
     .terminal-content {
@@ -457,7 +457,7 @@
         width: 20px;
         height: 20px;
         border: 3px solid #e8e9ff;
-        border-top-color: #5b5fcf;
+        border-top-color: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -469,19 +469,19 @@
         border-radius: 16px;
         overflow: hidden;
         border: none;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        border-bottom: 1px solid #e8e9ff;
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 1.5rem 2rem;
     }
     
     .modal-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
@@ -490,8 +490,8 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         padding: 1rem 2rem;
     }
     
@@ -506,19 +506,19 @@
     }
     
     .modal-footer .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
     }
     
     .modal-footer .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
     }
     
     .modal-footer .btn-default {
         background: #6b7280;
-        color: white;
+        color: var(--bg-secondary, white);
         margin-left: 0.5rem;
     }
     
@@ -561,7 +561,7 @@
     
     @keyframes pulse {
         0%, 100% {
-            box-shadow: 0 0 0 0 rgba(91, 95, 207, 0.4);
+            box-shadow: 0 0 0 0 var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
         }
         50% {
             box-shadow: 0 0 0 10px rgba(91, 95, 207, 0);
@@ -592,7 +592,7 @@
     <div class="page-header">
         <div class="container-header">
             <div class="container-icon-large">
-                <i class="fab fa-docker" style="color: #5b5fcf; font-size: 2.5rem;"></i>
+                <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 2.5rem;"></i>
             </div>
             <div class="container-title-section">
                 <h1 class="container-name" ng-init="cName='{{ name }}';status='{{ status }}'">
@@ -675,7 +675,7 @@
                     <div class="info-label">{% trans "Port Mappings" %}</div>
                     <div class="info-value">
                         {% for iport, eport in ports.items %}
-                            <span style="background: #e0e7ff; padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
+                            <span style="background: var(--accent-bg, #e0e7ff); padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
                                 {{ iport }} → {{ eport }}
                             </span>
                         {% endfor %}
@@ -689,10 +689,10 @@
                 <div class="info-item">
                     <div class="info-label">{% trans "Start on Boot" %}</div>
                     <div class="info-value" ng-init="startOnReboot={{ startOnReboot }}">
-                        <span ng-if="startOnReboot" style="color: #10b981;">
+                        <span ng-if="startOnReboot" style="color: var(--success-color, #10b981);">
                             <i class="fas fa-check-circle"></i> {% trans "Enabled" %}
                         </span>
-                        <span ng-if="!startOnReboot" style="color: #64748b;">
+                        <span ng-if="!startOnReboot" style="color: var(--text-secondary, #64748b);">
                             <i class="fas fa-times-circle"></i> {% trans "Disabled" %}
                         </span>
                     </div>
@@ -713,17 +713,17 @@
         <div class="card-body">
             <div class="action-grid">
                 <div class="action-btn" ng-click="cAction('start')" ng-disabled="status=='running'">
-                    <i class="fas fa-play action-icon" style="color: #10b981;"></i>
+                    <i class="fas fa-play action-icon" style="color: var(--success-color, #10b981);"></i>
                     <div class="action-text">{% trans "Start" %}</div>
                 </div>
                 
                 <div class="action-btn" ng-click="cAction('restart')" ng-disabled="status!='running'">
-                    <i class="fas fa-sync-alt action-icon" style="color: #3b82f6;"></i>
+                    <i class="fas fa-sync-alt action-icon" style="color: var(--info-color, #3b82f6);"></i>
                     <div class="action-text">{% trans "Restart" %}</div>
                 </div>
                 
                 <div class="action-btn" ng-click="cAction('stop')" ng-disabled="status!='running'">
-                    <i class="fas fa-stop action-icon" style="color: #f59e0b;"></i>
+                    <i class="fas fa-stop action-icon" style="color: var(--warning-color, #f59e0b);"></i>
                     <div class="action-text">{% trans "Stop" %}</div>
                 </div>
                 
@@ -748,7 +748,7 @@
                 </div>
                 
                 <a href="/docker/exportContainer/?name={{ name }}" class="action-btn">
-                    <i class="fas fa-download action-icon" style="color: #10b981;"></i>
+                    <i class="fas fa-download action-icon" style="color: var(--success-color, #10b981);"></i>
                     <div class="action-text">{% trans "Export" %}</div>
                 </a>
                 
@@ -792,7 +792,7 @@
                         {% trans "Container Settings" %}
                     </h4>
                     <button type="button" class="close" data-dismiss="modal" 
-                            style="font-size: 1.5rem; background: none; border: none;">&times;</button>
+                            style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
                 </div>
                 <div class="modal-body">
                     <form name="containerSettingsForm" class="form-horizontal">
@@ -928,7 +928,7 @@
                         {% trans "Container Processes" %}
                     </h4>
                     <button type="button" class="close" data-dismiss="modal" 
-                            style="font-size: 1.5rem; background: none; border: none;">&times;</button>
+                            style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
                 </div>
                 <div class="modal-body">
                     <div class="table-responsive">
diff --git a/managePHP/templates/managePHP/editPHPConfig.html b/managePHP/templates/managePHP/editPHPConfig.html
index 23855dbc3..860d0fd9e 100644
--- a/managePHP/templates/managePHP/editPHPConfig.html
+++ b/managePHP/templates/managePHP/editPHPConfig.html
@@ -667,7 +667,7 @@
                         </div>
                         <div class="setting-control">
                             <input ng-model="memory_limit" type="text" class="form-control" 
-                                   placeholder="128M" style="max-width: 200px;">
+                                   placeholder="128M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
                         </div>
                     </div>
                     
@@ -678,7 +678,7 @@
                         </div>
                         <div class="setting-control">
                             <input ng-model="max_execution_time" type="text" class="form-control" 
-                                   placeholder="30" style="max-width: 200px;">
+                                   placeholder="30" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
                         </div>
                     </div>
                     
@@ -689,7 +689,7 @@
                         </div>
                         <div class="setting-control">
                             <input ng-model="upload_max_filesize" type="text" class="form-control" 
-                                   placeholder="2M" style="max-width: 200px;">
+                                   placeholder="2M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
                         </div>
                     </div>
                     
@@ -700,7 +700,7 @@
                         </div>
                         <div class="setting-control">
                             <input ng-model="post_max_size" type="text" class="form-control" 
-                                   placeholder="8M" style="max-width: 200px;">
+                                   placeholder="8M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
                         </div>
                     </div>
                     
@@ -711,7 +711,7 @@
                         </div>
                         <div class="setting-control">
                             <input ng-model="max_input_time" type="text" class="form-control" 
-                                   placeholder="60" style="max-width: 200px;">
+                                   placeholder="60" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
                         </div>
                     </div>
                 </div>
diff --git a/managePHP/templates/managePHP/installExtensions.html b/managePHP/templates/managePHP/installExtensions.html
index cf1eb5681..851e9327a 100644
--- a/managePHP/templates/managePHP/installExtensions.html
+++ b/managePHP/templates/managePHP/installExtensions.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -29,7 +29,7 @@
         right: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+        background: radial-gradient(circle at 70% 30%, var(--bg-light, rgba(255, 255, 255, 0.1)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
@@ -78,18 +78,18 @@
     .php-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--bg-light, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 600px;
         margin: 0 auto;
     }
@@ -99,28 +99,28 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--bg-light, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         padding: 0.5rem 1.5rem;
         border-radius: 20px;
-        color: white;
+        color: var(--text-primary, white);
         text-decoration: none;
         font-size: 0.875rem;
         transition: all 0.3s ease;
     }
     
     .apache-link:hover {
-        background: rgba(255, 255, 255, 0.3);
+        background: var(--bg-hover, rgba(255, 255, 255, 0.3));
         transform: translateY(-2px);
-        color: white;
+        color: var(--text-primary, white);
         text-decoration: none;
     }
     
     .selector-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 2rem;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
@@ -136,18 +136,18 @@
     .selector-icon {
         width: 40px;
         height: 40px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .selector-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .selector-form {
@@ -162,7 +162,7 @@
     
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.875rem;
         margin-bottom: 0.5rem;
         display: block;
@@ -171,17 +171,17 @@
     .form-control {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .select-control {
@@ -207,13 +207,13 @@
     }
     
     .btn-primary {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-primary:disabled {
@@ -223,10 +223,10 @@
     }
     
     .extensions-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out 0.2s;
         animation-fill-mode: both;
@@ -234,8 +234,8 @@
     
     .controls-bar {
         padding: 1.5rem 2rem;
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-light, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .search-box {
@@ -246,16 +246,18 @@
     .search-input {
         width: 100%;
         padding: 0.75rem 1rem 0.75rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, inherit);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -263,33 +265,33 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .extensions-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .extensions-table thead {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
     }
     
     .extensions-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.75rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .extensions-table td {
         padding: 1rem;
-        border-bottom: 1px solid #f1f5f9;
-        color: #334155;
+        border-bottom: 1px solid var(--border-light, #f1f5f9);
+        color: var(--text-primary, #334155);
         font-size: 0.875rem;
     }
     
@@ -298,19 +300,19 @@
     }
     
     .extensions-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .extension-name {
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .php-version-badge {
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.75rem;
-        background: #e0e7ff;
-        color: #4c1d95;
+        background: var(--accent-bg, #e0e7ff);
+        color: var(--accent-color, #4c1d95);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-weight: 500;
@@ -327,13 +329,13 @@
     }
     
     .status-installed {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-color, #065f46);
     }
     
     .status-not-installed {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-color, #991b1b);
     }
     
     .btn-sm {
@@ -342,32 +344,32 @@
     }
     
     .btn-install {
-        background: #10b981;
-        color: white;
+        background: var(--success-color, #10b981);
+        color: var(--text-primary, white);
     }
     
     .btn-install:hover:not(:disabled) {
-        background: #059669;
+        background: var(--success-hover, #059669);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        box-shadow: var(--success-shadow, 0 4px 12px rgba(16, 185, 129, 0.3));
     }
     
     .btn-uninstall {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-uninstall:hover:not(:disabled) {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .log-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         padding: 2rem;
         margin-top: 2rem;
         animation: fadeInUp 0.5s ease-out;
@@ -383,7 +385,7 @@
     .log-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         display: flex;
         align-items: center;
         gap: 0.75rem;
@@ -392,17 +394,17 @@
     .log-icon {
         width: 32px;
         height: 32px;
-        background: #f3e8ff;
+        background: var(--accent-bg, #f3e8ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #667eea;
+        color: var(--accent-color, #667eea);
     }
     
     .log-output {
-        background: #1e293b;
-        color: #10b981;
+        background: var(--console-bg, #1e293b);
+        color: var(--console-text, #10b981);
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
         padding: 1.5rem;
@@ -414,14 +416,14 @@
     }
     
     .btn-back {
-        background: #6366f1;
-        color: white;
+        background: var(--info-color, #6366f1);
+        color: var(--text-primary, white);
     }
     
     .btn-back:hover {
-        background: #4f46e5;
+        background: var(--info-hover, #4f46e5);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        box-shadow: var(--info-shadow, 0 4px 12px rgba(99, 102, 241, 0.3));
     }
     
     .alert {
@@ -435,9 +437,9 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-color, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -447,8 +449,8 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -583,7 +585,7 @@
                         <span class="status-badge" 
                               ng-class="{'status-installed': record.status=='Installed', 
                                          'status-not-installed': record.status=='Not-Installed'}">
-                            <i class="fas fa-circle" style="font-size: 0.5rem;"></i>
+                            <i class="fas fa-circle" style="font-size: 0.5rem; color: inherit;"></i>
                             {$ record.status $}
                         </span>
                     </td>
diff --git a/manageSSL/templates/manageSSL/index.html b/manageSSL/templates/manageSSL/index.html
index 404105555..28681de2d 100644
--- a/manageSSL/templates/manageSSL/index.html
+++ b/manageSSL/templates/manageSSL/index.html
@@ -17,18 +17,18 @@
     }
     
     .ssl-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,12 +41,12 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .ssl-description {
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -60,8 +60,8 @@
     }
     
     .function-card {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 25px;
         text-align: center;
@@ -72,8 +72,8 @@
     }
     
     .function-card:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 6px 20px rgba(91,95,207,0.2);
         transform: translateY(-3px);
         text-decoration: none;
@@ -83,7 +83,7 @@
         width: 60px;
         height: 60px;
         margin: 0 auto 15px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -92,25 +92,25 @@
     }
     
     .function-card:hover .function-icon {
-        background: #4b4fbf;
-        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
     }
     
     .function-icon i {
         font-size: 24px;
-        color: white;
+        color: var(--bg-secondary, white);
     }
     
     .function-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .function-desc {
         font-size: 13px;
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         line-height: 1.5;
     }
     
diff --git a/manageSSL/templates/manageSSL/manageSSL.html b/manageSSL/templates/manageSSL/manageSSL.html
index c3f1afeca..dc7313245 100644
--- a/manageSSL/templates/manageSSL/manageSSL.html
+++ b/manageSSL/templates/manageSSL/manageSSL.html
@@ -17,18 +17,18 @@
     }
     
     .ssl-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,14 +41,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .ssl-docs-link {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 6px 14px;
         border-radius: 6px;
         font-size: 12px;
@@ -62,23 +62,23 @@
     }
     
     .ssl-docs-link:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 2px 4px rgba(91,95,207,0.3);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
     }
     
     .ssl-description {
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
     }
     
     .form-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
     }
@@ -90,7 +90,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -100,18 +100,18 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        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: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));
     }
     
     /* Windows selectbox fix */
@@ -126,14 +126,14 @@
         padding-right: 40px;
         line-height: 1.5;
         min-height: 44px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
             color: #2f3640 !important;
-            background-color: white !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -143,14 +143,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -164,23 +164,23 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
-        box-shadow: 0 3px 8px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
-        border-color: #94a3b8;
+        background: var(--text-disabled, #94a3b8);
+        border-color: var(--text-disabled, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }
     
     .ssl-details-card {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 20px;
@@ -189,7 +189,7 @@
     .ssl-details-card h4 {
         font-size: 14px;
         font-weight: 700;
-        color: #0c4a6e;
+        color: var(--info-text, #0c4a6e);
         margin-bottom: 15px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -198,11 +198,11 @@
     .ssl-detail-item {
         margin-bottom: 10px;
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .ssl-detail-item strong {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         margin-right: 8px;
     }
@@ -218,13 +218,13 @@
     }
     
     .ssl-status.active {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
     }
     
     .ssl-status.inactive {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg, #fef3c7);
+        color: var(--warning-text, #92400e);
     }
     
     .alert {
@@ -236,15 +236,15 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
+        color: var(--info-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fef2f2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .loading-spinner {
@@ -327,7 +327,7 @@
                         </div>
                         <div class="ssl-detail-item">
                             <strong>Days Remaining:</strong> 
-                            <span style="color: #16a34a; font-weight: 600;">{$ sslDetails.days $} days</span>
+                            <span style="color: var(--success-color, #16a34a); font-weight: 600;">{$ sslDetails.days $} days</span>
                         </div>
                     </div>
                     <div ng-if="!sslDetails.hasSSL">
@@ -338,7 +338,7 @@
                                 No SSL Certificate
                             </span>
                         </div>
-                        <div ng-if="sslDetails.error_message" class="ssl-detail-item" style="color: #dc2626;">
+                        <div ng-if="sslDetails.error_message" class="ssl-detail-item" style="color: var(--danger-color, #dc2626);">
                             <strong>Error:</strong> {$ sslDetails.error_message $}
                         </div>
                     </div>
diff --git a/manageSSL/templates/manageSSL/sslForHostName.html b/manageSSL/templates/manageSSL/sslForHostName.html
index 5bf77ff7c..8970dc7ac 100644
--- a/manageSSL/templates/manageSSL/sslForHostName.html
+++ b/manageSSL/templates/manageSSL/sslForHostName.html
@@ -17,18 +17,18 @@
     }
     
     .ssl-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,14 +41,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .ssl-docs-link {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 6px 14px;
         border-radius: 6px;
         font-size: 12px;
@@ -62,15 +62,15 @@
     }
     
     .ssl-docs-link:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 2px 4px rgba(91,95,207,0.3);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
     }
     
     .ssl-description {
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -93,8 +93,8 @@
     }
     
     .form-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
     }
@@ -106,7 +106,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -115,18 +115,18 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        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: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));
     }
     
     /* Windows selectbox fixes */
@@ -141,14 +141,14 @@
         padding-right: 40px;
         line-height: 1.5;
         min-height: 44px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
             color: #2f3640 !important;
-            background-color: white !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -158,14 +158,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -179,15 +179,15 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
-        box-shadow: 0 3px 8px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
-        border-color: #94a3b8;
+        background: var(--text-disabled, #94a3b8);
+        border-color: var(--text-disabled, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -202,15 +202,15 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
+        color: var(--info-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fef2f2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .loading-spinner {
diff --git a/manageSSL/templates/manageSSL/sslForMailServer.html b/manageSSL/templates/manageSSL/sslForMailServer.html
index 054fdcec3..a1436f659 100644
--- a/manageSSL/templates/manageSSL/sslForMailServer.html
+++ b/manageSSL/templates/manageSSL/sslForMailServer.html
@@ -17,18 +17,18 @@
     }
     
     .ssl-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,14 +41,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .ssl-docs-link {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 6px 14px;
         border-radius: 6px;
         font-size: 12px;
@@ -62,15 +62,15 @@
     }
     
     .ssl-docs-link:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 2px 4px rgba(91,95,207,0.3);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
     }
     
     .ssl-description {
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -93,8 +93,8 @@
     }
     
     .form-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
     }
@@ -106,7 +106,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -115,18 +115,18 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        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: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));
     }
     
     /* Windows selectbox fixes */
@@ -141,14 +141,14 @@
         padding-right: 40px;
         line-height: 1.5;
         min-height: 44px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
             color: #2f3640 !important;
-            background-color: white !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -158,14 +158,14 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -179,15 +179,15 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
-        box-shadow: 0 3px 8px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
-        border-color: #94a3b8;
+        background: var(--text-disabled, #94a3b8);
+        border-color: var(--text-disabled, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -202,15 +202,15 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
+        color: var(--info-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fef2f2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .loading-spinner {
diff --git a/manageSSL/templates/manageSSL/v2ManageSSL.html b/manageSSL/templates/manageSSL/v2ManageSSL.html
index 6cd8f0542..119941aab 100644
--- a/manageSSL/templates/manageSSL/v2ManageSSL.html
+++ b/manageSSL/templates/manageSSL/v2ManageSSL.html
@@ -17,18 +17,18 @@
     }
     
     .ssl-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,14 +41,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .ssl-docs-link {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 6px 14px;
         border-radius: 6px;
         font-size: 12px;
@@ -62,23 +62,23 @@
     }
     
     .ssl-docs-link:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 4px rgba(91,95,207,0.3);
         text-decoration: none;
     }
     
     .ssl-description {
-        color: #8893a7;
+        color: var(--text-muted, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
     }
     
     .video-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 25px;
@@ -110,10 +110,10 @@
         justify-content: center;
         gap: 10px;
         padding: 15px 20px;
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         text-decoration: none;
         font-weight: 600;
         transition: all 0.2s ease;
@@ -121,15 +121,15 @@
     
     .nav-tabs li.active a,
     .nav-tabs a:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 2px 8px rgba(91,95,207,0.3);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 2px 8px var(--accent-shadow, rgba(91,95,207,0.3));
     }
     
     .tab-content {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
     }
@@ -142,7 +142,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -152,18 +152,18 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        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: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));
     }
     
     /* Windows selectbox fix */
@@ -178,14 +178,14 @@
         padding-right: 40px;
         line-height: 1.5;
         min-height: 44px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
             color: #2f3640 !important;
-            background-color: white !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -195,21 +195,21 @@
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     textarea.form-control {
         resize: vertical;
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 13px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: var(--bg-secondary, white);
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -223,15 +223,15 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
-        box-shadow: 0 3px 8px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
-        border-color: #94a3b8;
+        background: var(--text-disabled, #94a3b8);
+        border-color: var(--text-disabled, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -239,8 +239,8 @@
     
     /* SSL Details Panel */
     .ssl-details-panel {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
         margin-top: 20px;
@@ -249,7 +249,7 @@
     .ssl-details-header {
         font-size: 14px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 15px;
         padding-bottom: 10px;
         border-bottom: 1px solid #e8e9ff;
@@ -258,11 +258,11 @@
     .ssl-details-panel p {
         margin: 8px 0;
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .ssl-details-panel strong {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
     }
     
@@ -276,9 +276,9 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
+        color: var(--info-text, #0c4a6e);
     }
     
     .alert-info {
@@ -303,13 +303,13 @@
     .premium-hero h1 {
         font-size: 32px;
         font-weight: 800;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
     }
     
     .premium-description {
         font-size: 16px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.7;
         max-width: 800px;
         margin: 0 auto 40px;
@@ -411,13 +411,13 @@
                             <div ng-if="sslDetails" class="ssl-details-panel">
                                 <h4 class="ssl-details-header">{% trans "SSL Details" %}</h4>
                                 <div ng-if="sslDetails.hasSSL">
-                                    <p><strong>{% trans "Status:" %}</strong> <span style="color: #10b981;">Active</span></p>
+                                    <p><strong>{% trans "Status:" %}</strong> <span style="color: var(--success-color, #10b981);">Active</span></p>
                                     <p><strong>{% trans "Issued By:" %}</strong> {$ sslDetails.authority $}</p>
                                     <p><strong>{% trans "Expiry Date:" %}</strong> {$ sslDetails.expiryDate $}</p>
                                     <p><strong>{% trans "Days Remaining:" %}</strong> {$ sslDetails.days $}</p>
                                 </div>
                                 <div ng-if="!sslDetails.hasSSL">
-                                    <p><strong>{% trans "Status:" %}</strong> <span style="color: #ef4444;">No SSL Certificate</span></p>
+                                    <p><strong>{% trans "Status:" %}</strong> <span style="color: var(--danger-color, #ef4444);">No SSL Certificate</span></p>
                                     <p ng-if="sslDetails.error_message"><strong>{% trans "Error:" %}</strong> {$ sslDetails.error_message $}</p>
                                 </div>
                             </div>
diff --git a/serverLogs/templates/serverLogs/accessLogs.html b/serverLogs/templates/serverLogs/accessLogs.html
index 9f6e022c1..d3bf15153 100644
--- a/serverLogs/templates/serverLogs/accessLogs.html
+++ b/serverLogs/templates/serverLogs/accessLogs.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,40 +78,40 @@
     .log-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: #1e293b;
-        color: white;
+        background: var(--console-bg, #1e293b);
+        color: var(--text-primary, white);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border, #334155);
     }
     
     .panel-title {
@@ -120,18 +120,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--bg-hover, #334155);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .log-stats {
@@ -145,18 +145,18 @@
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -178,16 +178,18 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -195,12 +197,12 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
     
     .log-content {
-        background: #1e293b;
+        background: var(--console-bg, #1e293b);
         padding: 1.5rem;
         min-height: 600px;
         max-height: 700px;
@@ -211,7 +213,7 @@
     .log-textarea {
         width: 100%;
         background: transparent;
-        color: #10b981;
+        color: var(--success-color, #10b981);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
@@ -222,7 +224,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-muted, #475569);
     }
     
     .log-line-numbers {
@@ -231,13 +233,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-muted, #475569);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border, #334155);
     }
     
     .log-content-wrapper {
@@ -245,9 +247,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +270,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color, #667eea);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover, #5a67d8);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--text-muted, #64748b);
+        color: var(--text-primary, white);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--bg-hover, #475569);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +328,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -344,12 +346,12 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
     
@@ -357,12 +359,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +373,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border, #334155);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--text-muted, #64748b);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
-    .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-error { color: var(--danger-color, #ef4444); }
+    .log-warning { color: var(--warning-color, #f59e0b); }
+    .log-info { color: var(--info-color, #3b82f6); }
+    .log-debug { color: var(--accent-color, #8b5cf6); }
+    .log-success { color: var(--success-color, #10b981); }
     
     /* Responsive */
     @media (max-width: 768px) {
@@ -466,7 +468,7 @@
                     <span class="stat-value">{% trans "Last 50 lines" %}</span>
                 </div>
                 <div ng-hide="logFileLoading" class="stat-item">
-                    <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                    <i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
                 <div ng-show="!logFileLoading" class="loading-spinner"></div>
diff --git a/serverLogs/templates/serverLogs/emailLogs.html b/serverLogs/templates/serverLogs/emailLogs.html
index 7cd84e288..945843061 100644
--- a/serverLogs/templates/serverLogs/emailLogs.html
+++ b/serverLogs/templates/serverLogs/emailLogs.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,40 +78,40 @@
     .log-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: #1e293b;
-        color: white;
+        background: var(--console-bg, #1e293b);
+        color: var(--text-primary, white);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border, #334155);
     }
     
     .panel-title {
@@ -120,18 +120,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--bg-hover, #334155);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .log-stats {
@@ -145,18 +145,18 @@
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -178,16 +178,18 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -195,12 +197,12 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
     
     .log-content {
-        background: #1e293b;
+        background: var(--console-bg, #1e293b);
         padding: 1.5rem;
         min-height: 600px;
         max-height: 700px;
@@ -211,7 +213,7 @@
     .log-textarea {
         width: 100%;
         background: transparent;
-        color: #3b82f6;
+        color: var(--info-color, #3b82f6);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
@@ -222,7 +224,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-muted, #475569);
     }
     
     .log-line-numbers {
@@ -231,13 +233,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-muted, #475569);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border, #334155);
     }
     
     .log-content-wrapper {
@@ -245,9 +247,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +270,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color, #667eea);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover, #5a67d8);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--text-muted, #64748b);
+        color: var(--text-primary, white);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--bg-hover, #475569);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +328,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -344,12 +346,12 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
     
@@ -357,12 +359,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +373,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border, #334155);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--text-muted, #64748b);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
-    .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-error { color: var(--danger-color, #ef4444); }
+    .log-warning { color: var(--warning-color, #f59e0b); }
+    .log-info { color: var(--info-color, #3b82f6); }
+    .log-debug { color: var(--accent-color, #8b5cf6); }
+    .log-success { color: var(--success-color, #10b981); }
     
     /* Responsive */
     @media (max-width: 768px) {
@@ -466,7 +468,7 @@
                     <span class="stat-value">{% trans "Last 50 lines" %}</span>
                 </div>
                 <div ng-hide="logFileLoading" class="stat-item">
-                    <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                    <i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
                 <div ng-show="!logFileLoading" class="loading-spinner"></div>
diff --git a/serverLogs/templates/serverLogs/errorLogs.html b/serverLogs/templates/serverLogs/errorLogs.html
index 236a3e389..824858c35 100644
--- a/serverLogs/templates/serverLogs/errorLogs.html
+++ b/serverLogs/templates/serverLogs/errorLogs.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,40 +78,40 @@
     .log-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: #1e293b;
-        color: white;
+        background: var(--console-bg, #1e293b);
+        color: var(--text-primary, white);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border, #334155);
     }
     
     .panel-title {
@@ -120,18 +120,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--bg-hover, #334155);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .log-stats {
@@ -145,18 +145,18 @@
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -178,16 +178,18 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -195,12 +197,12 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
     
     .log-content {
-        background: #1e293b;
+        background: var(--console-bg, #1e293b);
         padding: 1.5rem;
         min-height: 600px;
         max-height: 700px;
@@ -211,7 +213,7 @@
     .log-textarea {
         width: 100%;
         background: transparent;
-        color: #ef4444;
+        color: var(--danger-color, #ef4444);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
@@ -222,7 +224,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-muted, #475569);
     }
     
     .log-line-numbers {
@@ -231,13 +233,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-muted, #475569);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border, #334155);
     }
     
     .log-content-wrapper {
@@ -245,9 +247,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +270,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color, #667eea);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover, #5a67d8);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--text-muted, #64748b);
+        color: var(--text-primary, white);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--bg-hover, #475569);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +328,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -344,12 +346,12 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
     
@@ -357,12 +359,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +373,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border, #334155);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--text-muted, #64748b);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
-    .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-error { color: var(--danger-color, #ef4444); }
+    .log-warning { color: var(--warning-color, #f59e0b); }
+    .log-info { color: var(--info-color, #3b82f6); }
+    .log-debug { color: var(--accent-color, #8b5cf6); }
+    .log-success { color: var(--success-color, #10b981); }
     
     /* Responsive */
     @media (max-width: 768px) {
@@ -466,7 +468,7 @@
                     <span class="stat-value">{% trans "Last 50 lines" %}</span>
                 </div>
                 <div ng-hide="logFileLoading" class="stat-item">
-                    <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                    <i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
                 <div ng-show="!logFileLoading" class="loading-spinner"></div>
diff --git a/serverLogs/templates/serverLogs/ftplogs.html b/serverLogs/templates/serverLogs/ftplogs.html
index af215a9d3..f3d2beb0c 100644
--- a/serverLogs/templates/serverLogs/ftplogs.html
+++ b/serverLogs/templates/serverLogs/ftplogs.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,40 +78,40 @@
     .log-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: #1e293b;
-        color: white;
+        background: var(--console-bg, #1e293b);
+        color: var(--text-primary, white);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border, #334155);
     }
     
     .panel-title {
@@ -120,18 +120,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--bg-hover, #334155);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .log-stats {
@@ -145,18 +145,18 @@
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -178,16 +178,18 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -195,12 +197,12 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
     
     .log-content {
-        background: #1e293b;
+        background: var(--console-bg, #1e293b);
         padding: 1.5rem;
         min-height: 600px;
         max-height: 700px;
@@ -211,7 +213,7 @@
     .log-textarea {
         width: 100%;
         background: transparent;
-        color: #8b5cf6;
+        color: var(--accent-color, #8b5cf6);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
@@ -222,7 +224,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-muted, #475569);
     }
     
     .log-line-numbers {
@@ -231,13 +233,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-muted, #475569);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border, #334155);
     }
     
     .log-content-wrapper {
@@ -245,9 +247,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +270,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color, #667eea);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover, #5a67d8);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--text-muted, #64748b);
+        color: var(--text-primary, white);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--bg-hover, #475569);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +328,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -344,12 +346,12 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
     
@@ -357,12 +359,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +373,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border, #334155);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--text-muted, #64748b);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
-    .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-error { color: var(--danger-color, #ef4444); }
+    .log-warning { color: var(--warning-color, #f59e0b); }
+    .log-info { color: var(--info-color, #3b82f6); }
+    .log-debug { color: var(--accent-color, #8b5cf6); }
+    .log-success { color: var(--success-color, #10b981); }
     
     /* Responsive */
     @media (max-width: 768px) {
@@ -466,7 +468,7 @@
                     <span class="stat-value">{% trans "Last 50 lines" %}</span>
                 </div>
                 <div ng-hide="logFileLoading" class="stat-item">
-                    <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                    <i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
                 <div ng-show="!logFileLoading" class="loading-spinner"></div>
diff --git a/serverLogs/templates/serverLogs/modSecAuditLog.html b/serverLogs/templates/serverLogs/modSecAuditLog.html
index 8298ce0ed..12cc694ba 100644
--- a/serverLogs/templates/serverLogs/modSecAuditLog.html
+++ b/serverLogs/templates/serverLogs/modSecAuditLog.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,40 +78,40 @@
     .log-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: #1e293b;
-        color: white;
+        background: var(--console-bg, #1e293b);
+        color: var(--text-primary, white);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border, #334155);
     }
     
     .panel-title {
@@ -120,18 +120,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--bg-hover, #334155);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .log-stats {
@@ -145,18 +145,18 @@
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--console-text, #e2e8f0);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -178,16 +178,18 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .search-icon {
@@ -195,12 +197,12 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
     
     .log-content {
-        background: #1e293b;
+        background: var(--console-bg, #1e293b);
         padding: 1.5rem;
         min-height: 600px;
         max-height: 700px;
@@ -211,7 +213,7 @@
     .log-textarea {
         width: 100%;
         background: transparent;
-        color: #f59e0b;
+        color: var(--warning-color, #f59e0b);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
@@ -222,7 +224,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-muted, #475569);
     }
     
     .log-line-numbers {
@@ -231,13 +233,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-muted, #475569);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border, #334155);
     }
     
     .log-content-wrapper {
@@ -245,9 +247,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +270,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color, #667eea);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover, #5a67d8);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-color, #ef4444);
+        color: var(--text-primary, white);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--text-muted, #64748b);
+        color: var(--text-primary, white);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--bg-hover, #475569);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +328,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -344,12 +346,12 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
     
@@ -357,12 +359,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +373,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border, #334155);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--text-muted, #64748b);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
-    .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-error { color: var(--danger-color, #ef4444); }
+    .log-warning { color: var(--warning-color, #f59e0b); }
+    .log-info { color: var(--info-color, #3b82f6); }
+    .log-debug { color: var(--accent-color, #8b5cf6); }
+    .log-success { color: var(--success-color, #10b981); }
     
     /* Responsive */
     @media (max-width: 768px) {
@@ -466,7 +468,7 @@
                     <span class="stat-value">{% trans "Last 50 lines" %}</span>
                 </div>
                 <div ng-hide="logFileLoading" class="stat-item">
-                    <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                    <i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
                 <div ng-show="!logFileLoading" class="loading-spinner"></div>
diff --git a/serverLogs/templates/serverLogs/serverMail.html b/serverLogs/templates/serverLogs/serverMail.html
index 5cdd2dc9b..ee4980cde 100644
--- a/serverLogs/templates/serverLogs/serverMail.html
+++ b/serverLogs/templates/serverLogs/serverMail.html
@@ -14,12 +14,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-primary, white);
     }
     
     .page-header::before {
@@ -78,18 +78,18 @@
     .mail-icon {
         width: 60px;
         height: 60px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
         max-width: 600px;
         margin: 0 auto;
     }
@@ -99,35 +99,35 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
         backdrop-filter: blur(10px);
         padding: 0.5rem 1.5rem;
         border-radius: 20px;
-        color: white;
+        color: var(--text-primary, white);
         text-decoration: none;
         font-size: 0.875rem;
         transition: all 0.3s ease;
     }
     
     .docs-link:hover {
-        background: rgba(255, 255, 255, 0.3);
+        background: var(--accent-hover, rgba(255, 255, 255, 0.3));
         transform: translateY(-2px);
-        color: white;
+        color: var(--text-primary, white);
         text-decoration: none;
     }
     
     .mail-config-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
+        color: var(--text-primary, white);
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
@@ -145,7 +145,7 @@
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: rgba(255,255,255,0.2);
+        background: var(--accent-bg, rgba(255,255,255,0.2));
         border-radius: 8px;
         display: flex;
         align-items: center;
@@ -166,26 +166,27 @@
     
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.875rem;
         text-align: right;
     }
     
     .form-control {
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
+        color: var(--text-primary, #1e293b);
         width: 100%;
         max-width: 400px;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
     
     .select-control {
@@ -198,19 +199,19 @@
     }
     
     .mailer-type-selector {
-        background: #f8f9ff;
+        background: var(--bg-light, #f8f9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .smtp-fields {
-        background: #fafbff;
+        background: var(--bg-light, #fafbff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         animation: fadeInUp 0.3s ease-out;
     }
     
@@ -220,24 +221,24 @@
         gap: 0.75rem;
         margin-bottom: 1.5rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
     }
     
     .section-icon {
         width: 32px;
         height: 32px;
-        background: #f3e8ff;
+        background: var(--accent-bg, #f3e8ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #667eea;
+        color: var(--accent-color, #667eea);
     }
     
     .section-title {
         font-size: 1rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .action-buttons {
@@ -245,7 +246,7 @@
         gap: 1rem;
         margin-top: 2rem;
         padding-top: 2rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
         justify-content: center;
     }
     
@@ -263,20 +264,20 @@
     }
     
     .btn-primary {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
+        color: var(--text-primary, white);
     }
     
     .btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -288,8 +289,8 @@
     }
     
     .info-box {
-        background: #eff6ff;
-        border: 1px solid #bfdbfe;
+        background: var(--info-bg, #eff6ff);
+        border: 1px solid var(--info-border, #bfdbfe);
         border-radius: 8px;
         padding: 1rem 1.5rem;
         margin-bottom: 1.5rem;
@@ -299,14 +300,14 @@
     }
     
     .info-icon {
-        color: #3b82f6;
+        color: var(--info-color, #3b82f6);
         font-size: 1.25rem;
         flex-shrink: 0;
     }
     
     .info-text {
         font-size: 0.875rem;
-        color: #1e40af;
+        color: var(--info-text, #1e40af);
         line-height: 1.6;
     }
     
@@ -318,15 +319,16 @@
         font-size: 0.875rem;
         padding: 0.375rem 0.75rem;
         border-radius: 20px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #f8f9ff);
+        border: 1px solid var(--border-light, #e8e9ff);
+        color: var(--text-primary, #1e293b);
     }
     
     .status-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background: #10b981;
+        background: var(--success-color, #10b981);
         animation: pulse 2s infinite;
     }
     
diff --git a/serverStatus/templates/serverStatus/Switchoffsecurity.html b/serverStatus/templates/serverStatus/Switchoffsecurity.html
index ef450b483..494d90109 100644
--- a/serverStatus/templates/serverStatus/Switchoffsecurity.html
+++ b/serverStatus/templates/serverStatus/Switchoffsecurity.html
@@ -9,6 +9,28 @@
 
 
     <style>
+        /* CSS Variables for Dark Mode Support */
+        :root {
+            /* Text colors */
+            --text-primary: #333333;
+            --text-secondary: #666666;
+            --text-muted: #999999;
+            
+            /* Background colors */
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8f9fa;
+            --bg-hover: #e9ecef;
+            --bg-light: lightblue;
+            
+            /* Border colors */
+            --border-color: #ccc;
+            --border-light: #dee2e6;
+            
+            /* Accent colors */
+            --accent-color: #007bff;
+            --accent-hover: #0056b3;
+        }
+        
         .tagcontainer {
             display: flex;
             justify-content: space-evenly;
@@ -19,7 +41,7 @@
             height: 300px;
             overflow-y: auto;
             margin-right: 10px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--border-color);
         }
 
         .tags-label {
@@ -37,7 +59,7 @@
         }
 
         .tags:hover {
-            background-color: lightblue;
+            background-color: var(--bg-light);
         }
 
         .tag-icon {
diff --git a/serverStatus/templates/serverStatus/changeCyberPanelPort.html b/serverStatus/templates/serverStatus/changeCyberPanelPort.html
index ff1b6c71c..457a12030 100644
--- a/serverStatus/templates/serverStatus/changeCyberPanelPort.html
+++ b/serverStatus/templates/serverStatus/changeCyberPanelPort.html
@@ -4,6 +4,40 @@
 
 {% block header_scripts %}
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* Text colors */
+        --text-primary: #2f3640;
+        --text-secondary: #64748b;
+        --text-muted: #8893a7;
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f0f0ff;
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        
+        /* Accent colors */
+        --accent-color: #5b5fcf;
+        --accent-hover: #4b4fbf;
+        --accent-focus: rgba(91,95,207,0.1);
+        --accent-shadow: rgba(91,95,207,0.3);
+        
+        /* Status colors */
+        --warning-bg: #fff3cd;
+        --warning-border: #ffeaa7;
+        --warning-color: #856404;
+        --warning-accent: #f39c12;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.08);
+        
+        /* Neutral colors */
+        --neutral-disabled: #94a3b8;
+    }
+    
     /* Angular cloak to prevent flashing */
     [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
         display: none !important;
@@ -48,14 +82,14 @@
         border-radius: 12px;
         padding: 30px;
         margin-bottom: 25px;
-        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-color);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 10px;
         display: flex;
         align-items: center;
@@ -68,13 +102,13 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color);
         border-radius: 2px;
     }
     
     .section-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         line-height: 1.6;
     }
@@ -92,7 +126,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 10px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -106,18 +140,18 @@
         width: 100%;
         padding: 12px 16px;
         font-size: 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-secondary);
+        color: var(--text-primary);
         transition: all 0.3s ease;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color);
         background: white;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        box-shadow: 0 0 0 3px var(--accent-focus);
     }
     
     .form-help {
@@ -131,7 +165,7 @@
     
     .form-help i {
         font-size: 13px;
-        color: #5b5fcf;
+        color: var(--accent-color);
     }
     
     .form-actions {
@@ -142,7 +176,7 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color);
         color: white;
         border: none;
         padding: 12px 30px;
@@ -159,13 +193,13 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 5px 15px rgba(91,95,207,0.3);
+        box-shadow: 0 5px 15px var(--accent-shadow);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
+        background: var(--neutral-disabled);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -176,7 +210,7 @@
         display: inline-block;
         width: 14px;
         height: 14px;
-        border: 2px solid #ffffff;
+        border: 2px solid var(--bg-primary);
         border-radius: 50%;
         border-top-color: transparent;
         animation: spin 0.8s linear infinite;
@@ -188,8 +222,8 @@
     
     /* Info Box */
     .info-box {
-        background: #f0f0ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light);
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 25px;
@@ -198,7 +232,7 @@
     .info-box-title {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 8px;
         display: flex;
         align-items: center;
@@ -206,25 +240,25 @@
     }
     
     .info-box-title i {
-        color: #5b5fcf;
+        color: var(--accent-color);
         font-size: 16px;
     }
     
     .info-box-content {
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-secondary);
         line-height: 1.6;
     }
     
     .info-box-content strong {
-        color: #2f3640;
+        color: var(--text-primary);
         font-weight: 600;
     }
     
     /* Warning Box */
     .warning-box {
-        background: #fff3cd;
-        border: 1px solid #ffeaa7;
+        background: var(--warning-bg);
+        border: 1px solid var(--warning-border);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 25px;
@@ -233,7 +267,7 @@
     .warning-box-title {
         font-size: 13px;
         font-weight: 600;
-        color: #856404;
+        color: var(--warning-color);
         margin-bottom: 8px;
         display: flex;
         align-items: center;
@@ -241,13 +275,13 @@
     }
     
     .warning-box-title i {
-        color: #f39c12;
+        color: var(--warning-accent);
         font-size: 16px;
     }
     
     .warning-box-content {
         font-size: 13px;
-        color: #856404;
+        color: var(--warning-color);
         line-height: 1.6;
     }
     
@@ -329,7 +363,7 @@
     .toggle-label span {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary);
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
@@ -345,7 +379,7 @@
     
     .toggle-help i {
         font-size: 13px;
-        color: #5b5fcf;
+        color: var(--accent-color);
     }
     
     /* Responsive */
diff --git a/serverStatus/templates/serverStatus/cybercpmainlogfile.html b/serverStatus/templates/serverStatus/cybercpmainlogfile.html
index 708e39391..37e4d02c4 100644
--- a/serverStatus/templates/serverStatus/cybercpmainlogfile.html
+++ b/serverStatus/templates/serverStatus/cybercpmainlogfile.html
@@ -4,6 +4,72 @@
 
 {% block header_scripts %}
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* Text colors */
+        --text-primary: #1e293b;
+        --text-secondary: #475569;
+        --text-muted: #64748b;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        --text-terminal: #e2e8f0;
+        --text-console: #10b981;
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f3f4f6;
+        --bg-hover: #f8f9ff;
+        --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        --border-light: #f1f5f9;
+        --border-terminal: #334155;
+        
+        /* Accent colors */
+        --accent-color: #667eea;
+        --accent-hover: #5a67d8;
+        --accent-bg: #f3e8ff;
+        --accent-focus: rgba(102, 126, 234, 0.1);
+        --accent-shadow: rgba(102, 126, 234, 0.3);
+        
+        /* Status colors */
+        --success-bg: #d1fae5;
+        --success-color: #065f46;
+        --success-border: #a7f3d0;
+        --success-accent: #10b981;
+        
+        --danger-bg: #fee2e2;
+        --danger-color: #991b1b;
+        --danger-border: #fecaca;
+        --danger-accent: #ef4444;
+        --danger-hover: #dc2626;
+        
+        --warning-bg: #fef3c7;
+        --warning-color: #92400e;
+        --warning-border: #fde68a;
+        
+        --info-bg: #dbeafe;
+        --info-color: #1e40af;
+        --info-border: #bfdbfe;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.05);
+        --shadow-medium: rgba(0,0,0,0.08);
+        --shadow-color: rgba(0,0,0,0.1);
+        
+        /* Console/Terminal colors */
+        --console-bg: #1e293b;
+        --console-text: #10b981;
+        --console-border: #334155;
+        --console-scrollbar: #64748b;
+        --console-scrollbar-hover: #94a3b8;
+        
+        /* Neutral colors */
+        --neutral-bg: #64748b;
+        --neutral-hover: #475569;
+        --neutral-shadow: rgba(100, 116, 139, 0.3);
+    }
     .modern-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -14,12 +80,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--bg-primary);
     }
     
     .page-header::before {
@@ -89,29 +155,29 @@
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-on-gradient);
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
     
     .log-viewer-panel {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
         background: #1e293b;
-        color: white;
+        color: var(--bg-primary);
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--console-border);
     }
     
     .panel-title {
@@ -120,18 +186,18 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        color: #e2e8f0;
+        color: var(--text-terminal);
     }
     
     .panel-icon {
         width: 32px;
         height: 32px;
-        background: #334155;
+        background: var(--console-border);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #64748b;
+        color: var(--text-muted);
     }
     
     .log-stats {
@@ -149,12 +215,12 @@
     }
     
     .stat-value {
-        color: #e2e8f0;
+        color: var(--text-terminal);
         font-weight: 600;
     }
     
     .log-controls {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         padding: 1rem 1.5rem;
         border-bottom: 1px solid #e8e9ff;
         display: flex;
@@ -178,7 +244,7 @@
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
@@ -222,7 +288,7 @@
     }
     
     .log-textarea::placeholder {
-        color: #475569;
+        color: var(--text-secondary);
     }
     
     .log-line-numbers {
@@ -231,13 +297,13 @@
         top: 1.5rem;
         width: 50px;
         text-align: right;
-        color: #475569;
+        color: var(--text-secondary);
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 1.125rem;
         line-height: 1.6;
         user-select: none;
         padding-right: 1rem;
-        border-right: 1px solid #334155;
+        border-right: 1px solid var(--console-border);
     }
     
     .log-content-wrapper {
@@ -245,9 +311,9 @@
     }
     
     .action-bar {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         padding: 1.5rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -268,43 +334,43 @@
     }
     
     .btn-primary {
-        background: #667eea;
-        color: white;
+        background: var(--accent-color);
+        color: var(--bg-primary);
     }
     
     .btn-primary:hover {
-        background: #5a67d8;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 4px 12px var(--accent-shadow);
     }
     
     .btn-danger {
-        background: #ef4444;
-        color: white;
+        background: var(--danger-accent);
+        color: var(--bg-primary);
     }
     
     .btn-danger:hover {
-        background: #dc2626;
+        background: var(--danger-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
     }
     
     .btn-secondary {
-        background: #64748b;
-        color: white;
+        background: var(--neutral-bg);
+        color: var(--bg-primary);
     }
     
     .btn-secondary:hover {
-        background: #475569;
+        background: var(--neutral-hover);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+        box-shadow: 0 4px 12px var(--neutral-shadow);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border-top: 2px solid var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -326,15 +392,15 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg);
+        color: var(--success-color);
+        border: 1px solid var(--success-border);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg);
+        color: var(--danger-color);
+        border: 1px solid var(--danger-border);
     }
     
     .alert-icon {
@@ -344,7 +410,7 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted);
     }
     
     .empty-icon {
@@ -357,12 +423,12 @@
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary);
     }
     
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted);
     }
     
     /* Custom Scrollbar */
@@ -371,25 +437,25 @@
     }
     
     .log-content::-webkit-scrollbar-track {
-        background: #334155;
+        background: var(--console-border);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb {
-        background: #64748b;
+        background: var(--neutral-bg);
         border-radius: 4px;
     }
     
     .log-content::-webkit-scrollbar-thumb:hover {
-        background: #94a3b8;
+        background: var(--console-scrollbar-hover);
     }
     
     /* Log Level Colors */
-    .log-error { color: #ef4444; }
-    .log-warning { color: #f59e0b; }
-    .log-info { color: #3b82f6; }
+    .log-error { color: var(--danger-accent); }
+    .log-warning { color: var(--warning-color); }
+    .log-info { color: var(--info-color); }
     .log-debug { color: #8b5cf6; }
-    .log-success { color: #10b981; }
+    .log-success { color: var(--success-accent); }
     
     /* Responsive */
     @media (max-width: 768px) {
diff --git a/serverStatus/templates/serverStatus/litespeedStatus.html b/serverStatus/templates/serverStatus/litespeedStatus.html
index 6c53fcf14..29a0be212 100644
--- a/serverStatus/templates/serverStatus/litespeedStatus.html
+++ b/serverStatus/templates/serverStatus/litespeedStatus.html
@@ -8,6 +8,66 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* LiteSpeed-specific gradient colors */
+        --ls-gradient-start: #667eea;
+        --ls-gradient-end: #764ba2;
+        
+        /* Text colors */
+        --text-primary: #1e293b;
+        --text-secondary: #475569;
+        --text-muted: #64748b;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f3f4f6;
+        --bg-hover: #f8f9ff;
+        --bg-gradient: linear-gradient(135deg, var(--ls-gradient-start) 0%, var(--ls-gradient-end) 100%);
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        --border-light: #f1f5f9;
+        
+        /* Accent colors */
+        --accent-color: #667eea;
+        --accent-hover: #764ba2;
+        --accent-bg: #f3e8ff;
+        --accent-focus: rgba(102, 126, 234, 0.1);
+        --accent-shadow: rgba(102, 126, 234, 0.3);
+        
+        /* Status colors */
+        --success-bg: #d1fae5;
+        --success-color: #065f46;
+        --success-border: #a7f3d0;
+        --success-accent: #4ade80;
+        --success-dark: #10b981;
+        
+        --danger-bg: #fee2e2;
+        --danger-color: #991b1b;
+        --danger-border: #fecaca;
+        --danger-accent: #dc2626;
+        --danger-hover: #b91c1c;
+        
+        --warning-bg: #fef3c7;
+        --warning-color: #92400e;
+        --warning-border: #fde68a;
+        
+        --info-bg: #dbeafe;
+        --info-color: #1e40af;
+        --info-border: #bfdbfe;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.05);
+        --shadow-medium: rgba(0,0,0,0.08);
+        --shadow-color: rgba(0,0,0,0.1);
+        
+        /* Console colors */
+        --console-bg: #1e293b;
+        --console-text: #10b981;
+    }
     .modern-container {
         max-width: 1200px;
         margin: 0 auto;
@@ -18,12 +78,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--bg-primary);
     }
     
     .page-header::before {
@@ -66,7 +126,7 @@
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-on-gradient);
         max-width: 600px;
         margin: 0 auto;
     }
@@ -86,7 +146,7 @@
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background: #4ade80;
+        background: var(--success-accent);
         animation: pulse 2s infinite;
     }
     
@@ -98,10 +158,10 @@
     }
     
     .info-card {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         transition: all 0.3s ease;
         animation: fadeInUp 0.5s ease-out;
@@ -109,12 +169,12 @@
     
     .info-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px var(--shadow-light), 0 20px 60px var(--shadow-color);
     }
     
     .card-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: var(--bg-gradient);
+        color: var(--bg-primary);
         padding: 1.5rem;
         display: flex;
         align-items: center;
@@ -152,24 +212,24 @@
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #475569;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color);
     }
     
     .process-table td {
         padding: 1rem;
         font-size: 0.875rem;
-        color: #1e293b;
-        border-bottom: 1px solid #f1f5f9;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-light);
     }
     
     .process-id {
         font-family: 'Monaco', 'Consolas', monospace;
         font-weight: 600;
-        color: #667eea;
+        color: var(--accent-color);
     }
     
     .process-badge {
@@ -181,18 +241,18 @@
     }
     
     .badge-main {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-color);
     }
     
     .badge-worker {
-        background: #dbeafe;
-        color: #1e40af;
+        background: var(--info-bg);
+        color: var(--info-color);
     }
     
     .badge-lscgid {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg);
+        color: var(--warning-color);
     }
     
     .action-buttons {
@@ -220,18 +280,18 @@
     }
     
     .btn-primary:hover {
-        background: #764ba2;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 4px 12px var(--accent-shadow);
     }
     
     .btn-danger {
-        background: #dc2626;
+        background: var(--danger-accent);
         color: white;
     }
     
     .btn-danger:hover {
-        background: #b91c1c;
+        background: var(--danger-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
     }
@@ -243,7 +303,7 @@
     }
     
     .version-info {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 1rem;
@@ -252,7 +312,7 @@
     .version-header {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -266,19 +326,19 @@
     }
     
     .module-item {
-        background: white;
+        background: var(--bg-primary);
         padding: 0.5rem 1rem;
         border-radius: 6px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         font-size: 0.875rem;
-        color: #475569;
+        color: var(--text-secondary);
         transition: all 0.2s ease;
     }
     
     .module-item:hover {
         background: #667eea;
         color: white;
-        border-color: #667eea;
+        border-color: var(--accent-color);
     }
     
     .alert {
@@ -307,38 +367,38 @@
     
     .alert-message {
         font-size: 0.875rem;
-        color: #475569;
+        color: var(--text-secondary);
     }
     
     .alert-success {
-        background: #d1fae5;
-        border: 1px solid #a7f3d0;
-        color: #065f46;
+        background: var(--success-bg);
+        border: 1px solid var(--success-border);
+        color: var(--success-color);
     }
     
     .alert-error {
-        background: #fee2e2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg);
+        border: 1px solid var(--danger-border);
+        color: var(--danger-color);
     }
     
     .alert-warning {
-        background: #fef3c7;
-        border: 1px solid #fde68a;
-        color: #92400e;
+        background: var(--warning-bg);
+        border: 1px solid var(--warning-border);
+        color: var(--warning-color);
     }
     
     .alert-info {
-        background: #dbeafe;
-        border: 1px solid #bfdbfe;
-        color: #1e40af;
+        background: var(--info-bg);
+        border: 1px solid var(--info-border);
+        color: var(--info-color);
     }
     
     .license-panel {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out 0.2s;
         animation-fill-mode: both;
@@ -361,26 +421,26 @@
     }
     
     .license-option:hover {
-        border-color: #667eea;
-        background: #f3e8ff;
+        border-color: var(--accent-color);
+        background: var(--accent-bg);
     }
     
     .license-icon {
         width: 60px;
         height: 60px;
-        background: #f3e8ff;
+        background: var(--accent-bg);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1rem;
-        color: #667eea;
+        color: var(--accent-color);
         font-size: 1.5rem;
     }
     
     .license-label {
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
     }
     
     .form-group {
@@ -390,7 +450,7 @@
     .form-label {
         display: block;
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         margin-bottom: 0.5rem;
     }
@@ -398,24 +458,24 @@
     .form-control {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-primary);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 3px var(--accent-focus);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border-top: 2px solid var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -423,8 +483,8 @@
     }
     
     .console-output {
-        background: #1e293b;
-        color: #10b981;
+        background: var(--console-bg);
+        color: var(--console-text);
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
         padding: 1.5rem;
@@ -643,7 +703,7 @@
                     </div>
                 </div>
                 
-                <h4 style="font-size: 0.875rem; font-weight: 600; color: #475569; margin: 1.5rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.05em;">
+                <h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin: 1.5rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.05em;">
                     {{ modules }}
                 </h4>
                 <div class="module-list">
@@ -779,7 +839,7 @@
                     <div class="alert alert-warning">
                         <i class="fas fa-exclamation-triangle alert-icon"></i>
                         <div class="alert-content">
-                            <div class="alert-title" style="color: #dc2626;">{% trans "Important Warning" %}</div>
+                            <div class="alert-title" style="color: var(--danger-accent);">{% trans "Important Warning" %}</div>
                             <div class="alert-message">
                                 {% trans "You cannot revert back to OpenLiteSpeed if you choose not to purchase a LiteSpeed Enterprise license after the 15 day trial period. We recommend you test the Enterprise trial on a separate server." %}
                             </div>
diff --git a/serverStatus/templates/serverStatus/packageManager.html b/serverStatus/templates/serverStatus/packageManager.html
index 13b58fe01..c666350a8 100644
--- a/serverStatus/templates/serverStatus/packageManager.html
+++ b/serverStatus/templates/serverStatus/packageManager.html
@@ -8,6 +8,62 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* Text colors */
+        --text-primary: #1e293b;
+        --text-secondary: #475569;
+        --text-muted: #64748b;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f3f4f6;
+        --bg-hover: #f8f9ff;
+        --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        --border-light: #f1f5f9;
+        
+        /* Accent colors */
+        --accent-color: #667eea;
+        --accent-hover: #764ba2;
+        --accent-bg: #f3e8ff;
+        --accent-focus: rgba(102, 126, 234, 0.1);
+        --accent-shadow: rgba(102, 126, 234, 0.3);
+        
+        /* Status colors */
+        --success-bg: #d1fae5;
+        --success-color: #065f46;
+        --success-border: #a7f3d0;
+        --success-accent: #10b981;
+        --success-hover: #059669;
+        
+        --danger-bg: #fee2e2;
+        --danger-color: #991b1b;
+        --danger-border: #fecaca;
+        --danger-accent: #dc2626;
+        --danger-hover: #b91c1c;
+        
+        --warning-bg: #fef3c7;
+        --warning-color: #92400e;
+        --warning-border: #fde68a;
+        
+        --info-bg: #dbeafe;
+        --info-color: #1e40af;
+        --info-border: #bfdbfe;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.05);
+        --shadow-medium: rgba(0,0,0,0.08);
+        --shadow-color: rgba(0,0,0,0.1);
+        
+        /* Console colors */
+        --console-bg: #1e293b;
+        --console-text: #10b981;
+    }
     .modern-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -18,12 +74,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--bg-primary);
     }
     
     .page-header::before {
@@ -66,7 +122,7 @@
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-on-gradient);
         max-width: 600px;
         margin: 0 auto;
     }
@@ -95,18 +151,18 @@
     }
     
     .tabs-container {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .modern-tabs {
         display: flex;
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border-color);
         overflow-x: auto;
     }
     
@@ -116,7 +172,7 @@
         border: none;
         background: none;
         font-weight: 500;
-        color: #64748b;
+        color: var(--text-muted);
         position: relative;
         white-space: nowrap;
         transition: all 0.3s ease;
@@ -126,13 +182,13 @@
     }
     
     .tab-item:hover {
-        color: #667eea;
+        color: var(--accent-color);
         background: rgba(102, 126, 234, 0.05);
     }
     
     .tab-item.active {
-        color: #667eea;
-        background: white;
+        color: var(--accent-color);
+        background: var(--bg-primary);
     }
     
     .tab-item.active::after {
@@ -142,7 +198,7 @@
         left: 0;
         right: 0;
         height: 3px;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
     }
     
     .tab-icon {
@@ -171,7 +227,7 @@
     .search-input {
         width: 100%;
         padding: 0.75rem 1rem 0.75rem 2.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
@@ -179,8 +235,8 @@
     
     .search-input:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 3px var(--accent-focus);
     }
     
     .search-icon {
@@ -188,7 +244,7 @@
         left: 0.75rem;
         top: 50%;
         transform: translateY(-50%);
-        color: #94a3b8;
+        color: var(--text-muted);
     }
     
     .control-group {
@@ -199,10 +255,10 @@
     
     .select-control {
         padding: 0.75rem 2.5rem 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         font-size: 0.875rem;
-        background: white;
+        background: var(--bg-primary);
         appearance: none;
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
         background-position: right 0.5rem center;
@@ -230,24 +286,24 @@
     }
     
     .btn-primary:hover {
-        background: #764ba2;
+        background: var(--accent-hover);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 4px 12px var(--accent-shadow);
     }
     
     .btn-success {
-        background: #10b981;
+        background: var(--success-accent);
         color: white;
     }
     
     .btn-success:hover {
-        background: #059669;
+        background: var(--success-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
     }
     
     .btn-info {
-        background: #3b82f6;
+        background: var(--info-color);
         color: white;
     }
     
@@ -258,24 +314,24 @@
     }
     
     .btn-secondary {
-        background: white;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary);
+        color: var(--text-muted);
+        border: 1px solid var(--border-color);
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         border-color: #cbd5e1;
     }
     
     .package-table {
         width: 100%;
         border-collapse: collapse;
-        background: white;
+        background: var(--bg-primary);
     }
     
     .package-table thead {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         position: sticky;
         top: 0;
         z-index: 10;
@@ -285,18 +341,18 @@
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #475569;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color);
     }
     
     .package-table td {
         padding: 1rem;
         font-size: 0.875rem;
-        color: #1e293b;
-        border-bottom: 1px solid #f1f5f9;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-light);
     }
     
     .package-table tbody tr {
@@ -304,12 +360,12 @@
     }
     
     .package-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
     }
     
     .package-name {
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary);
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -320,7 +376,7 @@
         padding: 0.125rem 0.5rem;
         border-radius: 4px;
         background: #f3e8ff;
-        color: #667eea;
+        color: var(--accent-color);
         font-weight: 500;
     }
     
@@ -334,8 +390,8 @@
     }
     
     .upgrade-badge {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-color);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -400,7 +456,7 @@
     
     .pagination-info {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted);
     }
     
     .pagination-controls {
@@ -411,7 +467,7 @@
     
     .page-select {
         padding: 0.5rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color);
         border-radius: 6px;
         font-size: 0.875rem;
     }
@@ -432,7 +488,7 @@
     }
     
     .modal-content {
-        background: white;
+        background: var(--bg-primary);
         border-radius: 16px;
         max-width: 800px;
         width: 90%;
@@ -443,8 +499,8 @@
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: var(--bg-gradient);
+        color: var(--bg-primary);
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
@@ -499,8 +555,8 @@
     }
     
     .detail-output {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
         border-radius: 8px;
         padding: 1.5rem;
         font-family: 'Monaco', 'Consolas', monospace;
@@ -513,7 +569,7 @@
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted);
     }
     
     .empty-icon {
@@ -526,7 +582,7 @@
         justify-content: center;
         margin: 0 auto 1rem;
         font-size: 2rem;
-        color: #94a3b8;
+        color: var(--text-muted);
     }
     
     .alert {
@@ -541,8 +597,8 @@
     
     .alert-info {
         background: #dbeafe;
-        border: 1px solid #bfdbfe;
-        color: #1e40af;
+        border: 1px solid var(--info-border);
+        color: var(--info-color);
     }
     
     @keyframes spin {
diff --git a/serverStatus/templates/serverStatus/services.html b/serverStatus/templates/serverStatus/services.html
index 0dd0809b4..2e141e42e 100644
--- a/serverStatus/templates/serverStatus/services.html
+++ b/serverStatus/templates/serverStatus/services.html
@@ -4,6 +4,61 @@
 
 {% block header_scripts %}
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* Text colors */
+        --text-primary: #2f3640;
+        --text-secondary: #64748b;
+        --text-muted: #8893a7;
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f3f4f6;
+        --bg-hover: #f8f9ff;
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        --border-light: #f1f5f9;
+        
+        /* Accent colors */
+        --accent-color: #5856d6;
+        --accent-hover: #4b4fbf;
+        --accent-bg: #f3e8ff;
+        --accent-focus: rgba(88, 86, 214, 0.1);
+        --accent-shadow: rgba(88, 86, 214, 0.3);
+        
+        /* Status colors */
+        --success-bg: #d1fae5;
+        --success-color: #065f46;
+        --success-border: #a7f3d0;
+        --success-accent: #10b981;
+        --success-hover: #059669;
+        
+        --danger-bg: #fee2e2;
+        --danger-color: #991b1b;
+        --danger-border: #fecaca;
+        --danger-accent: #ef4444;
+        
+        --warning-bg: #fef3c7;
+        --warning-color: #92400e;
+        --warning-accent: #f59e0b;
+        --warning-hover: #d97706;
+        
+        --info-bg: #dbeafe;
+        --info-color: #1e40af;
+        --info-border: #bfdbfe;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.08);
+        --shadow-medium: rgba(0,0,0,0.1);
+        
+        /* Neutral colors */
+        --neutral-bg: #6b7280;
+        --neutral-hover: #4b5563;
+        --neutral-shadow: rgba(107, 114, 128, 0.3);
+    }
+    
     /* Services Status Specific Styles */
     .services-wrapper {
         background: transparent;
@@ -17,18 +72,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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-color);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -45,7 +100,7 @@
         justify-content: center;
         color: white;
         font-size: 24px;
-        box-shadow: 0 4px 12px rgba(88,86,214,0.3);
+        box-shadow: 0 4px 12px var(--accent-shadow);
     }
     
     .page-header p {
@@ -56,18 +111,18 @@
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        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-color);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -90,8 +145,8 @@
     }
     
     .service-card {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary);
+        border: 1px solid var(--border-color);
         border-radius: 12px;
         padding: 25px;
         transition: all 0.3s ease;
@@ -101,16 +156,16 @@
     
     .service-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
-        border-color: #5856d6;
+        box-shadow: 0 8px 24px var(--shadow-medium);
+        border-color: var(--accent-color);
     }
     
     .service-card.running {
-        border-top: 4px solid #10b981;
+        border-top: 4px solid var(--success-accent);
     }
     
     .service-card.stopped {
-        border-top: 4px solid #ef4444;
+        border-top: 4px solid var(--danger-accent);
     }
     
     .service-icon {
@@ -139,7 +194,7 @@
     .service-name {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary);
         margin-bottom: 8px;
     }
     
@@ -154,22 +209,22 @@
     }
     
     .service-status.running {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-color);
     }
     
     .service-status.running i {
-        color: #10b981;
+        color: var(--success-accent);
         animation: pulse 2s infinite;
     }
     
     .service-status.stopped {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--danger-bg);
+        color: var(--danger-color);
     }
     
     .service-status.stopped i {
-        color: #ef4444;
+        color: var(--danger-accent);
     }
     
     @keyframes pulse {
@@ -191,7 +246,7 @@
     }
     
     .service-stats strong {
-        color: #5856d6;
+        color: var(--accent-color);
         font-weight: 600;
     }
     
@@ -220,36 +275,36 @@
     }
     
     .action-btn.start {
-        background: #10b981;
+        background: var(--success-accent);
         color: white;
     }
     
     .action-btn.start:hover:not(:disabled) {
-        background: #059669;
+        background: var(--success-hover);
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(16,185,129,0.3);
     }
     
     .action-btn.stop {
-        background: #f59e0b;
+        background: var(--warning-accent);
         color: white;
     }
     
     .action-btn.stop:hover:not(:disabled) {
-        background: #d97706;
+        background: var(--warning-hover);
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(245,158,11,0.3);
     }
     
     .action-btn.restart {
-        background: #6b7280;
+        background: var(--neutral-bg);
         color: white;
     }
     
     .action-btn.restart:hover:not(:disabled) {
-        background: #4b5563;
+        background: var(--neutral-hover);
         transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(107,114,128,0.3);
+        box-shadow: 0 4px 12px var(--neutral-shadow);
     }
     
     /* Alert Messages */
@@ -273,31 +328,31 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg);
+        color: var(--success-color);
+        border: 1px solid var(--success-border);
     }
     
     .alert-success .alert-icon {
-        color: #10b981;
+        color: var(--success-accent);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg);
+        color: var(--danger-color);
+        border: 1px solid var(--danger-border);
     }
     
     .alert-danger .alert-icon {
-        color: #ef4444;
+        color: var(--danger-accent);
     }
     
     /* Loading Spinner */
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
-        border-top-color: #5856d6;
+        border: 3px solid var(--border-color);
+        border-top-color: var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -335,7 +390,7 @@
     .overview-value {
         font-size: 24px;
         font-weight: 700;
-        color: #5856d6;
+        color: var(--accent-color);
     }
     
     /* Responsive */
diff --git a/serverStatus/templates/serverStatus/topProcesses.html b/serverStatus/templates/serverStatus/topProcesses.html
index 873dcc5ff..d10890e67 100644
--- a/serverStatus/templates/serverStatus/topProcesses.html
+++ b/serverStatus/templates/serverStatus/topProcesses.html
@@ -8,6 +8,62 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
+    /* CSS Variables for Dark Mode Support */
+    :root {
+        /* Text colors */
+        --text-primary: #1e293b;
+        --text-secondary: #475569;
+        --text-muted: #64748b;
+        --text-on-gradient: rgba(255, 255, 255, 0.9);
+        
+        /* Background colors */
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9ff;
+        --bg-light: #f3f4f6;
+        --bg-hover: #f8f9ff;
+        --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        
+        /* Border colors */
+        --border-color: #e8e9ff;
+        --border-light: #f1f5f9;
+        
+        /* Accent colors */
+        --accent-color: #667eea;
+        --accent-hover: #764ba2;
+        --accent-bg: #f3e8ff;
+        --accent-focus: rgba(102, 126, 234, 0.1);
+        --accent-shadow: rgba(102, 126, 234, 0.3);
+        
+        /* Status colors */
+        --success-bg: #d1fae5;
+        --success-color: #065f46;
+        --success-border: #a7f3d0;
+        --success-accent: #4ade80;
+        --success-dark: #10b981;
+        
+        --danger-bg: #fee2e2;
+        --danger-color: #991b1b;
+        --danger-border: #fecaca;
+        --danger-accent: #dc2626;
+        --danger-hover: #b91c1c;
+        
+        --warning-bg: #fef3c7;
+        --warning-color: #92400e;
+        --warning-border: #fde68a;
+        
+        --info-bg: #dbeafe;
+        --info-color: #1e40af;
+        --info-border: #bfdbfe;
+        
+        /* Shadow colors */
+        --shadow-light: rgba(0,0,0,0.05);
+        --shadow-medium: rgba(0,0,0,0.08);
+        --shadow-color: rgba(0,0,0,0.1);
+        
+        /* Console colors */
+        --console-bg: #1e293b;
+        --console-text: #10b981;
+    }
     .modern-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -18,12 +74,12 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--bg-primary);
     }
     
     .page-header::before {
@@ -66,7 +122,7 @@
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-on-gradient);
         max-width: 600px;
         margin: 0 auto;
     }
@@ -85,7 +141,7 @@
     .refresh-dot {
         width: 8px;
         height: 8px;
-        background: #4ade80;
+        background: var(--success-accent);
         border-radius: 50%;
         animation: pulse 1.5s infinite;
     }
@@ -98,10 +154,10 @@
     }
     
     .stat-card {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         padding: 1.5rem;
         transition: all 0.3s ease;
         animation: fadeInUp 0.5s ease-out;
@@ -111,7 +167,7 @@
     
     .stat-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px var(--shadow-light), 0 20px 60px var(--shadow-color);
     }
     
     .stat-card::before {
@@ -121,7 +177,7 @@
         left: 0;
         right: 0;
         height: 4px;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
     }
     
     .stat-header {
@@ -133,7 +189,7 @@
     
     .stat-title {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted);
         font-weight: 500;
         display: flex;
         align-items: center;
@@ -143,12 +199,12 @@
     .stat-icon {
         width: 32px;
         height: 32px;
-        background: #f3e8ff;
+        background: var(--accent-bg);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #667eea;
+        color: var(--accent-color);
         font-size: 1rem;
     }
     
@@ -167,7 +223,7 @@
     .stat-value {
         font-size: 1.25rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary);
     }
     
     .stat-label {
@@ -176,18 +232,18 @@
     }
     
     .processes-panel {
-        background: white;
+        background: var(--bg-primary);
         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-light), 0 10px 40px var(--shadow-medium);
+        border: 1px solid var(--border-color);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out 0.2s;
         animation-fill-mode: both;
     }
     
     .panel-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        background: var(--bg-gradient);
+        color: var(--bg-primary);
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
@@ -250,7 +306,7 @@
     .modern-table thead {
         position: sticky;
         top: 0;
-        background: #f8f9ff;
+        background: var(--bg-hover);
         z-index: 10;
     }
     
@@ -258,18 +314,18 @@
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #475569;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color);
     }
     
     .modern-table td {
         padding: 1rem;
         font-size: 0.875rem;
-        color: #1e293b;
-        border-bottom: 1px solid #f1f5f9;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-light);
     }
     
     .modern-table tbody tr {
@@ -277,7 +333,7 @@
     }
     
     .modern-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover);
     }
     
     .process-user {
@@ -289,14 +345,14 @@
     .user-avatar {
         width: 28px;
         height: 28px;
-        background: #e8e9ff;
+        background: var(--border-color);
         border-radius: 6px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.75rem;
         font-weight: 600;
-        color: #667eea;
+        color: var(--accent-color);
     }
     
     .process-state {
@@ -308,23 +364,23 @@
     }
     
     .state-running {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-color);
     }
     
     .state-sleeping {
-        background: #dbeafe;
-        color: #1e40af;
+        background: var(--info-bg);
+        color: var(--info-color);
     }
     
     .state-stopped {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg);
+        color: var(--warning-color);
     }
     
     .state-zombie {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--danger-bg);
+        color: var(--danger-color);
     }
     
     .cpu-usage {
@@ -336,7 +392,7 @@
     .usage-bar {
         width: 60px;
         height: 6px;
-        background: #e5e7eb;
+        background: var(--bg-light);
         border-radius: 3px;
         overflow: hidden;
         position: relative;
@@ -344,7 +400,7 @@
     
     .usage-fill {
         height: 100%;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        background: var(--bg-gradient);
         transition: width 0.3s ease;
     }
     
@@ -363,7 +419,7 @@
     .kill-button {
         padding: 0.5rem 1rem;
         border-radius: 6px;
-        background: #dc2626;
+        background: var(--danger-accent);
         color: white;
         border: none;
         font-size: 0.75rem;
@@ -376,7 +432,7 @@
     }
     
     .kill-button:hover {
-        background: #b91c1c;
+        background: var(--danger-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
     }
@@ -398,7 +454,7 @@
         width: 40px;
         height: 40px;
         border: 3px solid #f3f3f3;
-        border-top: 3px solid #667eea;
+        border-top: 3px solid var(--accent-color);
         border-radius: 50%;
         animation: spin 1s linear infinite;
     }
@@ -414,18 +470,18 @@
     }
     
     .metric-high {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--danger-bg);
+        color: var(--danger-color);
     }
     
     .metric-medium {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg);
+        color: var(--warning-color);
     }
     
     .metric-low {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg);
+        color: var(--success-color);
     }
     
     @keyframes spin {
@@ -537,7 +593,7 @@
                 </div>
             </div>
             <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8e9ff;">
-                <div style="font-size: 0.75rem; color: #64748b;">
+                <div style="font-size: 0.75rem; color: var(--text-muted);">
                     <strong>{% trans "Model:" %}</strong> {$ modelName || '-' $}<br>
                     <strong>{% trans "Cache:" %}</strong> {$ cacheSize || '-' $}
                 </div>
@@ -560,15 +616,15 @@
                     <span class="stat-label">{% trans "Total" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #10b981;">{$ runningProcesses || '0' $}</span>
+                    <span class="stat-value" style="color: var(--success-dark);">{$ runningProcesses || '0' $}</span>
                     <span class="stat-label">{% trans "Running" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #3b82f6;">{$ sleepingProcesses || '0' $}</span>
+                    <span class="stat-value" style="color: var(--info-color);">{$ sleepingProcesses || '0' $}</span>
                     <span class="stat-label">{% trans "Sleeping" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #ef4444;">
+                    <span class="stat-value" style="color: var(--danger-accent);">
                         <span ng-if="zombieProcesses > 0">{$ zombieProcesses $}</span>
                         <span ng-if="!zombieProcesses || zombieProcesses == 0">0</span>
                     </span>
@@ -623,11 +679,11 @@
                     <span class="stat-label">{% trans "Total" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #10b981;">{$ freeMemory || '-' $}</span>
+                    <span class="stat-value" style="color: var(--success-dark);">{$ freeMemory || '-' $}</span>
                     <span class="stat-label">{% trans "Free" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #ef4444;">{$ usedMemory || '-' $}</span>
+                    <span class="stat-value" style="color: var(--danger-accent);">{$ usedMemory || '-' $}</span>
                     <span class="stat-label">{% trans "Used" %}</span>
                 </div>
                 <div class="stat-item">
@@ -653,11 +709,11 @@
                     <span class="stat-label">{% trans "Total" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #10b981;">{$ swapFreeMemory || '-' $}</span>
+                    <span class="stat-value" style="color: var(--success-dark);">{$ swapFreeMemory || '-' $}</span>
                     <span class="stat-label">{% trans "Free" %}</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-value" style="color: #ef4444;">{$ swapUsedMemory || '-' $}</span>
+                    <span class="stat-value" style="color: var(--danger-accent);">{$ swapUsedMemory || '-' $}</span>
                     <span class="stat-label">{% trans "Used" %}</span>
                 </div>
                 <div class="stat-item">
@@ -730,7 +786,7 @@
                 <tbody>
                     <tr ng-repeat="process in processes | filter:search">
                         <td>
-                            <span style="font-weight: 600; color: #667eea;">{$ process.PID $}</span>
+                            <span style="font-weight: 600; color: var(--accent-color);">{$ process.PID $}</span>
                         </td>
                         <td>
                             <div class="process-user">
diff --git a/tuning/templates/tuning/liteSpeedTuning.html b/tuning/templates/tuning/liteSpeedTuning.html
index 3b8ae8a7e..d8b3fd805 100644
--- a/tuning/templates/tuning/liteSpeedTuning.html
+++ b/tuning/templates/tuning/liteSpeedTuning.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,7 +32,7 @@
         right: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
+        background: radial-gradient(circle at 70% 30%, var(--accent-bg, rgba(91, 95, 207, 0.1)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
@@ -44,7 +44,7 @@
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -55,34 +55,34 @@
     .server-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-light, white);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         max-width: 600px;
         margin: 0 auto;
     }
     
     .tuning-panel {
-        background: white;
+        background: var(--bg-light, white);
         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: var(--shadow-light, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-medium, 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .panel-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -91,7 +91,7 @@
     .panel-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         display: flex;
         align-items: center;
         gap: 0.75rem;
@@ -103,17 +103,17 @@
         gap: 0.5rem;
         font-size: 0.875rem;
         padding: 0.5rem 1rem;
-        background: #fff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, #fff);
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .status-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         animation: pulse 2s infinite;
     }
     
@@ -128,7 +128,7 @@
     .section-title {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1.5rem;
         display: flex;
         align-items: center;
@@ -138,12 +138,12 @@
     .section-icon {
         width: 32px;
         height: 32px;
-        background: #f0f1ff;
+        background: var(--accent-bg, #f0f1ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .form-grid {
@@ -160,7 +160,7 @@
     
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.875rem;
         display: flex;
         align-items: center;
@@ -168,7 +168,7 @@
     }
     
     .tooltip-icon {
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
         cursor: help;
         position: relative;
@@ -184,8 +184,8 @@
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
-        background: #1e293b;
-        color: white;
+        background: var(--text-primary, #1e293b);
+        color: var(--bg-light, white);
         padding: 0.5rem 1rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -201,23 +201,24 @@
         left: 50%;
         transform: translateX(-50%);
         border: 5px solid transparent;
-        border-top-color: #1e293b;
+        border-top-color: var(--text-primary, #1e293b);
     }
     
     .form-control {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-light, #fff);
+        color: var(--text-primary, inherit);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
+        border-color: var(--accent-focus, #5b5fcf);
+        box-shadow: var(--accent-shadow, 0 0 0 3px rgba(91, 95, 207, 0.1));
     }
     
     .select-control {
@@ -237,13 +238,13 @@
     
     .input-addon {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 500;
     }
     
     .current-value {
         font-size: 0.75rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
         margin-top: 0.25rem;
     }
     
@@ -252,7 +253,7 @@
         gap: 1rem;
         margin-top: 2rem;
         padding-top: 2rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-light, #e8e9ff);
     }
     
     .btn {
@@ -269,32 +270,32 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-light, white);
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(91, 95, 207, 0.4));
     }
     
     .btn-secondary {
-        background: white;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, white);
+        color: var(--text-secondary, #64748b);
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #cbd5e1;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--border-color, #cbd5e1);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #e8e9ff;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--border-light, #e8e9ff);
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
     }
@@ -324,25 +325,25 @@
     
     .alert-message {
         font-size: 0.875rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .alert-success {
-        background: #d1fae5;
-        border: 1px solid #a7f3d0;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        border: 1px solid var(--success-border, #a7f3d0);
+        color: var(--success-text, #065f46);
     }
     
     .alert-error {
-        background: #fee2e2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fee2e2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .alert-warning {
-        background: #fef3c7;
-        border: 1px solid #fde68a;
-        color: #92400e;
+        background: var(--warning-bg, #fef3c7);
+        border: 1px solid var(--warning-border, #fde68a);
+        color: var(--warning-text, #92400e);
     }
     
     .stats-grid {
@@ -353,8 +354,8 @@
     }
     
     .stat-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         text-align: center;
@@ -363,13 +364,13 @@
     .stat-value {
         font-size: 1.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 0.25rem;
     }
     
     .stat-label {
         font-size: 0.75rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
@@ -442,7 +443,7 @@
         <div class="header-content">
             <h1 class="page-title">
                 <div class="server-icon">
-                    <i class="fas fa-server" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                    <i class="fas fa-server" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
                 </div>
                 {% trans "LiteSpeed Tuning" %}
             </h1>
@@ -460,14 +461,14 @@
         </div>
         <div class="stat-card">
             <div class="stat-value">
-                <span ng-if="connectionTimeOut">{$ connectionTimeOut $}<span style="font-size: 1rem;">s</span></span>
+                <span ng-if="connectionTimeOut">{$ connectionTimeOut $}<span style="font-size: 1rem; color: var(--text-muted, inherit);">s</span></span>
                 <span ng-if="!connectionTimeOut">-</span>
             </div>
             <div class="stat-label">{% trans "Connection Timeout" %}</div>
         </div>
         <div class="stat-card">
             <div class="stat-value">
-                <span ng-if="cacheSizeInMemory !== undefined">{$ cacheSizeInMemory $}<span style="font-size: 1rem;">M</span></span>
+                <span ng-if="cacheSizeInMemory !== undefined">{$ cacheSizeInMemory $}<span style="font-size: 1rem; color: var(--text-muted, inherit);">M</span></span>
                 <span ng-if="cacheSizeInMemory === undefined">-</span>
             </div>
             <div class="stat-label">{% trans "Cache Size" %}</div>
diff --git a/tuning/templates/tuning/phpTuning.html b/tuning/templates/tuning/phpTuning.html
index 66bf656d0..b26a8003f 100644
--- a/tuning/templates/tuning/phpTuning.html
+++ b/tuning/templates/tuning/phpTuning.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -32,7 +32,7 @@
         right: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
+        background: radial-gradient(circle at 70% 30%, var(--accent-shadow, rgba(91, 95, 207, 0.1)) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
     
@@ -44,7 +44,7 @@
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -55,26 +55,26 @@
     .php-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-light, white);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.125rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         max-width: 600px;
         margin: 0 auto;
     }
     
     .selector-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         padding: 2rem;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
@@ -90,18 +90,18 @@
     .selector-icon {
         width: 40px;
         height: 40px;
-        background: linear-gradient(135deg, #5b5fcf 0%, #4547a9 100%);
+        background: var(--accent-bg, linear-gradient(135deg, #5b5fcf 0%, #4547a9 100%));
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: white;
+        color: var(--bg-light, white);
     }
     
     .selector-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .selector-form {
@@ -116,7 +116,7 @@
     
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.875rem;
         margin-bottom: 0.5rem;
         display: block;
@@ -125,17 +125,18 @@
     .form-control {
         width: 100%;
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-light, #fff);
+        color: var(--text-primary, #1e293b);
     }
     
     .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: var(--accent-focus, 0 0 0 3px rgba(91, 95, 207, 0.1));
     }
     
     .select-control {
@@ -161,34 +162,34 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--bg-light, white);
     }
     
     .btn-primary:hover {
-        background: #4547a9;
+        background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
+        box-shadow: var(--accent-shadow, 0 4px 12px rgba(91, 95, 207, 0.3));
     }
     
     .tuning-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         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: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out 0.2s;
         animation-fill-mode: both;
     }
     
     .panel-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        color: #1e293b;
+        background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
+        color: var(--text-primary, #1e293b);
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
     }
     
     .panel-title {
@@ -200,12 +201,12 @@
     }
     
     .php-version-badge {
-        background: #fff;
+        background: var(--bg-light, #fff);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         font-size: 0.875rem;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        color: var(--text-secondary, #64748b);
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .form-section {
@@ -218,24 +219,24 @@
         gap: 0.75rem;
         margin-bottom: 1.5rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
     }
     
     .section-icon {
         width: 32px;
         height: 32px;
-        background: #f3e8ff;
+        background: var(--accent-bg, #f3e8ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .section-title {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .form-grid {
@@ -252,7 +253,7 @@
     
     .field-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.875rem;
         display: flex;
         align-items: center;
@@ -260,7 +261,7 @@
     }
     
     .tooltip-icon {
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
         cursor: help;
         position: relative;
@@ -276,8 +277,8 @@
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
-        background: #1e293b;
-        color: white;
+        background: var(--text-primary, #1e293b);
+        color: var(--bg-light, white);
         padding: 0.5rem 1rem;
         border-radius: 6px;
         font-size: 0.75rem;
@@ -294,7 +295,7 @@
         left: 50%;
         transform: translateX(-50%);
         border: 5px solid transparent;
-        border-top-color: #1e293b;
+        border-top-color: var(--text-primary, #1e293b);
     }
     
     .input-group {
@@ -305,13 +306,13 @@
     
     .input-addon {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 500;
     }
     
     .current-value {
         font-size: 0.75rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
         margin-top: 0.25rem;
     }
     
@@ -335,7 +336,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #cbd5e1;
+        background-color: var(--border-color, #cbd5e1);
         transition: .4s;
         border-radius: 24px;
     }
@@ -347,13 +348,13 @@
         width: 18px;
         left: 3px;
         bottom: 3px;
-        background-color: white;
+        background-color: var(--bg-light, white);
         transition: .4s;
         border-radius: 50%;
     }
     
     input:checked + .toggle-slider {
-        background-color: #5b5fcf;
+        background-color: var(--accent-color, #5b5fcf);
     }
     
     input:checked + .toggle-slider:before {
@@ -365,26 +366,26 @@
         gap: 1rem;
         margin-top: 2rem;
         padding: 2rem;
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-gradient, #f8f9ff);
+        border-top: 1px solid var(--border-light, #e8e9ff);
     }
     
     .btn-secondary {
-        background: white;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-light, white);
+        color: var(--text-secondary, #64748b);
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #cbd5e1;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--border-color, #cbd5e1);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -416,37 +417,37 @@
     
     .alert-message {
         font-size: 0.875rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
     
     .alert-success {
-        background: #d1fae5;
-        border: 1px solid #a7f3d0;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        border: 1px solid var(--success-border, #a7f3d0);
+        color: var(--success-text, #065f46);
     }
     
     .alert-error {
-        background: #fee2e2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fee2e2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .alert-info {
-        background: #dbeafe;
-        border: 1px solid #bfdbfe;
-        color: #1e40af;
+        background: var(--info-bg, #dbeafe);
+        border: 1px solid var(--info-border, #bfdbfe);
+        color: var(--info-text, #1e40af);
     }
     
     .empty-state {
         text-align: center;
         padding: 3rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .empty-icon {
         width: 80px;
         height: 80px;
-        background: #f3f4f6;
+        background: var(--bg-hover, #f3f4f6);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -517,7 +518,7 @@
         <div class="header-content">
             <h1 class="page-title">
                 <div class="php-icon">
-                    <i class="fab fa-php" style="color: #5b5fcf; font-size: 1.75rem;"></i>
+                    <i class="fab fa-php" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
                 </div>
                 {% trans "PHP Tuning" %}
             </h1>
@@ -813,9 +814,9 @@
     <div class="tuning-panel" ng-show="hideDetails">
         <div class="empty-state">
             <div class="empty-icon">
-                <i class="fas fa-code" style="font-size: 2rem; color: #5b5fcf;"></i>
+                <i class="fas fa-code" style="font-size: 2rem; color: var(--accent-color, #5b5fcf);"></i>
             </div>
-            <h3 style="color: #1e293b; margin-bottom: 0.5rem;">{% trans "No PHP Version Selected" %}</h3>
+            <h3 style="color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">{% trans "No PHP Version Selected" %}</h3>
             <p>
                 {% if OLS %}
                     {% trans "Select a domain from the dropdown above to configure its PHP settings" %}