From f95a83f305029c020d94180c792da1d7a8f7c414 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sat, 2 Aug 2025 15:43:18 +0500
Subject: [PATCH] dark mode

---
 .../websiteFunctions/CreateDockerPackage.html |  71 +++---
 .../websiteFunctions/CreateDockerSite.html    |  74 +++---
 .../websiteFunctions/DockerSiteHome.html      | 221 +++++++++---------
 .../websiteFunctions/ListDockersite.html      | 120 +++++-----
 .../websiteFunctions/RemoteBackupConfig.html  |  78 +++----
 .../websiteFunctions/RestoreBackups.html      |  94 ++++----
 6 files changed, 334 insertions(+), 324 deletions(-)

diff --git a/websiteFunctions/templates/websiteFunctions/CreateDockerPackage.html b/websiteFunctions/templates/websiteFunctions/CreateDockerPackage.html
index 5aee9fbf3..1ab990dcf 100644
--- a/websiteFunctions/templates/websiteFunctions/CreateDockerPackage.html
+++ b/websiteFunctions/templates/websiteFunctions/CreateDockerPackage.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,26 +77,26 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
     .form-control[readonly] {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         cursor: not-allowed;
     }
     
@@ -116,12 +116,12 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
+        background: var(--accent-hover, #4a4fc4);
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -138,7 +138,7 @@
     }
     
     .btn-danger {
-        background: #dc3545;
+        background: var(--danger-text, #dc3545);
         color: white;
     }
     
@@ -149,14 +149,14 @@
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
         background: #eef0ff;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     /* Table styles */
@@ -171,22 +171,22 @@
         padding: 12px 15px;
         font-size: 11px;
         font-weight: 700;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.8px;
-        border-bottom: 2px solid #e8e9ff;
-        background: #f8f9ff;
+        border-bottom: 2px solid var(--border-color, #e8e9ff);
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .modern-table td {
         padding: 12px 15px;
         font-size: 13px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0ff;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-color, #f0f0ff);
     }
     
     .modern-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .action-buttons {
@@ -203,12 +203,13 @@
     .modal-content {
         border-radius: 12px;
         border: none;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.1));
+        background: var(--bg-secondary, white);
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px 12px 0 0;
         padding: 20px 25px;
     }
@@ -216,7 +217,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         display: flex;
         align-items: center;
         gap: 10px;
@@ -227,8 +228,8 @@
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         border-radius: 0 0 12px 12px;
         padding: 15px 25px;
         display: flex;
@@ -264,9 +265,9 @@
     }
     
     .alert-info {
-        background: #e3f2fd;
+        background: var(--info-bg, #e3f2fd);
         border: 1px solid #bbdefb;
-        color: #1565c0;
+        color: var(--info-text, #1565c0);
     }
     
     /* Form row */
diff --git a/websiteFunctions/templates/websiteFunctions/CreateDockerSite.html b/websiteFunctions/templates/websiteFunctions/CreateDockerSite.html
index b8f5a96b4..ae096862f 100644
--- a/websiteFunctions/templates/websiteFunctions/CreateDockerSite.html
+++ b/websiteFunctions/templates/websiteFunctions/CreateDockerSite.html
@@ -17,18 +17,18 @@
     }
     
     .docker-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-heading, #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;
     }
     
     .docker-description {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -54,8 +54,8 @@
     
     /* Form Styles */
     .form-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 30px;
     }
@@ -74,7 +74,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         text-align: right;
@@ -84,22 +84,22 @@
         width: 100%;
         max-width: 400px;
         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;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
     .form-control::placeholder {
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
         font-size: 13px;
     }
     
@@ -109,8 +109,8 @@
     
     /* Resource Configuration Section */
     .resource-section {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 20px;
@@ -119,7 +119,7 @@
     .resource-header {
         font-size: 14px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 15px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -131,12 +131,12 @@
     .resource-icon {
         width: 32px;
         height: 32px;
-        background: #e8e9ff;
+        background: var(--bg-hover, #e8e9ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     .resource-grid {
@@ -147,8 +147,8 @@
     
     /* Buttons */
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
         color: white;
         padding: 12px 32px;
         border-radius: 8px;
@@ -163,15 +163,15 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
         box-shadow: 0 3px 8px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
     
     .btn-primary:disabled {
-        background: #94a3b8;
-        border-color: #94a3b8;
+        background: var(--text-secondary, #94a3b8);
+        border-color: var(--text-secondary, #94a3b8);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
@@ -202,15 +202,15 @@
     
     /* Progress Section */
     .progress-section {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 30px;
         text-align: center;
     }
     
     .status-message {
-        background: #f0f9ff;
+        background: var(--info-bg, #f0f9ff);
         border: 1px solid #bae6fd;
         border-radius: 8px;
         padding: 20px;
@@ -220,7 +220,7 @@
     .status-message h2 {
         font-size: 20px;
         font-weight: 700;
-        color: #0369a1;
+        color: var(--info-text, #0369a1);
         margin: 0;
     }
     
@@ -233,7 +233,7 @@
     }
     
     .progress-bar {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         height: 100%;
         transition: width 0.3s ease;
         display: flex;
@@ -253,15 +253,15 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
+        background: var(--success-bg, #f0f9ff);
         border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        color: var(--success-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: #fef2f2;
+        background: var(--danger-bg, #fef2f2);
         border: 1px solid #fecaca;
-        color: #991b1b;
+        color: var(--danger-text, #991b1b);
     }
     
     .loading-spinner {
@@ -271,19 +271,19 @@
     }
     
     .error-text {
-        color: #ef4444;
+        color: var(--danger-text, #ef4444);
         font-size: 13px;
         margin-top: 5px;
     }
     
     /* Info Boxes */
     .info-box {
-        background: #f0f9ff;
+        background: var(--info-bg, #f0f9ff);
         border: 1px solid #bae6fd;
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 20px;
-        color: #0c4a6e;
+        color: var(--info-text, #0c4a6e);
         font-size: 14px;
     }
     
diff --git a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
index 519b2b28a..9f4e4b412 100644
--- a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
@@ -80,13 +80,13 @@
         }
 
         .info-box {
-            background: #fff;
-            border: 1px solid var(--border-color);
+            background: var(--bg-secondary, #fff);
+            border: 1px solid var(--border-color, #e2e8f0);
             border-radius: 8px;
             padding: 20px;
             margin-bottom: 24px;
-            box-shadow: var(--box-shadow);
-            transition: var(--transition);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            transition: var(--transition, all 0.2s ease);
             max-width: 100%;
             overflow: hidden;
         }
@@ -99,9 +99,9 @@
         .info-box h4 {
             margin-top: 0;
             margin-bottom: 18px;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             font-weight: 600;
-            border-bottom: 2px solid #f5f5f5;
+            border-bottom: 2px solid var(--border-color, #f5f5f5);
             padding-bottom: 10px;
             font-size: 16px;
         }
@@ -109,14 +109,14 @@
         .progress {
             margin-bottom: 15px;
             height: 12px;
-            background-color: #f5f5f5;
+            background-color: var(--border-color, #f5f5f5);
             border-radius: 20px;
             overflow: hidden;
             box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
         }
 
         .progress-bar {
-            background-color: var(--primary-color);
+            background-color: var(--accent-color, #2496ed);
             color: white;
             text-align: center;
             line-height: 12px;
@@ -125,17 +125,17 @@
         }
 
         .progress-bar.high {
-            background-color: var(--danger-color);
+            background-color: var(--danger-text, #ef4444);
         }
 
         /* Resource usage colors */
         .progress-bar[aria-valuenow^="8"],
         .progress-bar[aria-valuenow^="9"] {
-            background-color: var(--danger-color);
+            background-color: var(--danger-text, #ef4444);
         }
 
         .progress-bar[aria-valuenow^="7"] {
-            background-color: var(--warning-color);
+            background-color: #f59e0b;
         }
 
         .label {
@@ -148,31 +148,32 @@
         }
 
         .label-success {
-            background-color: var(--secondary-color);
+            background-color: var(--success-text, #10b981);
             color: white;
         }
 
         .label-danger {
-            background-color: var(--danger-color);
+            background-color: var(--danger-text, #ef4444);
             color: white;
         }
 
         .label-warning {
-            background-color: var(--warning-color);
+            background-color: #f59e0b;
             color: white;
         }
 
         .table-striped > tbody > tr:nth-of-type(odd) {
-            background-color: #f9f9f9;
+            background-color: var(--bg-hover, #f9f9f9);
         }
 
         .table {
             margin-bottom: 0;
-            background-color: white;
+            background-color: var(--bg-secondary, white);
             width: 100%;
             border-collapse: collapse;
             table-layout: fixed;
             word-wrap: break-word;
+            color: var(--text-primary, #333);
         }
         
         .table td, .table th {
@@ -181,9 +182,9 @@
         }
 
         .table > thead > tr > th {
-            border-bottom: 2px solid #ddd;
+            border-bottom: 2px solid var(--border-color, #ddd);
             font-weight: 600;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             padding: 12px 8px;
             text-align: left;
         }
@@ -191,7 +192,7 @@
         .table > tbody > tr > td {
             vertical-align: middle;
             padding: 12px 8px;
-            border-top: 1px solid #f0f0f0;
+            border-top: 1px solid var(--border-color, #f0f0f0);
         }
 
         .table-responsive {
@@ -205,12 +206,12 @@
             border-radius: 16px;
             overflow: hidden;
             margin-bottom: 30px;
-            box-shadow: var(--box-shadow);
-            border: 1px solid var(--border-color);
-            background: white;
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            border: 1px solid var(--border-color, #e2e8f0);
+            background: var(--bg-secondary, white);
             max-width: 100%;
             width: 100%;
-            transition: var(--transition);
+            transition: var(--transition, all 0.2s ease);
             position: relative;
         }
         
@@ -237,11 +238,11 @@
 
         .container-header {
             padding: 20px 24px;
-            background: #f8fafc;
+            background: var(--bg-hover, #f8fafc);
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid var(--border-color);
+            border-bottom: 1px solid var(--border-color, #e2e8f0);
             position: relative;
         }
         
@@ -249,14 +250,14 @@
             margin: 0;
             font-size: 18px;
             font-weight: 600;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             display: flex;
             align-items: center;
             gap: 12px;
         }
         
         .container-header h3 .fa-cube {
-            color: var(--docker-blue);
+            color: var(--accent-color, #0db7ed);
             font-size: 20px;
         }
 
@@ -302,27 +303,27 @@
 
         /* Button Colors */
         .btn-success {
-            background-color: var(--secondary-color);
+            background-color: var(--success-text, #10b981);
             color: white;
         }
         
         .btn-warning {
-            background-color: var(--warning-color);
+            background-color: #f59e0b;
             color: white;
         }
         
         .btn-danger {
-            background-color: var(--danger-color);
+            background-color: var(--danger-text, #ef4444);
             color: white;
         }
         
         .btn-primary {
-            background-color: var(--primary-color);
+            background-color: var(--accent-color, #2496ed);
             color: white;
         }
         
         .btn-info {
-            background-color: var(--info-color);
+            background-color: var(--info-text, #3b82f6);
             color: white;
         }
 
@@ -335,15 +336,15 @@
         }
         
         .metric-card {
-            background: white;
+            background: var(--bg-secondary, white);
             padding: 15px;
             border-radius: 6px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-            border: 1px solid #f0f0f0;
+            box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #f0f0f0);
         }
         
         .metric-card h5 {
-            color: #666;
+            color: var(--text-secondary, #666);
             margin-bottom: 10px;
             font-size: 14px;
         }
@@ -351,7 +352,7 @@
         .metric-card .value {
             font-size: 22px;
             font-weight: bold;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
         }
 
         /* Status indicators */
@@ -365,11 +366,11 @@
         }
 
         .status-running {
-            background-color: var(--secondary-color);
+            background-color: var(--success-text, #10b981);
         }
 
         .status-stopped {
-            background-color: var(--danger-color);
+            background-color: var(--danger-text, #ef4444);
         }
         
         /* Workflow status badge - Enhanced */
@@ -386,14 +387,14 @@
         }
         
         .workflow-status.active {
-            background: #d1fae5;
-            color: #059669;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #059669);
             border: 1px solid #a7f3d0;
         }
         
         .workflow-status.error {
-            background: #fee2e2;
-            color: #dc2626;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #dc2626);
             border: 1px solid #fecaca;
         }
         
@@ -405,23 +406,23 @@
         textarea.logs {
             width: 100%;
             padding: 10px;
-            border: 1px solid #eee;
+            border: 1px solid var(--border-color, #eee);
             border-radius: 4px;
             font-family: monospace;
             font-size: 18px;
             line-height: 1.5;
-            background-color: #f8f9fa;
-            color: #333;
+            background-color: var(--bg-hover, #f8f9fa);
+            color: var(--text-primary, #333);
             height: 300px;
         }
 
         /* Code styling */
         code {
             padding: 2px 5px;
-            background-color: #f8f9fa;
+            background-color: var(--bg-hover, #f8f9fa);
             border-radius: 3px;
             font-family: monospace;
-            color: #333;
+            color: var(--text-primary, #333);
             font-size: 90%;
         }
 
@@ -466,12 +467,12 @@
 
         /* Custom n8n container */
         .n8n-container {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            border-left: 4px solid var(--secondary-color);
+            background: linear-gradient(135deg, var(--bg-hover, #f5f7fa) 0%, #c3cfe2 100%);
+            border-left: 4px solid var(--success-text, #10b981);
             border-radius: 8px;
             padding: 20px;
             margin-bottom: 30px;
-            box-shadow: var(--box-shadow);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
             max-width: 100%;
             overflow: hidden;
         }
@@ -480,13 +481,14 @@
         .modal-content {
             border-radius: 8px;
             border: none;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            box-shadow: 0 5px 15px var(--shadow-color, rgba(0,0,0,0.1));
+            background: var(--bg-secondary, white);
         }
 
         .modal-header {
-            border-bottom: 1px solid #f5f5f5;
+            border-bottom: 1px solid var(--border-color, #f5f5f5);
             padding: 15px 20px;
-            background-color: #f8f9fa;
+            background-color: var(--bg-hover, #f8f9fa);
             border-top-left-radius: 8px;
             border-top-right-radius: 8px;
         }
@@ -496,8 +498,9 @@
         }
 
         .modal-footer {
-            border-top: 1px solid #f5f5f5;
+            border-top: 1px solid var(--border-color, #f5f5f5);
             padding: 15px 20px;
+            background-color: var(--bg-hover, #f8f9fa);
         }
 
         /* Icon fixes */
@@ -554,7 +557,7 @@
         .page-title h2 {
             font-size: 24px;
             margin: 0;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             font-weight: 600;
             display: flex;
             align-items: center;
@@ -562,22 +565,22 @@
 
         .page-title h2 i {
             margin-right: 10px;
-            color: var(--primary-color);
+            color: var(--accent-color, #2496ed);
         }
 
         .page-title p {
-            color: #777;
+            color: var(--text-secondary, #777);
             margin: 5px 0 0 0;
             font-size: 14px;
         }
 
         .create-btn {
-            background-color: var(--primary-color) !important;
+            background-color: var(--accent-color, #2496ed) !important;
             color: white !important;
             padding: 8px 16px;
             border-radius: 4px;
-            box-shadow: var(--box-shadow);
-            transition: var(--transition);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            transition: var(--transition, all 0.2s ease);
             display: inline-flex !important;
             align-items: center;
             text-decoration: none;
@@ -585,10 +588,10 @@
         }
 
         .create-btn:hover {
-            background-color: #1976d2 !important;
+            background-color: var(--accent-hover, #1976d2) !important;
             color: white;
             transform: translateY(-2px);
-            box-shadow: var(--box-shadow-hover);
+            box-shadow: var(--box-shadow-hover, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05));
             text-decoration: none;
         }
         
@@ -602,15 +605,15 @@
         }
         
         .stats-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 20px;
             display: flex;
             align-items: center;
             gap: 15px;
-            box-shadow: var(--box-shadow);
-            transition: var(--transition);
-            border: 1px solid var(--border-color);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            transition: var(--transition, all 0.2s ease);
+            border: 1px solid var(--border-color, #e2e8f0);
             position: relative;
             overflow: hidden;
         }
@@ -643,7 +646,7 @@
         
         .stats-card:hover {
             transform: translateY(-2px);
-            box-shadow: var(--box-shadow-hover);
+            box-shadow: var(--box-shadow-hover, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05));
         }
         
         .stats-icon {
@@ -657,18 +660,18 @@
         }
         
         .stats-card.running .stats-icon {
-            background: #d1fae5;
-            color: #10b981;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #10b981);
         }
         
         .stats-card.stopped .stats-icon {
-            background: #fee2e2;
-            color: #ef4444;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #ef4444);
         }
         
         .stats-card.total .stats-icon {
             background: #e0f2fe;
-            color: var(--docker-blue);
+            color: var(--accent-color, #0db7ed);
         }
         
         .stats-card.memory .stats-icon {
@@ -683,13 +686,13 @@
         .stats-value {
             font-size: 28px;
             font-weight: 700;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             line-height: 1;
         }
         
         .stats-label {
             font-size: 14px;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-top: 5px;
             font-weight: 500;
         }
@@ -707,12 +710,12 @@
         
         /* Search and Filter Section */
         .search-filter-section {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 20px;
             margin-bottom: 30px;
-            box-shadow: var(--box-shadow);
-            border: 1px solid var(--border-color);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            border: 1px solid var(--border-color, #e2e8f0);
             display: flex;
             gap: 20px;
             align-items: center;
@@ -730,21 +733,23 @@
             left: 15px;
             top: 50%;
             transform: translateY(-50%);
-            color: #94a3b8;
+            color: var(--text-secondary, #94a3b8);
             font-size: 16px;
         }
         
         .search-box input {
             width: 100%;
             padding: 10px 15px 10px 45px;
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--border-color, #e2e8f0);
             border-radius: 8px;
             font-size: 14px;
-            transition: var(--transition);
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #333);
+            transition: var(--transition, all 0.2s ease);
         }
         
         .search-box input:focus {
-            border-color: var(--docker-blue);
+            border-color: var(--accent-color, #0db7ed);
             box-shadow: 0 0 0 3px rgba(36, 150, 237, 0.1);
             outline: none;
         }
@@ -756,29 +761,29 @@
         
         .filter-btn {
             padding: 8px 16px;
-            border: 1px solid var(--border-color);
-            background: white;
+            border: 1px solid var(--border-color, #e2e8f0);
+            background: var(--bg-secondary, white);
             border-radius: 8px;
             font-size: 14px;
             font-weight: 500;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             cursor: pointer;
-            transition: var(--transition);
+            transition: var(--transition, all 0.2s ease);
             display: flex;
             align-items: center;
             gap: 6px;
         }
         
         .filter-btn:hover {
-            border-color: var(--docker-blue);
-            color: var(--docker-blue);
-            background: #f0f9ff;
+            border-color: var(--accent-color, #0db7ed);
+            color: var(--accent-color, #0db7ed);
+            background: var(--info-bg, #f0f9ff);
         }
         
         .filter-btn.active {
-            background: var(--docker-blue);
+            background: var(--accent-color, #0db7ed);
             color: white;
-            border-color: var(--docker-blue);
+            border-color: var(--accent-color, #0db7ed);
         }
         
         .filter-btn i {
@@ -789,16 +794,16 @@
         .empty-state {
             text-align: center;
             padding: 80px 20px;
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
-            box-shadow: var(--box-shadow);
-            border: 1px solid var(--border-color);
+            box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
+            border: 1px solid var(--border-color, #e2e8f0);
         }
         
         .empty-state-icon {
             width: 100px;
             height: 100px;
-            background: #f0f9ff;
+            background: var(--info-bg, #f0f9ff);
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -808,25 +813,25 @@
         
         .empty-state-icon i {
             font-size: 48px;
-            color: var(--docker-blue);
+            color: var(--accent-color, #0db7ed);
         }
         
         .empty-state h3 {
             font-size: 24px;
-            color: var(--dark-color);
+            color: var(--text-heading, #1e293b);
             margin-bottom: 10px;
         }
         
         .empty-state p {
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 16px;
             margin-bottom: 30px;
         }
         
         /* Enhanced button styles */
         .btn-success {
-            background: #10b981 !important;
-            border-color: #10b981 !important;
+            background: var(--success-text, #10b981) !important;
+            border-color: var(--success-text, #10b981) !important;
         }
         
         .btn-success:hover {
@@ -845,8 +850,8 @@
         }
         
         .btn-danger {
-            background: #ef4444 !important;
-            border-color: #ef4444 !important;
+            background: var(--danger-text, #ef4444) !important;
+            border-color: var(--danger-text, #ef4444) !important;
         }
         
         .btn-danger:hover {
@@ -855,8 +860,8 @@
         }
         
         .btn-info {
-            background: #3b82f6 !important;
-            border-color: #3b82f6 !important;
+            background: var(--info-text, #3b82f6) !important;
+            border-color: var(--info-text, #3b82f6) !important;
         }
         
         .btn-info:hover {
@@ -865,13 +870,13 @@
         }
         
         .btn-primary {
-            background: var(--docker-blue) !important;
-            border-color: var(--docker-blue) !important;
+            background: var(--accent-color, #0db7ed) !important;
+            border-color: var(--accent-color, #0db7ed) !important;
         }
         
         .btn-primary:hover {
-            background: #0284c7 !important;
-            border-color: #0284c7 !important;
+            background: var(--accent-hover, #0284c7) !important;
+            border-color: var(--accent-hover, #0284c7) !important;
         }
 
         .create-btn i {
diff --git a/websiteFunctions/templates/websiteFunctions/ListDockersite.html b/websiteFunctions/templates/websiteFunctions/ListDockersite.html
index 916eb3cb4..befcb2f26 100644
--- a/websiteFunctions/templates/websiteFunctions/ListDockersite.html
+++ b/websiteFunctions/templates/websiteFunctions/ListDockersite.html
@@ -25,7 +25,7 @@
         }
 
         .page-header h1 {
-            color: #1e293b;
+            color: var(--text-heading, #1e293b);
             font-size: 32px;
             font-weight: 700;
             margin: 0;
@@ -37,7 +37,7 @@
         .page-header .docker-icon {
             width: 48px;
             height: 48px;
-            background: linear-gradient(135deg, #5856d6 0%, #7c7ff2 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5856d6) 0%, #7c7ff2 100%);
             border-radius: 12px;
             display: flex;
             align-items: center;
@@ -48,14 +48,14 @@
         }
 
         .page-header p {
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 16px;
             margin: 0;
             flex: 1 1 100%;
         }
 
         .create-docker-btn {
-            background: linear-gradient(135deg, #5856d6 0%, #7c7ff2 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5856d6) 0%, #7c7ff2 100%);
             color: white;
             border: none;
             padding: 12px 24px;
@@ -93,17 +93,18 @@
         .search-box input {
             width: 100%;
             padding: 14px 20px 14px 50px;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 12px;
             font-size: 15px;
             transition: all 0.3s ease;
-            background: white;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+            background: var(--bg-secondary, white);
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
+            color: var(--text-primary, #333);
         }
 
         .search-box input:focus {
             outline: none;
-            border-color: #5856d6;
+            border-color: var(--accent-color, #5856d6);
             box-shadow: 0 4px 12px rgba(88,86,214,0.15);
         }
 
@@ -112,7 +113,7 @@
             left: 18px;
             top: 50%;
             transform: translateY(-50%);
-            color: #94a3b8;
+            color: var(--text-secondary, #94a3b8);
             font-size: 18px;
         }
 
@@ -122,30 +123,31 @@
 
         .records-select select {
             padding: 14px 20px;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 12px;
             font-size: 15px;
-            background: white;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #333);
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
             cursor: pointer;
             transition: all 0.3s ease;
         }
 
         .records-select select:focus {
             outline: none;
-            border-color: #5856d6;
+            border-color: var(--accent-color, #5856d6);
         }
 
         /* Docker Site Cards */
         .docker-site-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 16px;
             padding: 0;
             margin-bottom: 20px;
-            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+            box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.06));
             transition: all 0.3s ease;
             overflow: hidden;
-            border: 1px solid #f1f3f5;
+            border: 1px solid var(--border-color, #f1f3f5);
         }
 
         .docker-site-card:hover {
@@ -154,12 +156,12 @@
         }
 
         .site-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f3f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, #f3f1ff 100%);
             padding: 20px 24px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
 
         .site-title {
@@ -172,7 +174,7 @@
             margin: 0;
             font-size: 22px;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-heading, #1e293b);
         }
 
         .site-title a {
@@ -182,17 +184,17 @@
         }
 
         .site-title a:hover {
-            color: #5856d6;
+            color: var(--accent-color, #5856d6);
         }
 
         .external-link {
-            color: #94a3b8;
+            color: var(--text-secondary, #94a3b8);
             font-size: 16px;
             margin-left: 8px;
         }
 
         .manage-btn {
-            background: #5856d6;
+            background: var(--accent-color, #5856d6);
             color: white;
             border: none;
             padding: 10px 20px;
@@ -207,7 +209,7 @@
         }
 
         .manage-btn:hover {
-            background: #4845d2;
+            background: var(--accent-hover, #4845d2);
             color: white;
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(88,86,214,0.25);
@@ -233,12 +235,12 @@
         .detail-icon {
             width: 40px;
             height: 40px;
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #5856d6;
+            color: var(--accent-color, #5856d6);
             font-size: 18px;
             flex-shrink: 0;
         }
@@ -249,7 +251,7 @@
 
         .detail-label {
             font-size: 12px;
-            color: #94a3b8;
+            color: var(--text-secondary, #94a3b8);
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin-bottom: 2px;
@@ -258,7 +260,7 @@
 
         .detail-value {
             font-size: 15px;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 500;
         }
 
@@ -275,14 +277,14 @@
 
         .state-badge.running,
         .state-badge.active {
-            background: #d4f8e8;
-            color: #065f46;
+            background: var(--success-bg, #d4f8e8);
+            color: var(--success-text, #065f46);
         }
 
         .state-badge.stopped,
         .state-badge.inactive {
-            background: #fee2e2;
-            color: #991b1b;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
         }
 
         .state-badge.paused {
@@ -306,8 +308,8 @@
         }
 
         .delete-btn {
-            background: #fee2e2;
-            color: #dc2626;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #dc2626);
             border: none;
             padding: 10px 20px;
             border-radius: 8px;
@@ -321,7 +323,7 @@
         }
 
         .delete-btn:hover {
-            background: #dc2626;
+            background: var(--danger-text, #dc2626);
             color: white;
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(220,38,38,0.25);
@@ -331,7 +333,7 @@
         .loading-container {
             text-align: center;
             padding: 60px;
-            color: #94a3b8;
+            color: var(--text-secondary, #94a3b8);
         }
 
         .loading-spinner {
@@ -351,7 +353,7 @@
         }
 
         .pagination-info {
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 14px;
         }
 
@@ -361,10 +363,11 @@
 
         .pagination-select select {
             padding: 10px 16px;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             font-size: 14px;
-            background: white;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #333);
             cursor: pointer;
         }
 
@@ -373,16 +376,17 @@
             border-radius: 16px;
             border: none;
             overflow: hidden;
+            background: var(--bg-secondary, white);
         }
 
         .modal-header {
-            background: #f8f9ff;
-            border-bottom: 1px solid #e8e9ff;
+            background: var(--bg-hover, #f8f9ff);
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
             padding: 20px 24px;
         }
 
         .modal-title {
-            color: #1e293b;
+            color: var(--text-heading, #1e293b);
             font-weight: 600;
             font-size: 20px;
         }
@@ -392,14 +396,14 @@
         }
 
         .modal-body h4 {
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-weight: 500;
             margin: 0;
         }
 
         .modal-footer {
-            background: #f8f9ff;
-            border-top: 1px solid #e8e9ff;
+            background: var(--bg-hover, #f8f9ff);
+            border-top: 1px solid var(--border-color, #e8e9ff);
             padding: 16px 24px;
             gap: 12px;
         }
@@ -412,18 +416,18 @@
         }
 
         .modal-footer .btn-default {
-            background: white;
-            border: 1px solid #e8e9ff;
-            color: #64748b;
+            background: var(--bg-secondary, white);
+            border: 1px solid var(--border-color, #e8e9ff);
+            color: var(--text-secondary, #64748b);
         }
 
         .modal-footer .btn-default:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-color: #d8d9ff;
         }
 
         .modal-footer .btn-warning {
-            background: #dc2626;
+            background: var(--danger-text, #dc2626);
             border: none;
             color: white;
         }
@@ -438,9 +442,9 @@
         .empty-state {
             text-align: center;
             padding: 80px 20px;
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 16px;
-            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+            box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.06));
         }
 
         .empty-state-icon {
@@ -452,18 +456,18 @@
             align-items: center;
             justify-content: center;
             margin: 0 auto 24px;
-            color: #5856d6;
+            color: var(--accent-color, #5856d6);
             font-size: 48px;
         }
 
         .empty-state h3 {
-            color: #1e293b;
+            color: var(--text-heading, #1e293b);
             font-size: 24px;
             margin-bottom: 12px;
         }
 
         .empty-state p {
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 16px;
             margin-bottom: 24px;
         }
@@ -480,13 +484,13 @@
         }
 
         .alert-success {
-            background: #d4f8e8;
-            color: #065f46;
+            background: var(--success-bg, #d4f8e8);
+            color: var(--success-text, #065f46);
         }
 
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
         }
 
         .alert .close {
diff --git a/websiteFunctions/templates/websiteFunctions/RemoteBackupConfig.html b/websiteFunctions/templates/websiteFunctions/RemoteBackupConfig.html
index f46972b5d..da1c93d82 100644
--- a/websiteFunctions/templates/websiteFunctions/RemoteBackupConfig.html
+++ b/websiteFunctions/templates/websiteFunctions/RemoteBackupConfig.html
@@ -17,18 +17,18 @@
     }
     
     .backup-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-heading, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,7 +41,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -60,7 +60,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         text-align: right;
@@ -70,17 +70,17 @@
         width: 100%;
         max-width: 400px;
         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;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -89,8 +89,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
         color: white;
         padding: 12px 24px;
         border-radius: 8px;
@@ -105,8 +105,8 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
+        background: var(--accent-hover, #4a4fc4);
+        border-color: var(--accent-hover, #4a4fc4);
         box-shadow: 0 3px 8px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -129,8 +129,8 @@
     
     /* Table Styles */
     .table-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         overflow: hidden;
     }
@@ -138,11 +138,11 @@
     .table {
         width: 100%;
         margin-bottom: 0;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .table thead {
-        background: #fafbff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .table th {
@@ -150,23 +150,23 @@
         padding: 15px;
         font-size: 13px;
         font-weight: 700;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .table td {
         border: none;
         padding: 15px;
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         border-bottom: 1px solid #f1f3f5;
         vertical-align: middle;
     }
     
     .table tbody tr:hover {
-        background: #fafbff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .table tbody tr:last-child td {
@@ -183,13 +183,13 @@
     }
     
     .backup-type.sftp {
-        background: #e0f2fe;
-        color: #0369a1;
+        background: var(--info-bg, #e0f2fe);
+        color: var(--info-text, #0369a1);
     }
     
     .backup-type.s3 {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg, #fef3c7);
+        color: var(--warning-text, #92400e);
     }
     
     /* Action Buttons */
@@ -211,35 +211,35 @@
     }
     
     .btn-schedule {
-        color: #10b981;
+        color: var(--success-text, #065f46);
         border-color: #d1fae5;
-        background: #f0fdf4;
+        background: var(--success-bg, #f0fdf4);
     }
     
     .btn-schedule:hover {
-        background: #10b981;
+        background: var(--success-text, #065f46);
         color: white;
-        border-color: #10b981;
+        border-color: var(--success-text, #065f46);
         text-decoration: none;
     }
     
     .btn-delete {
-        color: #ef4444;
+        color: var(--danger-text, #ef4444);
         border-color: #fee2e2;
-        background: #fef2f2;
+        background: var(--danger-bg, #fef2f2);
     }
     
     .btn-delete:hover {
-        background: #ef4444;
+        background: var(--danger-text, #ef4444);
         color: white;
-        border-color: #ef4444;
+        border-color: var(--danger-text, #ef4444);
     }
     
     /* Empty State */
     .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     .empty-state svg {
@@ -252,7 +252,7 @@
     .empty-state h3 {
         font-size: 18px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 10px;
     }
     
@@ -268,12 +268,12 @@
     
     /* Info Alert */
     .info-alert {
-        background: #f0f9ff;
+        background: var(--info-bg, #e0f2fe);
         border: 1px solid #bae6fd;
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 20px;
-        color: #0c4a6e;
+        color: var(--info-text, #0369a1);
         font-size: 14px;
         display: flex;
         align-items: center;
@@ -281,7 +281,7 @@
     }
     
     .info-alert i {
-        color: #0284c7;
+        color: var(--info-text, #0369a1);
     }
     
     /* Responsive */
diff --git a/websiteFunctions/templates/websiteFunctions/RestoreBackups.html b/websiteFunctions/templates/websiteFunctions/RestoreBackups.html
index ac0d797be..4f24320c6 100644
--- a/websiteFunctions/templates/websiteFunctions/RestoreBackups.html
+++ b/websiteFunctions/templates/websiteFunctions/RestoreBackups.html
@@ -17,18 +17,18 @@
     }
     
     .restore-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-heading, #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;
     }
     
     .restore-description {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -54,8 +54,8 @@
     
     /* Table Styles */
     .table-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         overflow: hidden;
     }
@@ -63,11 +63,11 @@
     .table {
         width: 100%;
         margin-bottom: 0;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .table thead {
-        background: #fafbff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .table th {
@@ -75,23 +75,23 @@
         padding: 15px;
         font-size: 13px;
         font-weight: 700;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .table td {
         border: none;
         padding: 15px;
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         border-bottom: 1px solid #f1f3f5;
         vertical-align: middle;
     }
     
     .table tbody tr:hover {
-        background: #fafbff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .table tbody tr:last-child td {
@@ -108,18 +108,18 @@
     }
     
     .backup-type.full {
-        background: #e0f2fe;
-        color: #0369a1;
+        background: var(--info-bg, #e0f2fe);
+        color: var(--info-text, #0369a1);
     }
     
     .backup-type.data {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #f0fdf4);
+        color: var(--success-text, #065f46);
     }
     
     .backup-type.database {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--warning-bg, #fef3c7);
+        color: var(--warning-text, #92400e);
     }
     
     /* Destination Badge */
@@ -131,8 +131,8 @@
         border-radius: 6px;
         font-size: 13px;
         font-weight: 600;
-        background: #f0f4ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
     }
     
     /* Action Buttons */
@@ -154,35 +154,35 @@
     }
     
     .btn-restore {
-        color: #10b981;
+        color: var(--success-text, #065f46);
         border-color: #d1fae5;
-        background: #f0fdf4;
+        background: var(--success-bg, #f0fdf4);
     }
     
     .btn-restore:hover {
-        background: #10b981;
+        background: var(--success-text, #065f46);
         color: white;
-        border-color: #10b981;
+        border-color: var(--success-text, #065f46);
         text-decoration: none;
     }
     
     .btn-delete {
-        color: #ef4444;
+        color: var(--danger-text, #ef4444);
         border-color: #fee2e2;
-        background: #fef2f2;
+        background: var(--danger-bg, #fef2f2);
     }
     
     .btn-delete:hover {
-        background: #ef4444;
+        background: var(--danger-text, #ef4444);
         color: white;
-        border-color: #ef4444;
+        border-color: var(--danger-text, #ef4444);
     }
     
     /* Empty State */
     .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     .empty-state svg {
@@ -195,7 +195,7 @@
     .empty-state h3 {
         font-size: 18px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 10px;
     }
     
@@ -207,13 +207,13 @@
     /* Modal Styles */
     .modal-content {
         border-radius: 12px;
-        border: 1px solid #e8e9ff;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+        border: 1px solid var(--border-color, #e8e9ff);
+        box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
     }
     
     .modal-header {
-        background: #fafbff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 20px;
         border-radius: 12px 12px 0 0;
     }
@@ -221,7 +221,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin: 0;
     }
     
@@ -230,16 +230,16 @@
     }
     
     .modal-footer {
-        background: #fafbff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         padding: 15px 20px;
         border-radius: 0 0 12px 12px;
     }
     
     .btn-default {
-        background: white;
-        border: 1px solid #e8e9ff;
-        color: #2f3640;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--text-primary, #2f3640);
         padding: 8px 20px;
         border-radius: 6px;
         font-size: 14px;
@@ -249,14 +249,14 @@
     }
     
     .btn-default:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
+        color: var(--accent-color, #5b5fcf);
     }
     
     .btn-danger {
-        background: #ef4444;
-        border: 1px solid #ef4444;
+        background: var(--danger-text, #ef4444);
+        border: 1px solid var(--danger-text, #ef4444);
         color: white;
         padding: 8px 20px;
         border-radius: 6px;