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

---
 .../templates/userManagment/apiAccess.html    |  58 +++---
 .../userManagment/changeUserACL.html          | 191 +++++++++++++-----
 .../templates/userManagment/createACL.html    |  35 ++--
 .../templates/userManagment/createUser.html   |  52 ++---
 .../templates/userManagment/deleteACL.html    |  50 ++---
 .../templates/userManagment/deleteUser.html   |  47 +++--
 .../templates/userManagment/listUsers.html    |  90 +++++----
 .../templates/userManagment/modifyACL.html    |  70 +++----
 .../templates/userManagment/modifyUser.html   |  71 ++++---
 .../userManagment/resellerCenter.html         |  72 +++----
 .../templates/userManagment/userProfile.html  |  56 ++---
 11 files changed, 468 insertions(+), 324 deletions(-)

diff --git a/userManagment/templates/userManagment/apiAccess.html b/userManagment/templates/userManagment/apiAccess.html
index 0d226ffbd..30f4d80b8 100644
--- a/userManagment/templates/userManagment/apiAccess.html
+++ b/userManagment/templates/userManagment/apiAccess.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         .page-wrapper {
             background: transparent;
@@ -25,21 +25,21 @@
         .page-title {
             font-size: 28px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             margin-bottom: 8px;
         }
         .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;
         }
         .section-title {
             font-size: 18px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 25px;
             display: flex;
             align-items: center;
@@ -49,47 +49,49 @@
             content: '';
             width: 4px;
             height: 24px;
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             border-radius: 2px;
         }
         .info-box {
-            background: #f8f9ff;
-            border-left: 4px solid #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-left: 4px solid var(--accent-color, #5b5fcf);
             padding: 1.5rem;
             border-radius: 0 8px 8px 0;
             margin-bottom: 2rem;
         }
         .info-box h4 {
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             font-weight: 600;
             margin-bottom: 0.5rem;
         }
         .info-box p {
-            color: #4a5568;
+            color: var(--text-secondary, #4a5568);
             margin-bottom: 0;
         }
         .form-label {
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 600;
             margin-bottom: 0.5rem;
             display: block;
         }
         .form-control {
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 0.75rem 1rem;
             font-size: 1rem;
             transition: all 0.3s ease;
             width: 100%;
             box-sizing: border-box;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #2f3640);
         }
         .form-control:focus {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
             outline: none;
         }
         .btn-primary {
-            background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
             border: none;
             border-radius: 8px;
             padding: 0.75rem 2rem;
@@ -101,9 +103,10 @@
             display: inline-flex;
             align-items: center;
             gap: 8px;
+            color: white;
         }
         .btn-primary:hover {
-            background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
+            background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
         }
@@ -113,7 +116,7 @@
             margin-left: 10px;
         }
         .help-text {
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
             font-size: 0.875rem;
             margin-top: 0.25rem;
         }
@@ -125,25 +128,27 @@
             margin-left: 1rem;
         }
         .access-enabled {
-            background: #f0fdf4;
-            color: #166534;
+            background: var(--success-bg, #f0fdf4);
+            color: var(--success-text, #166534);
         }
         .access-disabled {
-            background: #fef2f2;
-            color: #991b1b;
+            background: var(--danger-bg, #fef2f2);
+            color: var(--danger-text, #991b1b);
         }
         .toggle-option {
             display: flex;
             align-items: center;
             padding: 1rem;
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             border-radius: 8px;
             margin-bottom: 0.5rem;
             cursor: pointer;
             transition: all 0.3s ease;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         .toggle-option:hover {
-            background: #e8e9ff;
+            background: var(--bg-hover, #e8e9ff);
+            border-color: var(--accent-color, #5b5fcf);
         }
         .toggle-option input[type="radio"] {
             margin-right: 0.75rem;
@@ -153,10 +158,13 @@
             font-size: 1.2rem;
         }
         .toggle-enable {
-            color: #10b981;
+            color: var(--success-text, #10b981);
         }
         .toggle-disable {
-            color: #ef4444;
+            color: var(--danger-text, #ef4444);
+        }
+        .text-muted {
+            color: var(--text-secondary, #8893a7);
         }
         @media (max-width: 768px) {
             .content-card {
diff --git a/userManagment/templates/userManagment/changeUserACL.html b/userManagment/templates/userManagment/changeUserACL.html
index cf1608812..2994382bb 100644
--- a/userManagment/templates/userManagment/changeUserACL.html
+++ b/userManagment/templates/userManagment/changeUserACL.html
@@ -7,66 +7,165 @@
 {% get_current_language as LANGUAGE_CODE %}
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
-<div class="container">
-<div id="page-title">
-   <h2>{% trans "Change User ACL" %}</h2>
-   <p>{% trans "This page can be used to change ACL for CyberPanel users." %}</p>
-</div>
+<style>
+    body {
+        background-color: var(--bg-primary, #f0f0ff);
+    }
+    .page-wrapper {
+        background: transparent;
+        padding: 20px;
+    }
+    .page-container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    .page-header {
+        margin-bottom: 30px;
+    }
+    .page-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: var(--text-heading, #2f3640);
+        margin-bottom: 8px;
+    }
+    .page-subtitle {
+        font-size: 14px;
+        color: var(--text-secondary, #8893a7);
+    }
+    .content-card {
+        background: var(--bg-secondary, white);
+        border-radius: 12px;
+        padding: 30px;
+        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: var(--text-primary, #2f3640);
+        margin-bottom: 25px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    .card-title::before {
+        content: '';
+        width: 4px;
+        height: 24px;
+        background: var(--accent-color, #5b5fcf);
+        border-radius: 2px;
+    }
+    .form-group {
+        margin-bottom: 20px;
+    }
+    .form-label {
+        display: block;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-secondary, #64748b);
+        margin-bottom: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    .form-control {
+        width: 100%;
+        padding: 10px 14px;
+        border: 1px solid var(--border-color, #e8e9ff);
+        border-radius: 8px;
+        font-size: 14px;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
+        transition: all 0.2s ease;
+    }
+    .form-control:hover {
+        border-color: var(--accent-color, #5b5fcf);
+    }
+    .form-control:focus {
+        outline: none;
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+    }
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-decoration: none;
+    }
+    .btn-primary {
+        background: var(--accent-color, #5b5fcf);
+        color: white;
+    }
+    .btn-primary:hover {
+        background: var(--accent-hover, #4a4fc4);
+        box-shadow: 0 4px 12px rgba(91,95,207,0.3);
+        transform: translateY(-1px);
+    }
+    .loading-icon {
+        width: 20px;
+        height: 20px;
+        margin-left: 10px;
+    }
+    @media (max-width: 768px) {
+        .content-card {
+            padding: 20px;
+        }
+    }
+</style>
 
-<div ng-controller="changeUserACLCTRL" class="panel">
-    <div class="panel-body">
-        <h3 class="content-box-header">
-            {% trans "Change User ACL" %} <img ng-hide="aclLoading" src="{% static 'images/loading.gif' %}">
-        </h3>
-        <div  class="example-box-wrapper">
+<div class="page-wrapper">
+    <div class="page-container">
+        <div class="page-header">
+            <h1 class="page-title">{% trans "Change User ACL" %}</h1>
+            <p class="page-subtitle">{% trans "This page can be used to change ACL for CyberPanel users." %}</p>
+        </div>
+        
+        <div ng-controller="changeUserACLCTRL" class="content-card">
+            <h2 class="card-title">
+                {% trans "Change User ACL" %}
+                <img class="loading-icon" ng-hide="aclLoading" src="{% static 'images/loading.gif' %}">
+            </h2>
+            
+            <form action="/" class="form-horizontal">
 
 
-            <form action="/" class="form-horizontal bordered-row panel-body">
-
-
-                 <div class="form-group">
-                    <label class="col-sm-3 control-label">{% trans "Select User" %} </label>
-                    <div class="col-sm-6">
-                        <select ng-model="selectedUser" class="form-control">
-                            {% for items in usersList %}
-                                <option>{{ items }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
+                <div class="form-group">
+                    <label class="form-label">{% trans "Select User" %}</label>
+                    <select ng-model="selectedUser" class="form-control">
+                        <option value="">-- {% trans "Choose a user" %} --</option>
+                        {% for items in usersList %}
+                            <option>{{ items }}</option>
+                        {% endfor %}
+                    </select>
                 </div>
 
                 <div class="form-group">
-                    <label class="col-sm-3 control-label">{% trans "Select ACL" %} </label>
-                    <div class="col-sm-6">
-                        <select ng-model="selectedACL" class="form-control">
-                            {% for items in aclNames %}
-                                <option>{{ items }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
+                    <label class="form-label">{% trans "Select ACL" %}</label>
+                    <select ng-model="selectedACL" class="form-control">
+                        <option value="">-- {% trans "Choose an ACL" %} --</option>
+                        {% for items in aclNames %}
+                            <option>{{ items }}</option>
+                        {% endfor %}
+                    </select>
                 </div>
 
-
-
-
                 <div ng-hide="deleteACLButton" class="form-group">
-                        <label class="col-sm-3 control-label"></label>
-                        <div class="col-sm-4">
-                             <button type="button" ng-click="changeACLFunc()" class="btn btn-primary btn-lg">{% trans "Change ACL" %}</button>
-
-                        </div>
+                    <button type="button" ng-click="changeACLFunc()" class="btn btn-primary">
+                        <i class="fas fa-save"></i>
+                        {% trans "Change ACL" %}
+                    </button>
                 </div>
-
             </form>
-
-
-
         </div>
     </div>
 </div>
 
 
-</div>
-
-
 {% endblock %}
diff --git a/userManagment/templates/userManagment/createACL.html b/userManagment/templates/userManagment/createACL.html
index b1f78f57f..6accafbd3 100644
--- a/userManagment/templates/userManagment/createACL.html
+++ b/userManagment/templates/userManagment/createACL.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         .page-wrapper {
             background: transparent;
@@ -20,20 +20,20 @@
             margin: 0 auto;
         }
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 2.5rem;
             box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             margin-bottom: 25px;
         }
         .section-title {
             font-size: 2rem;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 2.5rem;
             padding-bottom: 1rem;
-            border-bottom: 3px solid #5b5fcf;
+            border-bottom: 3px solid var(--accent-color, #5b5fcf);
             text-transform: uppercase;
             letter-spacing: 0.5px;
             text-align: center;
@@ -54,34 +54,37 @@
             margin-right: 0;
         }
         .form-label {
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 600;
             margin-bottom: 0.5rem;
             display: block;
         }
         .form-control {
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 0.75rem 1rem;
             font-size: 1rem;
             transition: all 0.3s ease;
             width: 100%;
             box-sizing: border-box;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #2f3640);
         }
         .form-control:focus {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
             outline: none;
         }
         .checkbox-wrapper {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             padding: 1rem;
             border-radius: 8px;
             margin-bottom: 1.5rem;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         .checkbox-wrapper label {
             font-weight: 500;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 0;
             cursor: pointer;
             display: block;
@@ -93,7 +96,7 @@
             cursor: pointer;
         }
         .btn-primary {
-            background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
             border: none;
             border-radius: 8px;
             padding: 0.75rem 2rem;
@@ -117,12 +120,14 @@
             border: none;
         }
         .alert-success {
-            background: rgba(16, 185, 129, 0.1);
-            color: #065f46;
+            background: var(--success-bg, rgba(16, 185, 129, 0.1));
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, rgba(16, 185, 129, 0.2));
         }
         .alert-danger {
-            background: rgba(239, 68, 68, 0.1);
-            color: #991b1b;
+            background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2));
         }
         @media (max-width: 768px) {
             .page-container {
diff --git a/userManagment/templates/userManagment/createUser.html b/userManagment/templates/userManagment/createUser.html
index 10a93aa4c..9de5aeea8 100644
--- a/userManagment/templates/userManagment/createUser.html
+++ b/userManagment/templates/userManagment/createUser.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         .page-wrapper {
             background: transparent;
@@ -20,20 +20,20 @@
             margin: 0 auto;
         }
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 2.5rem;
-            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;
         }
         .section-title {
             font-size: 2rem;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 2.5rem;
             padding-bottom: 1rem;
-            border-bottom: 3px solid #5b5fcf;
+            border-bottom: 3px solid var(--accent-color, #5b5fcf);
             text-transform: uppercase;
             letter-spacing: 0.5px;
             text-align: center;
@@ -58,24 +58,26 @@
         }
         
         .form-label {
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 600;
             margin-bottom: 0.5rem;
             display: block;
         }
         
         .form-control {
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 0.75rem 1rem;
             font-size: 1rem;
             transition: all 0.3s ease;
             width: 100%;
             box-sizing: border-box;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #2f3640);
         }
         
         .form-control:focus {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
             outline: none;
         }
@@ -98,8 +100,8 @@
         /* Windows-specific fixes */
         @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
             select.form-control {
-                color: #2f3640 !important;
-                background-color: white !important;
+                color: var(--text-primary, #2f3640) !important;
+                background-color: var(--bg-secondary, white) !important;
             }
         }
         
@@ -109,18 +111,18 @@
         }
         
         select.form-control option {
-            color: #2f3640;
-            background-color: white;
+            color: var(--text-primary, #2f3640);
+            background-color: var(--bg-secondary, white);
             padding: 8px;
         }
         
         select.form-control:focus {
-            color: #2f3640;
-            background-color: white;
+            color: var(--text-primary, #2f3640);
+            background-color: var(--bg-secondary, white);
         }
         
         .btn-primary {
-            background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
             border: none;
             border-radius: 8px;
             padding: 0.75rem 2rem;
@@ -134,13 +136,13 @@
         }
         
         .btn-primary:hover {
-            background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
+            background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
         }
         
         .btn-generate {
-            background: #10b981;
+            background: var(--success-text, #10b981);
             border: none;
             color: white;
             border-radius: 8px;
@@ -151,7 +153,7 @@
         }
         
         .btn-generate:hover {
-            background: #0ea271;
+            background: var(--success-text, #0ea271);
             transform: translateY(-2px);
         }
         
@@ -178,17 +180,17 @@
         }
         
         .alert-success {
-            background: rgba(16, 185, 129, 0.1);
-            color: #065f46;
+            background: var(--success-bg, rgba(16, 185, 129, 0.1));
+            color: var(--success-text, #065f46);
         }
         
         .alert-danger {
-            background: rgba(239, 68, 68, 0.1);
-            color: #991b1b;
+            background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+            color: var(--danger-text, #991b1b);
         }
         
         .error-text {
-            color: #ef4444;
+            color: var(--danger-text, #ef4444);
             font-size: 0.875rem;
             margin-top: 0.5rem;
         }
@@ -200,7 +202,7 @@
         }
         
         .help-text {
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
             font-size: 0.875rem;
             margin-top: 0.25rem;
         }
diff --git a/userManagment/templates/userManagment/deleteACL.html b/userManagment/templates/userManagment/deleteACL.html
index 60cbc60fe..a24f725d1 100644
--- a/userManagment/templates/userManagment/deleteACL.html
+++ b/userManagment/templates/userManagment/deleteACL.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,21 +77,21 @@
     .form-select {
         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-select:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-select:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -150,27 +150,27 @@
     }
     
     .alert-info {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
-        color: #1565c0;
+        background: var(--info-bg, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
+        color: var(--info-text, #1565c0);
     }
     
     .alert-warning {
-        background: #fff3e0;
-        border: 1px solid #ffe0b2;
-        color: #ef6c00;
+        background: var(--warning-bg, #fff3e0);
+        border: 1px solid var(--warning-border, #ffe0b2);
+        color: var(--warning-text, #ef6c00);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     /* Loading spinner */
@@ -179,7 +179,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
diff --git a/userManagment/templates/userManagment/deleteUser.html b/userManagment/templates/userManagment/deleteUser.html
index ece3cc6f1..4b5ba2de3 100644
--- a/userManagment/templates/userManagment/deleteUser.html
+++ b/userManagment/templates/userManagment/deleteUser.html
@@ -9,7 +9,7 @@
 
 <style>
     body {
-        background-color: #f0f0ff;
+        background-color: var(--bg-primary, #f0f0ff);
     }
     
     .page-header {
@@ -35,40 +35,42 @@
     }
     
     .form-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 2.5rem;
         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: 1.5rem;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 2rem;
         padding-bottom: 0.75rem;
-        border-bottom: 3px solid #ef4444;
+        border-bottom: 3px solid var(--danger-text, #ef4444);
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
     
     .form-label {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         margin-bottom: 0.5rem;
     }
     
     .form-control {
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 0.75rem 1rem;
         font-size: 1rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     .form-control:focus {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
         outline: none;
     }
@@ -117,43 +119,46 @@
     }
     
     .alert-success {
-        background: rgba(16, 185, 129, 0.1);
-        color: #065f46;
+        background: var(--success-bg, rgba(16, 185, 129, 0.1));
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, rgba(16, 185, 129, 0.2));
     }
     
     .alert-danger {
-        background: rgba(239, 68, 68, 0.1);
-        color: #991b1b;
+        background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2));
     }
     
     .alert-warning {
-        background: rgba(245, 158, 11, 0.1);
-        color: #92400e;
-        border-left: 4px solid #f59e0b;
+        background: var(--warning-bg, rgba(245, 158, 11, 0.1));
+        color: var(--warning-text, #92400e);
+        border-left: 4px solid var(--warning-text, #f59e0b);
+        border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.2));
     }
     
     .warning-icon {
-        color: #f59e0b;
+        color: var(--warning-text, #f59e0b);
         font-size: 1.2rem;
         margin-right: 0.5rem;
     }
     
     .help-text {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 0.875rem;
         margin-top: 0.25rem;
     }
     
     .delete-info {
-        background: #fff5f5;
-        border: 1px solid #fee2e2;
+        background: var(--danger-bg, #fff5f5);
+        border: 1px solid var(--danger-border, #fee2e2);
         border-radius: 8px;
         padding: 1.5rem;
         margin-bottom: 2rem;
     }
     
     .delete-info h4 {
-        color: #991b1b;
+        color: var(--danger-text, #991b1b);
         font-weight: 600;
         margin-bottom: 0.5rem;
     }
@@ -161,7 +166,7 @@
     .delete-info ul {
         margin: 0;
         padding-left: 1.5rem;
-        color: #7f1d1d;
+        color: var(--danger-text, #7f1d1d);
     }
     
     .delete-info ul li {
diff --git a/userManagment/templates/userManagment/listUsers.html b/userManagment/templates/userManagment/listUsers.html
index 4b41a9cfe..5fd47dc76 100644
--- a/userManagment/templates/userManagment/listUsers.html
+++ b/userManagment/templates/userManagment/listUsers.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         .page-wrapper {
             background: transparent;
@@ -20,23 +20,23 @@
             margin: 0 auto;
         }
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 2rem;
-            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;
         }
         .section-header {
             overflow: hidden;
             margin-bottom: 2rem;
             padding-bottom: 1rem;
-            border-bottom: 3px solid #5b5fcf;
+            border-bottom: 3px solid var(--accent-color, #5b5fcf);
         }
         .section-title {
             font-size: 2rem;
             font-weight: 700;
-            color: #1a1a2e;
+            color: var(--text-primary, #1a1a2e);
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin: 0;
@@ -47,7 +47,7 @@
             margin-top: 0.5rem;
         }
         .btn-primary {
-            background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
             border: none;
             border-radius: 8px;
             padding: 0.625rem 1.5rem;
@@ -61,7 +61,7 @@
             text-decoration: none;
         }
         .btn-primary:hover {
-            background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
+            background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
             text-decoration: none;
@@ -73,31 +73,31 @@
             border-collapse: collapse;
         }
         .table thead th {
-            background: #f8f9ff;
-            color: #1a1a2e;
+            background: var(--bg-hover, #f8f9ff);
+            color: var(--text-primary, #1a1a2e);
             font-weight: 700;
             text-transform: uppercase;
             font-size: 0.875rem;
             letter-spacing: 0.75px;
             padding: 1.25rem 1rem;
             border: none;
-            border-bottom: 2px solid #e8e9ff;
+            border-bottom: 2px solid var(--border-color, #e8e9ff);
             text-align: left;
         }
         .table tbody td {
             padding: 1.25rem 1rem;
             vertical-align: middle;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-size: 0.9375rem;
-            border-bottom: 1px solid #f0f0ff;
+            border-bottom: 1px solid var(--border-color, #f0f0ff);
             line-height: 1.5;
         }
         .table tbody td strong {
-            color: #1a1a2e;
+            color: var(--text-primary, #1a1a2e);
             font-weight: 600;
         }
         .table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
         }
         .btn-action {
             padding: 0.5rem 0.875rem;
@@ -113,45 +113,45 @@
             letter-spacing: 0.3px;
         }
         .btn-suspend {
-            color: #ef4444;
-            background: rgba(239, 68, 68, 0.1);
+            color: var(--danger-text, #ef4444);
+            background: var(--danger-bg, rgba(239, 68, 68, 0.1));
             border-color: rgba(239, 68, 68, 0.2);
         }
         .btn-suspend:hover {
-            background: #ef4444;
+            background: var(--danger-text, #ef4444);
             color: white;
             transform: translateY(-2px);
             text-decoration: none;
         }
         .btn-activate {
-            color: #10b981;
-            background: rgba(16, 185, 129, 0.1);
+            color: var(--success-text, #10b981);
+            background: var(--success-bg, rgba(16, 185, 129, 0.1));
             border-color: rgba(16, 185, 129, 0.2);
         }
         .btn-activate:hover {
-            background: #10b981;
+            background: var(--success-text, #10b981);
             color: white;
             transform: translateY(-2px);
             text-decoration: none;
         }
         .btn-edit {
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             background: rgba(91, 95, 207, 0.1);
             border-color: rgba(91, 95, 207, 0.2);
         }
         .btn-edit:hover {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
             transform: translateY(-2px);
             text-decoration: none;
         }
         .btn-delete {
-            color: #ef4444;
-            background: rgba(239, 68, 68, 0.1);
+            color: var(--danger-text, #ef4444);
+            background: var(--danger-bg, rgba(239, 68, 68, 0.1));
             border-color: rgba(239, 68, 68, 0.2);
         }
         .btn-delete:hover {
-            background: #ef4444;
+            background: var(--danger-text, #ef4444);
             color: white;
             transform: translateY(-2px);
             text-decoration: none;
@@ -164,13 +164,13 @@
             letter-spacing: 0.3px;
         }
         .state-active {
-            background: rgba(16, 185, 129, 0.15);
-            color: #065f46;
+            background: var(--success-bg, rgba(16, 185, 129, 0.15));
+            color: var(--success-text, #065f46);
             border: 1px solid rgba(16, 185, 129, 0.2);
         }
         .state-suspended {
-            background: rgba(239, 68, 68, 0.15);
-            color: #991b1b;
+            background: var(--danger-bg, rgba(239, 68, 68, 0.15));
+            color: var(--danger-text, #991b1b);
             border: 1px solid rgba(239, 68, 68, 0.2);
         }
         .loading-icon {
@@ -180,24 +180,25 @@
         }
         .modal-content {
             border-radius: 12px;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
+            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: 1.5rem;
         }
         .modal-title {
             font-weight: 700;
-            color: #1a1a2e;
+            color: var(--text-primary, #1a1a2e);
             font-size: 1.25rem;
         }
         .modal-body {
             padding: 2rem;
         }
         .form-label {
-            color: #1a1a2e;
+            color: var(--text-primary, #1a1a2e);
             font-weight: 600;
             font-size: 0.9375rem;
             margin-bottom: 0.5rem;
@@ -205,43 +206,44 @@
             letter-spacing: 0.3px;
         }
         .form-control {
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 0.875rem 1rem;
             font-size: 1rem;
             transition: all 0.3s ease;
             width: 100%;
             box-sizing: border-box;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
+            background: var(--bg-secondary, white);
             line-height: 1.5;
         }
         .form-control:focus {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
             outline: none;
         }
         .danger-text {
-            color: #dc2626;
+            color: var(--danger-text, #dc2626);
             font-weight: 600;
             font-size: 1rem;
             margin-bottom: 1rem;
             line-height: 1.5;
         }
         .btn-danger {
-            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            background: linear-gradient(135deg, var(--danger-text, #ef4444) 0%, var(--danger-text, #dc2626) 100%);
             border: none;
             color: white;
         }
         .btn-danger:hover {
-            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+            background: linear-gradient(135deg, var(--danger-text, #dc2626) 0%, var(--danger-text, #b91c1c) 100%);
         }
         .btn-default {
-            background: #e5e7eb;
+            background: var(--bg-hover, #e5e7eb);
             border: none;
-            color: #374151;
+            color: var(--text-secondary, #374151);
         }
         .btn-default:hover {
-            background: #d1d5db;
+            background: var(--bg-hover, #d1d5db);
         }
         @media (max-width: 768px) {
             .page-container {
diff --git a/userManagment/templates/userManagment/modifyACL.html b/userManagment/templates/userManagment/modifyACL.html
index 3a7ed6644..41504c84f 100644
--- a/userManagment/templates/userManagment/modifyACL.html
+++ b/userManagment/templates/userManagment/modifyACL.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -68,7 +68,7 @@
         display: block;
         font-size: 13px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -77,21 +77,21 @@
     .form-select {
         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-select:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .form-select:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
@@ -111,7 +111,7 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
@@ -136,8 +136,8 @@
     }
     
     .permission-category {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
     }
@@ -145,7 +145,7 @@
     .category-title {
         font-size: 14px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 15px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -155,7 +155,7 @@
     }
     
     .category-title i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-size: 16px;
     }
     
@@ -171,16 +171,16 @@
         align-items: center;
         gap: 10px;
         padding: 8px 12px;
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 6px;
         transition: all 0.2s ease;
         cursor: pointer;
     }
     
     .checkbox-wrapper:hover {
-        border-color: #5b5fcf;
-        background: #f8f9ff;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .checkbox-wrapper input[type="checkbox"] {
@@ -188,12 +188,12 @@
         height: 18px;
         border-radius: 4px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-color, #5b5fcf);
     }
     
     .checkbox-label {
         font-size: 13px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
         cursor: pointer;
         user-select: none;
@@ -202,7 +202,7 @@
     
     /* Master toggle */
     .master-toggle {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
         padding: 12px 20px;
         border-radius: 8px;
@@ -235,21 +235,21 @@
     }
     
     .alert-info {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
-        color: #1565c0;
+        background: var(--info-bg, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
+        color: var(--info-text, #1565c0);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     /* Loading spinner */
@@ -258,7 +258,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -289,7 +289,7 @@
     .save-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         justify-content: flex-end;
         gap: 12px;
diff --git a/userManagment/templates/userManagment/modifyUser.html b/userManagment/templates/userManagment/modifyUser.html
index eb3cb040e..b924f46fc 100644
--- a/userManagment/templates/userManagment/modifyUser.html
+++ b/userManagment/templates/userManagment/modifyUser.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         .page-wrapper {
             background: transparent;
@@ -20,20 +20,20 @@
             margin: 0 auto;
         }
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 2.5rem;
-            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;
         }
         .section-title {
             font-size: 2rem;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 2.5rem;
             padding-bottom: 1rem;
-            border-bottom: 3px solid #5b5fcf;
+            border-bottom: 3px solid var(--accent-color, #5b5fcf);
             text-transform: uppercase;
             letter-spacing: 0.5px;
             text-align: center;
@@ -54,27 +54,29 @@
             margin-right: 0;
         }
         .form-label {
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 600;
             margin-bottom: 0.5rem;
             display: block;
         }
         .form-control {
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 0.75rem 1rem;
             font-size: 1rem;
             transition: all 0.3s ease;
             width: 100%;
             box-sizing: border-box;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, #2f3640);
         }
         .form-control:focus {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
             outline: none;
         }
         .btn-primary {
-            background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+            background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
             border: none;
             border-radius: 8px;
             padding: 0.75rem 2rem;
@@ -87,12 +89,12 @@
             cursor: pointer;
         }
         .btn-primary:hover {
-            background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
+            background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
         }
         .btn-generate {
-            background: #10b981;
+            background: var(--success-text, #10b981);
             border: none;
             color: white;
             border-radius: 8px;
@@ -102,7 +104,7 @@
             cursor: pointer;
         }
         .btn-generate:hover {
-            background: #0ea271;
+            background: var(--success-text, #0ea271);
             transform: translateY(-2px);
         }
         .btn-row {
@@ -124,15 +126,15 @@
             border: none;
         }
         .alert-success {
-            background: rgba(16, 185, 129, 0.1);
-            color: #065f46;
+            background: var(--success-bg, rgba(16, 185, 129, 0.1));
+            color: var(--success-text, #065f46);
         }
         .alert-danger {
-            background: rgba(239, 68, 68, 0.1);
-            color: #991b1b;
+            background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+            color: var(--danger-text, #991b1b);
         }
         .error-text {
-            color: #ef4444;
+            color: var(--danger-text, #ef4444);
             font-size: 0.875rem;
             margin-top: 0.5rem;
         }
@@ -142,27 +144,28 @@
             margin-left: 10px;
         }
         .help-text {
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
             font-size: 0.875rem;
             margin-top: 0.25rem;
         }
         .security-info {
-            background: #f8f9ff;
-            border-left: 4px solid #5b5fcf;
+            background: var(--bg-hover, #f8f9ff);
+            border-left: 4px solid var(--accent-color, #5b5fcf);
             padding: 0.75rem 1rem;
             border-radius: 0 8px 8px 0;
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             font-weight: 600;
         }
         .checkbox-wrapper {
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             padding: 1rem;
             border-radius: 8px;
             margin-top: 0.5rem;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         .checkbox-wrapper label {
             font-weight: 500;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 0;
             cursor: pointer;
         }
@@ -174,9 +177,27 @@
         }
         #qr {
             margin-top: 1rem;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 10px;
+            background: var(--bg-secondary, white);
+        }
+        .text-muted {
+            color: var(--text-secondary, #8893a7);
+        }
+        .btn-outline-secondary {
+            background: transparent;
+            border: 1px solid var(--border-color, #e8e9ff);
+            color: var(--text-secondary, #8893a7);
+            padding: 0.75rem 1rem;
+            border-radius: 0 8px 8px 0;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .btn-outline-secondary:hover {
+            background: var(--bg-hover, #f8f9ff);
+            color: var(--accent-color, #5b5fcf);
+            border-color: var(--accent-color, #5b5fcf);
         }
         @media (max-width: 768px) {
             .page-container {
diff --git a/userManagment/templates/userManagment/resellerCenter.html b/userManagment/templates/userManagment/resellerCenter.html
index d284133ce..e1d173110 100644
--- a/userManagment/templates/userManagment/resellerCenter.html
+++ b/userManagment/templates/userManagment/resellerCenter.html
@@ -9,7 +9,7 @@
 
 <style>
     body {
-        background-color: #f0f0ff;
+        background-color: var(--bg-primary, #f0f0ff);
     }
     .page-wrapper {
         background: transparent;
@@ -22,17 +22,17 @@
     
     /* 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: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -41,7 +41,7 @@
     .page-header .icon {
         width: 48px;
         height: 48px;
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         border-radius: 12px;
         display: flex;
         align-items: center;
@@ -52,7 +52,7 @@
     }
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
@@ -64,11 +64,11 @@
         margin-bottom: 25px;
     }
     .stat-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         align-items: center;
         gap: 15px;
@@ -90,25 +90,25 @@
     }
     .stat-icon.users {
         background: rgba(88,86,214,0.1);
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
     }
     .stat-icon.sites {
-        background: rgba(16,185,129,0.1);
-        color: #10b981;
+        background: var(--success-bg, rgba(16,185,129,0.1));
+        color: var(--success-text, #10b981);
     }
     .stat-icon.resellers {
-        background: rgba(251,146,60,0.1);
-        color: #fb923c;
+        background: var(--warning-bg, rgba(251,146,60,0.1));
+        color: var(--warning-text, #fb923c);
     }
     .stat-content h3 {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0;
     }
     .stat-content p {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
@@ -120,11 +120,11 @@
     }
     
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .content-card.full-width {
@@ -134,7 +134,7 @@
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -144,7 +144,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         border-radius: 2px;
     }
     
@@ -156,11 +156,12 @@
         margin-bottom: 25px;
     }
     .feature-item {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
         padding: 15px;
         text-align: center;
         transition: all 0.3s ease;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     .feature-item:hover {
         background: #e8e6ff;
@@ -168,19 +169,19 @@
     }
     .feature-item i {
         font-size: 28px;
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
         margin-bottom: 10px;
         display: block;
     }
     .feature-item h4 {
         font-size: 14px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 5px 0;
     }
     .feature-item p {
         font-size: 12px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
@@ -189,30 +190,31 @@
         margin-bottom: 20px;
     }
     .form-label {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
         margin-bottom: 8px;
         display: block;
         font-size: 14px;
     }
     .form-control {
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 12px 16px;
         font-size: 15px;
         transition: all 0.3s ease;
         width: 100%;
         box-sizing: border-box;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--text-primary, #2f3640);
     }
     .form-control:focus {
-        border-color: #5856d6;
+        border-color: var(--accent-color, #5856d6);
         box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
         outline: none;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     .help-text {
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
         font-size: 13px;
         margin-top: 5px;
         display: flex;
@@ -225,7 +227,7 @@
     
     /* Buttons */
     .btn-primary {
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         border: none;
         border-radius: 8px;
         padding: 12px 28px;
@@ -253,13 +255,13 @@
         margin-bottom: 20px;
     }
     .quick-action {
-        background: #f8f9ff;
-        border: 2px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 8px 16px;
         font-size: 13px;
         font-weight: 600;
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
         cursor: pointer;
         transition: all 0.3s ease;
         display: inline-flex;
@@ -267,9 +269,9 @@
         gap: 6px;
     }
     .quick-action:hover {
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         color: white;
-        border-color: #5856d6;
+        border-color: var(--accent-color, #5856d6);
     }
     
     /* Loading State */
diff --git a/userManagment/templates/userManagment/userProfile.html b/userManagment/templates/userManagment/userProfile.html
index f3839b150..aff32228e 100644
--- a/userManagment/templates/userManagment/userProfile.html
+++ b/userManagment/templates/userManagment/userProfile.html
@@ -9,7 +9,7 @@
 
 <style>
     body {
-        background-color: #f0f0ff;
+        background-color: var(--bg-primary, #f0f0ff);
     }
     
     .page-wrapper {
@@ -29,28 +29,28 @@
     .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);
     }
     
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -61,12 +61,12 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .profile-intro {
-        background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
+        background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
         color: white;
         padding: 2.5rem;
         border-radius: 12px 12px 0 0;
@@ -79,7 +79,7 @@
     .profile-avatar {
         width: 80px;
         height: 80px;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 50%;
         display: inline-block;
         float: left;
@@ -91,7 +91,7 @@
     
     .profile-avatar i {
         font-size: 32px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         vertical-align: middle;
         line-height: 1;
     }
@@ -125,17 +125,17 @@
     .info-section h3 {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 1.5rem;
         padding-bottom: 0.75rem;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-color, #e8e9ff);
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
     
     .info-row {
         padding: 1rem 0;
-        border-bottom: 1px solid #f0f0ff;
+        border-bottom: 1px solid var(--border-color, #f0f0ff);
         overflow: hidden;
     }
     
@@ -146,7 +146,7 @@
     .info-label {
         float: left;
         width: 200px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-weight: 600;
         font-size: 13px;
         line-height: 1.5;
@@ -156,7 +156,7 @@
     
     .info-value {
         margin-left: 220px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
         font-size: 14px;
         line-height: 1.5;
@@ -171,15 +171,15 @@
     }
     
     .status-active {
-        background: #f0fdf4;
-        border: 1px solid #bbf7d0;
-        color: #166534;
+        background: var(--success-bg, #f0fdf4);
+        border: 1px solid var(--success-border, #bbf7d0);
+        color: var(--success-text, #166534);
     }
     
     .limit-badge {
-        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);
     }
     
     .info-icon {
@@ -187,7 +187,7 @@
         height: 20px;
         display: inline-block;
         margin-right: 0.5rem;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         text-align: center;
     }
     
@@ -203,11 +203,11 @@
     }
     
     .stat-card {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         padding: 1.5rem;
         border-radius: 8px;
         text-align: center;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         transition: all 0.3s ease;
         float: left;
         width: 30%;
@@ -226,19 +226,19 @@
     
     .stat-icon {
         font-size: 2rem;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         margin-bottom: 0.5rem;
     }
     
     .stat-value {
         font-size: 1.8rem;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 0.25rem;
     }
     
     .stat-label {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 13px;
         text-transform: uppercase;
         letter-spacing: 0.5px;