From 6f8ddf05b30eb54ae5e548e57db31408bbbb5077 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 02:13:59 +0500
Subject: [PATCH] email marketing pages

---
 .idea/workspace.xml                           |  13 +-
 .../emailMarketing/composeMessages.html       |   4 +-
 .../emailMarketing/configureVerify.html       |   4 +-
 .../emailMarketing/createEmailList.html       |   6 +-
 .../emailMarketing/emailMarketing.html        |   6 +-
 .../templates/emailMarketing/manageLists.html |  18 +-
 .../emailMarketing/manageSMTPHosts.html       |   6 +-
 .../templates/emailMarketing/sendEmails.html  |  10 +-
 .../templates/emailMarketing/website.html     | 166 +++++++++---------
 .../templates/emailPremium/SpamAssassin.html  |  68 +++----
 .../templates/emailPremium/mailQueue.html     |  80 ++++-----
 11 files changed, 194 insertions(+), 187 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 9a76c4bf9..380db721c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,16 @@
   <component name="ChangeListManager">
     <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/composeMessages.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/composeMessages.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/configureVerify.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/configureVerify.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/createEmailList.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/createEmailList.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/emailMarketing.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/emailMarketing.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageLists.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageLists.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageSMTPHosts.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageSMTPHosts.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/sendEmails.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/sendEmails.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/website.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/website.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/SpamAssassin.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/SpamAssassin.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/mailQueue.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/mailQueue.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/emailMarketing/templates/emailMarketing/composeMessages.html b/emailMarketing/templates/emailMarketing/composeMessages.html
index 4c4ec015d..8c6fae014 100644
--- a/emailMarketing/templates/emailMarketing/composeMessages.html
+++ b/emailMarketing/templates/emailMarketing/composeMessages.html
@@ -13,8 +13,8 @@
    <h2>{% trans "Compose Email Message" %}</h2>
    <p>{% trans "On this page you can compose email message to be sent out later." %}</p>
 </div>
-<div ng-controller="composeMessageCTRL" class="panel">
-    <div class="panel-body">
+<div ng-controller="composeMessageCTRL" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
         <h3 class="title-hero">
             {% trans "Compose Email Message" %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
         </h3>
diff --git a/emailMarketing/templates/emailMarketing/configureVerify.html b/emailMarketing/templates/emailMarketing/configureVerify.html
index 25d4fd002..3c33bc0d3 100644
--- a/emailMarketing/templates/emailMarketing/configureVerify.html
+++ b/emailMarketing/templates/emailMarketing/configureVerify.html
@@ -13,8 +13,8 @@
             <h2>{% trans "Configure Email Verification" %}</h2>
             <p>{% trans "On this page you can configure parameters regarding how email verification is performed for " %}<span id="domainName">{{ domain }}</span></p>
         </div>
-        <div ng-controller="configureVerify" class="panel">
-            <div class="panel-body">
+        <div ng-controller="configureVerify" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+            <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                 <h3 class="title-hero">
                     {% trans "Compose Email Message" %} <img ng-hide="cyberPanelLoading"
                                                              src="{% static 'images/loading.gif' %}">
diff --git a/emailMarketing/templates/emailMarketing/createEmailList.html b/emailMarketing/templates/emailMarketing/createEmailList.html
index 863afa4fe..17e6f6d61 100644
--- a/emailMarketing/templates/emailMarketing/createEmailList.html
+++ b/emailMarketing/templates/emailMarketing/createEmailList.html
@@ -13,8 +13,8 @@
    <h2>{% trans "Create Email List" %} - <span id="domainNamePage">{{ domain }}</span> </h2>
    <p>{% trans "Create email list, to send out news letters and marketing emails." %}</p>
 </div>
-<div class="panel">
-    <div class="panel-body">
+<div class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
         <h3 class="title-hero">
             {% trans "Create Email List" %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
         </h3>
@@ -47,7 +47,7 @@
                 <div ng-hide="installationProgress" class="form-group">
                     <label class="col-sm-2 control-label"></label>
                     <div class="col-sm-7">
-                            <div class="alert alert-success text-center">
+                            <div class="alert alert-success text-center" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <h2>{$ currentStatus $}</h2>
                             </div>
                     </div>
diff --git a/emailMarketing/templates/emailMarketing/emailMarketing.html b/emailMarketing/templates/emailMarketing/emailMarketing.html
index 5edf2d24b..e2ba1970b 100644
--- a/emailMarketing/templates/emailMarketing/emailMarketing.html
+++ b/emailMarketing/templates/emailMarketing/emailMarketing.html
@@ -15,8 +15,8 @@
        <p>{% trans "Select users to Enable/Disable Email Marketing feature!" %}</p>
     </div>
 
-<div ng-controller="emailMarketing" class="panel">
-    <div class="panel-body">
+<div ng-controller="emailMarketing" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
     <h3 class="content-box-header">
             {% trans "Email Marketing" %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
@@ -37,7 +37,7 @@
     {% else %}
         <div class="example-box-wrapper">
 
-                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="datatable-example">
+                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="datatable-example" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                 <thead>
                 <tr>
                     <th>{% trans 'ID' %}</th>
diff --git a/emailMarketing/templates/emailMarketing/manageLists.html b/emailMarketing/templates/emailMarketing/manageLists.html
index b9db0a947..541e0e301 100644
--- a/emailMarketing/templates/emailMarketing/manageLists.html
+++ b/emailMarketing/templates/emailMarketing/manageLists.html
@@ -13,8 +13,8 @@
             <h2>{% trans "Manage Email Lists" %} - <span id="domainNamePage">{{ domain }}</span></h2>
             <p>{% trans "On this page you can manage your email lists (Delete, Verify, Add More Emails)." %}</p>
         </div>
-        <div ng-controller="manageEmailLists" class="panel">
-            <div class="panel-body">
+        <div ng-controller="manageEmailLists" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+            <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                 <h3 class="title-hero">
                     {% trans "Manage Email Lists" %} <img ng-hide="cyberPanelLoading"
                                                           src="{% static 'images/loading.gif' %}">
@@ -45,7 +45,7 @@
                                     <div class="modal fade" id="deleteList" tabindex="-1" role="dialog"
                                          aria-labelledby="myModalLabel" aria-hidden="true">
                                         <div class="modal-dialog">
-                                            <div class="modal-content">
+                                            <div class="modal-content" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <div class="modal-header">
                                                     <button type="button" class="close" data-dismiss="modal"
                                                             aria-hidden="true">&times;
@@ -83,7 +83,7 @@
                                     <div class="modal fade" id="verificationLogs" tabindex="-1" role="dialog"
                                          aria-labelledby="myModalLabel" aria-hidden="true">
                                         <div class="modal-dialog modal-lg">
-                                            <div class="modal-content">
+                                            <div class="modal-content" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <div class="modal-header">
                                                     <button type="button" class="close" data-dismiss="modal"
                                                             aria-hidden="true">&times;
@@ -97,7 +97,7 @@
 
                                                     <div ng-hide="currentRecords" class="form-group">
 
-                                                        <table style="margin: 0px; padding-bottom: 2%" class="table">
+                                                        <table style="margin: 0px; padding-bottom: 2%; background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);" class="table">
                                                             <thead>
                                                             <tr>
                                                                 <th>{% trans "Total Emails" %}</th>
@@ -132,7 +132,7 @@
 
                                                         <div class="col-sm-12">
 
-                                                            <table style="margin: 0px" class="table">
+                                                            <table style="margin: 0px; background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);" class="table">
                                                                 <thead>
                                                                 <tr>
                                                                     <th>{% trans "Status" %}</th>
@@ -211,7 +211,7 @@
                         <div ng-hide="installationProgress" class="form-group">
                             <label class="col-sm-2 control-label"></label>
                             <div class="col-sm-7">
-                                <div class="alert alert-success text-center">
+                                <div class="alert alert-success text-center" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                     <h2>{$ currentStatus $}</h2>
                                 </div>
                             </div>
@@ -232,7 +232,7 @@
                         <div ng-hide="verificationStatus" class="form-group">
                             <label class="col-sm-2 control-label"></label>
                             <div class="col-sm-7">
-                                <div class="alert alert-success text-center">
+                                <div class="alert alert-success text-center" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                     <h2>{$ currentStatusVerification $}</h2>
                                 </div>
                             </div>
@@ -260,7 +260,7 @@
 
                             <div class="col-sm-12">
 
-                                <table class="table">
+                                <table class="table" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                     <thead>
                                     <tr>
                                         <th>{% trans "ID" %}</th>
diff --git a/emailMarketing/templates/emailMarketing/manageSMTPHosts.html b/emailMarketing/templates/emailMarketing/manageSMTPHosts.html
index c90d4ae04..2b94ddf05 100644
--- a/emailMarketing/templates/emailMarketing/manageSMTPHosts.html
+++ b/emailMarketing/templates/emailMarketing/manageSMTPHosts.html
@@ -13,8 +13,8 @@
    <h2>{% trans "Manage SMTP Hosts" %}</h2>
    <p>{% trans "On this page you can manage STMP Host. (SMTP hosts are used to send emails)" %}</p>
 </div>
-<div ng-controller="manageSMTPHostsCTRL" class="panel">
-    <div class="panel-body">
+<div ng-controller="manageSMTPHostsCTRL" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
         <h3 class="title-hero">
             {% trans "Manage SMTP Hosts" %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
         </h3>
@@ -68,7 +68,7 @@
 
                     <div  class="col-sm-12">
 
-                        <table class="table">
+                        <table class="table" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                             <thead>
                             <tr>
                                 <th>{% trans "ID" %}</th>
diff --git a/emailMarketing/templates/emailMarketing/sendEmails.html b/emailMarketing/templates/emailMarketing/sendEmails.html
index 67d19cfff..dee7c06dc 100644
--- a/emailMarketing/templates/emailMarketing/sendEmails.html
+++ b/emailMarketing/templates/emailMarketing/sendEmails.html
@@ -13,8 +13,8 @@
    <h2>{% trans "Send Emails" %}</h2>
    <p>{% trans "On this page you can send emails to the lists you created using SMTP Hosts." %}</p>
 </div>
-<div ng-controller="sendEmailsCTRL" class="panel">
-    <div class="panel-body">
+<div ng-controller="sendEmailsCTRL" class="panel" style="background: var(--bg-primary, white); border-color: var(--border-color, #ddd);">
+    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
         <h3 class="title-hero">
             {% trans "Send Emails" %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
         </h3>
@@ -42,7 +42,7 @@
                          <!--- Delete Template --->
                             <div class="modal fade" id="deleteTemplate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content">
+                                    <div class="modal-content" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <div class="modal-header">
                                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                             <h4 class="modal-title">{% trans "You are doing to delete this template.." %} <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}"></h4>
@@ -123,7 +123,7 @@
                 <div ng-hide="jobStatus" class="form-group">
                     <label class="col-sm-2 control-label"></label>
                     <div class="col-sm-7">
-                            <div class="alert alert-success text-center">
+                            <div class="alert alert-success text-center" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <h2>{$ currentStatus $}</h2>
                             </div>
                     </div>
@@ -145,7 +145,7 @@
 
                     <div  class="col-sm-12">
 
-                        <table class="table">
+                        <table class="table" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                             <thead>
                             <tr>
                                 <th>{% trans "Job ID" %}</th>
diff --git a/emailMarketing/templates/emailMarketing/website.html b/emailMarketing/templates/emailMarketing/website.html
index 54b00a4e6..212453cdb 100644
--- a/emailMarketing/templates/emailMarketing/website.html
+++ b/emailMarketing/templates/emailMarketing/website.html
@@ -22,18 +22,18 @@
 
             <div class="example-box-wrapper">
 
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
 
                     <h3 class="content-box-header bg-blue">
                         {% trans "Resource Usage" %} <img ng-hide="domainLoading" src="/static/images/loading.gif">
                     </h3>
 
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                         <div class="row">
 
                             <div class="col-md-6">
-                                <table class="table table-bordered">
+                                <table class="table table-bordered" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                     <thead>
                                     <tr>
                                         <th>{% trans "Resource" %}</th>
@@ -71,13 +71,13 @@
                             </div>
 
                             <div class="col-md-6">
-                                <div class="panel">
-                                    <div class="panel-body">
+                                <div class="panel" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
+                                    <div class="panel-body" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                                         <div class="example-box-wrapper">
                                             <h3 class="title-hero">
                                                 {% trans "Disk Usage" %}
                                             </h3>
-                                            <div class="progressbar" data-value="{{ diskUsage }}">
+                                            <div class="progressbar" style="background: var(--bg-secondary, #f8f9ff); border-color: var(--border-color, #ddd);" data-value="{{ diskUsage }}">
                                                 <div class="progressbar-value bg-primary">
                                                     <div class="progress-overlay"></div>
                                                     <div class="progress-label">{{ diskUsage }}%</div>
@@ -88,7 +88,7 @@
                                             <h3 class="title-hero">
                                                 {% trans "Bandwidth Usage" %}
                                             </h3>
-                                            <div class="progressbar" data-value="{{ bwUsage }}">
+                                            <div class="progressbar" style="background: var(--bg-secondary, #f8f9ff); border-color: var(--border-color, #ddd);" data-value="{{ bwUsage }}">
                                                 <div class="progressbar-value bg-primary">
                                                     <div class="progress-overlay"></div>
                                                     <div class="progress-label">{{ bwUsage }}%</div>
@@ -112,12 +112,12 @@
 
             <div class="example-box-wrapper">
 
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
                     <h3 class="content-box-header bg-blue">
                         {% trans "Logs" %} <img ng-hide="logFileLoading" src="/static/images/loading.gif">
                     </h3>
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                         <div class="row">
 
                             <div class="col-md-6" style="margin-bottom: 2%;">
@@ -144,20 +144,20 @@
 
                             <div class="col-md-12">
 
-                                <form ng-hide="hideLogs" class="form-horizontal bordered-row">
+                                <form ng-hide="hideLogs" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
-                                    <div ng-hide="logsFeteched" class="alert alert-success">
+                                    <div ng-hide="logsFeteched" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Logs Fetched" %}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotFetchLogs" class="alert alert-danger">
+                                    <div ng-hide="couldNotFetchLogs" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not fetch logs, see the logs file through command line. Error message:" %}
                                             {$ errorMessage $}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                    <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                     </div>
 
@@ -166,11 +166,11 @@
 
                                         <div class="col-sm-3">
                                             <input placeholder="Search..." ng-model="logSearch" name="dom" type="text"
-                                                   class="form-control" ng-model="domainNameCreate" required>
+                                                   class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);" ng-model="domainNameCreate" required>
                                         </div>
 
                                         <div class="col-sm-2">
-                                            <input placeholder="Page Number" type="number" class="form-control"
+                                            <input placeholder="Page Number" type="number" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"
                                                    ng-model="pageNumber" required>
                                         </div>
 
@@ -185,7 +185,7 @@
                                             <a ng-click="hidelogsbtn()" href=""><img src="/static/images/close-32.png"></a>
                                         </div>
                                         <div class="col-sm-12">
-                                            <table class="table">
+                                            <table class="table" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <thead>
                                                 <tr>
                                                     <th>Domain</th>
@@ -212,7 +212,7 @@
                                     <div ng-hide="hideErrorLogs" class="form-group">
 
                                         <div class="col-sm-2">
-                                            <input placeholder="Page Number" type="number" class="form-control"
+                                            <input placeholder="Page Number" type="number" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"
                                                    ng-model="errorPageNumber" required>
                                         </div>
 
@@ -230,7 +230,7 @@
 
                                         <div class="col-sm-12">
                                             <textarea ng-model="errorLogsData" rows="25"
-                                                      class="form-control"></textarea>
+                                                      class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"></textarea>
                                         </div>
                                     </div>
 
@@ -248,13 +248,13 @@
 
 
             <div class="example-box-wrapper">
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
 
                     <h3 class="content-box-header bg-blue">
                         {% trans "Domains" %} <img ng-hide="domainLoading" src="/static/images/loading.gif">
                     </h3>
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
                         <div class="row">
 
@@ -311,13 +311,13 @@
                             <!---------- HTML For creating domains --------------->
                             <div class="col-md-12">
                                 <form id="domainCreationForm" name="websiteCreationForm" action="/"
-                                      class="form-horizontal bordered-row">
+                                      class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
 
                                     <div ng-hide="installationDetailsForm" class="form-group">
                                         <label class="col-sm-3 control-label">{% trans "Domain Name" %}</label>
                                         <div class="col-sm-6">
-                                            <input name="dom" type="text" class="form-control"
+                                            <input name="dom" type="text" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"
                                                    ng-model="domainNameCreate" required>
                                         </div>
                                         <div style="margin-bottom: 1%;" class=" col-sm-1">
@@ -330,7 +330,7 @@
                                         <label class="col-sm-3 control-label">{% trans "Path" %}</label>
                                         <div class="col-sm-6">
                                             <input placeholder="{% trans 'This path is relative to: ' %}{$ masterDomain $}. {% trans 'Leave empty to set default.' %}"
-                                                   type="text" class="form-control" ng-model="docRootPath" required>
+                                                   type="text" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);" ng-model="docRootPath" required>
                                         </div>
                                         <div ng-show="websiteCreationForm.dom.$error.pattern"
                                              class="current-pack">{% trans "Invalid Domain (Note: You don't need to add 'http' or 'https')" %}</div>
@@ -340,7 +340,7 @@
                                     <div ng-hide="installationDetailsForm" class="form-group">
                                         <label class="col-sm-3 control-label">{% trans "Select PHP" %}</label>
                                         <div class="col-sm-6">
-                                            <select ng-model="phpSelection" class="form-control">
+                                            <select ng-model="phpSelection" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 {% for php in phps %}
                                                     <option>{{ php }}</option>
                                                 {% endfor %}
@@ -353,7 +353,7 @@
                                          class="form-group">
                                         <label class="col-sm-3 control-label">{% trans "Additional Features" %}</label>
                                         <div class="col-sm-9">
-                                            <div class="checkbox">
+                                            <div class="checkbox" style="color: var(--text-primary, #333);">
                                                 <label>
                                                     <input ng-model="sslCheck" type="checkbox" value="">
                                                     SSL
@@ -362,7 +362,7 @@
                                         </div>
                                         <label class="col-sm-3 control-label"></label>
                                         <div class="col-sm-9">
-                                            <div class="checkbox">
+                                            <div class="checkbox" style="color: var(--text-primary, #333);">
                                                 <label>
                                                     <input ng-model="dkimCheck" type="checkbox" value="">
                                                     DKIM Support
@@ -371,7 +371,7 @@
                                         </div>
                                         <label class="col-sm-3 control-label"></label>
                                         <div class="col-sm-9">
-                                            <div class="checkbox">
+                                            <div class="checkbox" style="color: var(--text-primary, #333);">
                                                 <label>
                                                     <input ng-model="openBasedir" type="checkbox" value="">
                                                     open_basedir Protection
@@ -395,28 +395,28 @@
                                         <label class="col-sm-2 control-label"></label>
                                         <div class="col-sm-7">
 
-                                            <div class="alert alert-success text-center">
+                                            <div class="alert alert-success text-center" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <h2>{$ currentStatus $}</h2>
                                             </div>
 
-                                            <div class="progress">
-                                                <div id="installProgress" class="progress-bar" role="progressbar"
+                                            <div class="progress" style="background: var(--bg-secondary, #f8f9ff); border-color: var(--border-color, #ddd);">
+                                                <div id="installProgress" class="progress-bar" style="background: var(--bg-primary, white); color: var(--text-primary, #333);" role="progressbar"
                                                      aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                                                      style="width:0%">
                                                     <span class="sr-only">70% Complete</span>
                                                 </div>
                                             </div>
 
-                                            <div ng-hide="errorMessageBox" class="alert alert-danger">
+                                            <div ng-hide="errorMessageBox" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Error message:" %} {$ errorMessage $}</p>
                                             </div>
 
-                                            <div ng-hide="success" class="alert alert-success">
+                                            <div ng-hide="success" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Website succesfully created." %}</p>
                                             </div>
 
 
-                                            <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                            <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                             </div>
 
@@ -442,32 +442,32 @@
 
                             <div id="listDomains" class="col-md-12">
 
-                                <form ng-hide="" class="form-horizontal bordered-row">
+                                <form ng-hide="" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
 
-                                    <div ng-hide="phpChanged" class="alert alert-success">
+                                    <div ng-hide="phpChanged" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "PHP Version Changed to:" %} {$ changedPHPVersion $} </p>
                                     </div>
 
-                                    <div ng-hide="domainDeleted" class="alert alert-success">
+                                    <div ng-hide="domainDeleted" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Deleted:" %} {$ deletedDomain $} </p>
                                     </div>
 
-                                    <div ng-hide="sslIssued" class="alert alert-success">
+                                    <div ng-hide="sslIssued" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "SSL Issued:" %} {$ sslDomainIssued $} </p>
                                     </div>
 
-                                    <div ng-hide="childBaseDirChanged" class="alert alert-success">
+                                    <div ng-hide="childBaseDirChanged" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Changes applied successfully." %} </p>
                                     </div>
 
 
-                                    <div ng-hide="domainError" class="alert alert-danger">
+                                    <div ng-hide="domainError" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{$ errorMessage $}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                    <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                     </div>
 
@@ -476,7 +476,7 @@
 
                                         <div class="col-sm-11">
                                             <input placeholder="Search Domain..." ng-model="logSearch" name="dom"
-                                                   type="text" class="form-control" ng-model="domainNameCreate"
+                                                   type="text" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);" ng-model="domainNameCreate"
                                                    required>
                                         </div>
 
@@ -487,7 +487,7 @@
 
 
                                         <div class="col-sm-12">
-                                            <table class="table">
+                                            <table class="table" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <thead>
                                                 <tr>
                                                     <th>Domain</th>
@@ -509,14 +509,14 @@
                                                     <td ng-bind="record.path"></td>
                                                     <td>
                                                         <select ng-change="changeChildBaseDir(record.childDomain,childBaseDir)"
-                                                                ng-model="childBaseDir" class="form-control">
+                                                                ng-model="childBaseDir" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                             <option>Enable</option>
                                                             <option>Disable</option>
                                                         </select>
                                                     </td>
                                                     <td>
                                                         <select ng-change="changePHP(record.childDomain,phpSelection)"
-                                                                ng-model="phpSelection" class="form-control">
+                                                                ng-model="phpSelection" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                             {% for php in phps %}
                                                                 <option>{{ php }}</option>
                                                             {% endfor %}
@@ -553,13 +553,13 @@
 
             <div class="example-box-wrapper">
 
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box" style="margin-bottom: 2%;">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333); margin-bottom: 2%;" class="content-box">
                     <h3 class="content-box-header bg-blue">
                         {% trans "Configurations" %} <img ng-hide="configFileLoading" src="/static/images/loading.gif">
                     </h3>
 
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                         <div class="row">
 
                             <div class="col-md-3" style="margin-bottom: 2%;">
@@ -617,19 +617,19 @@
 
                             <div class="col-md-12">
 
-                                <form ng-hide="hidsslconfigs" class="form-horizontal bordered-row">
+                                <form ng-hide="hidsslconfigs" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
-                                    <div ng-hide="sslSaved" class="alert alert-success">
+                                    <div ng-hide="sslSaved" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "SSL Saved" %}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotSaveSSL" class="alert alert-danger">
+                                    <div ng-hide="couldNotSaveSSL" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not save SSL. Error message:" %} {$ errorMessage $}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                    <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                     </div>
 
@@ -641,11 +641,11 @@
                                         </div>
                                         <div class="col-sm-6">
                                             <textarea placeholder="Paste Your Cert" ng-model="cert" rows="10"
-                                                      class="form-control"></textarea>
+                                                      class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"></textarea>
                                         </div>
                                         <div class="col-sm-6">
                                             <textarea placeholder="Paste Your Key" ng-model="key" rows="10"
-                                                      class="form-control"></textarea>
+                                                      class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"></textarea>
                                         </div>
                                     </div>
 
@@ -672,28 +672,28 @@
 
                             <div class="col-md-12">
 
-                                <form ng-hide="configurationsBox" class="form-horizontal bordered-row">
+                                <form ng-hide="configurationsBox" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
-                                    <div ng-hide="configsFetched" class="alert alert-success">
+                                    <div ng-hide="configsFetched" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Current configuration in the file fetched." %}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotFetchConfigs" class="alert alert-danger">
+                                    <div ng-hide="couldNotFetchConfigs" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                             errorMessage $}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                    <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                     </div>
 
-                                    <div ng-hide="configSaved" class="alert alert-success">
+                                    <div ng-hide="configSaved" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Configurations saved." %}</p>
                                     </div>
 
-                                    <div ng-hide="couldNotSaveConfigurations" class="alert alert-danger">
+                                    <div ng-hide="couldNotSaveConfigurations" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                             errorMessage $}</p>
                                     </div>
@@ -705,7 +705,7 @@
                                                     src="/static/images/close-32.png"></a>
                                         </div>
                                         <div class="col-sm-12">
-                                            <textarea ng-model="configData" rows="20" class="form-control"></textarea>
+                                            <textarea ng-model="configData" rows="20" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"></textarea>
                                         </div>
                                     </div>
 
@@ -727,10 +727,10 @@
 
                             <div class="col-md-12">
 
-                                <form ng-hide="configurationsBoxRewrite" class="form-horizontal bordered-row">
+                                <form ng-hide="configurationsBoxRewrite" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
 
-                                    <div ng-hide="rewriteRulesFetched" class="alert alert-success">
+                                    <div ng-hide="rewriteRulesFetched" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Current rewrite rules in the file fetched." %} <a target="_blank"
                                                                                                        href="http://go.cyberpanel.net/cyber9bed2">Click</a>
                                             to read more about whats changed in <a target="_blank"
@@ -739,21 +739,21 @@
                                     </div>
 
 
-                                    <div ng-hide="couldNotFetchRewriteRules" class="alert alert-danger">
+                                    <div ng-hide="couldNotFetchRewriteRules" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not fetch current rewrite rules. Error message:" %} {$
                                             errorMessage $}</p>
                                     </div>
 
 
-                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                    <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                     </div>
 
-                                    <div ng-hide="rewriteRulesSaved" class="alert alert-success">
+                                    <div ng-hide="rewriteRulesSaved" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Configurations saved." %}</p>
                                     </div>
 
-                                    <div ng-hide="couldNotSaveRewriteRules" class="alert alert-danger">
+                                    <div ng-hide="couldNotSaveRewriteRules" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                         <p>{% trans "Could not save rewrite rules. Error message:" %} {$ errorMessage
                                             $}</p>
                                     </div>
@@ -765,7 +765,7 @@
                                                     src="/static/images/close-32.png"></a>
                                         </div>
                                         <div class="col-sm-12">
-                                            <textarea ng-model="rewriteRules" rows="10" class="form-control"></textarea>
+                                            <textarea ng-model="rewriteRules" rows="10" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);"></textarea>
                                         </div>
                                     </div>
 
@@ -787,13 +787,13 @@
 
                             <div class="col-md-12">
 
-                                <form ng-hide="changePHPView" name="" action="/" class="form-horizontal bordered-row">
+                                <form ng-hide="changePHPView" name="" action="/" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
 
                                     <div class="form-group">
                                         <label class="col-sm-3 control-label">{% trans "Select PHP" %}</label>
                                         <div class="col-sm-6">
-                                            <select ng-model="phpSelectionMaster" class="form-control">
+                                            <select ng-model="phpSelectionMaster" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 {% for php in phps %}
                                                     <option>{{ php }}</option>
                                                 {% endfor %}
@@ -821,17 +821,17 @@
 
                                         <label class="col-sm-3 control-label"></label>
                                         <div class="col-sm-4">
-                                            <div ng-hide="failedToChangePHPMaster" class="alert alert-danger">
+                                            <div ng-hide="failedToChangePHPMaster" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Failed to change PHP version. Error message:" %} {$
                                                     errorMessage $}</p>
                                             </div>
 
-                                            <div ng-hide="phpChangedMaster" class="alert alert-success">
+                                            <div ng-hide="phpChangedMaster" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "PHP successfully changed for: " %} <strong>{$ websiteDomain
                                                     $}</strong></p>
                                             </div>
 
-                                            <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                            <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                             </div>
                                         </div>
@@ -850,12 +850,12 @@
 
 
             <div class="example-box-wrapper">
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
                     <h3 class="content-box-header bg-blue">
                         {% trans "Files" %}
                     </h3>
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                         <div class="row">
 
                             <div class="col-md-3" style="margin-bottom: 2%;">
@@ -909,12 +909,12 @@
 
                             <div ng-hide="openBaseDirBox" class="col-md-12">
 
-                                <form action="/" class="form-horizontal bordered-row">
+                                <form action="/" class="form-horizontal bordered-row" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
 
                                     <div class="form-group">
                                         <label class="col-sm-3 control-label">{% trans "open_basedir Protection" %}</label>
                                         <div class="col-sm-6">
-                                            <select ng-model="openBasedirValue" class="form-control">
+                                            <select ng-model="openBasedirValue" class="form-control" style="background: var(--bg-primary, white); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <option>Enable</option>
                                                 <option>Disable</option>
                                             </select>
@@ -943,15 +943,15 @@
 
                                         <label class="col-sm-3 control-label"></label>
                                         <div class="col-sm-4">
-                                            <div ng-hide="operationFailed" class="alert alert-danger">
+                                            <div ng-hide="operationFailed" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Error message:" %} {$ errorMessage $} </p>
                                             </div>
 
-                                            <div ng-hide="operationSuccessfull" class="alert alert-success">
+                                            <div ng-hide="operationSuccessfull" class="alert alert-success" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Changes successfully saved." %}</p>
                                             </div>
 
-                                            <div ng-hide="couldNotConnect" class="alert alert-danger">
+                                            <div ng-hide="couldNotConnect" class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                                                 <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                             </div>
                                         </div>
@@ -973,12 +973,12 @@
             {% if marketingStatus %}
 
                 <div class="example-box-wrapper">
-                    <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                    <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
                         <h3 class="content-box-header bg-blue">
                             {% trans "Email Marketing" %}
                         </h3>
 
-                        <div class="content-box-wrapper">
+                        <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                             <div class="row">
 
                                 <div class="col-md-3" style="margin-bottom: 2%;">
@@ -1045,13 +1045,13 @@
 
             <div class="example-box-wrapper">
 
-                <div style="border-radius: 25px;border-color:#3498db" class="content-box">
+                <div style="border-radius: 25px;border-color:#3498db; background: var(--bg-primary, white); color: var(--text-primary, #333);" class="content-box">
                     <h3 class="content-box-header bg-blue">
                         {% trans "Application Installer" %} <img ng-hide="applicationInstallerLoading"
                                                                  src="/static/images/loading.gif">
                     </h3>
 
-                    <div class="content-box-wrapper">
+                    <div class="content-box-wrapper" style="background: var(--bg-primary, white); color: var(--text-primary, #333);">
                         <div class="row">
 
 
@@ -1119,7 +1119,7 @@
 
         {% else %}
 
-            <div class="alert alert-danger">
+            <div class="alert alert-danger" style="background: var(--bg-secondary, #f8f9ff); color: var(--text-primary, #333); border-color: var(--border-color, #ddd);">
                 <p>{{ domain }}</p>
             </div>
 
diff --git a/emailPremium/templates/emailPremium/SpamAssassin.html b/emailPremium/templates/emailPremium/SpamAssassin.html
index a4c41edda..d8e00fea0 100644
--- a/emailPremium/templates/emailPremium/SpamAssassin.html
+++ b/emailPremium/templates/emailPremium/SpamAssassin.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, 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-secondary, #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;
@@ -50,15 +50,15 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Documentation Link */
     .docs-link {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         color: #5856d6;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-secondary, #e8e9ff);
         padding: 8px 20px;
         border-radius: 8px;
         font-weight: 600;
@@ -82,18 +82,18 @@
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, 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-secondary, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -117,7 +117,7 @@
     .install-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -130,13 +130,13 @@
     .install-title {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .install-description {
         font-size: 16px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 25px;
     }
     
@@ -170,7 +170,7 @@
     .form-label {
         font-size: 14px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         display: block;
         text-transform: none;
@@ -179,11 +179,11 @@
     .form-control {
         width: 100%;
         padding: 10px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-secondary, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         transition: all 0.3s ease;
     }
     
@@ -218,7 +218,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #e8e9ff;
+        background-color: var(--border-secondary, #e8e9ff);
         transition: .3s;
         border-radius: 26px;
         pointer-events: none;
@@ -231,7 +231,7 @@
         width: 20px;
         left: 3px;
         bottom: 3px;
-        background-color: white;
+        background-color: var(--bg-primary, white);
         transition: .3s;
         border-radius: 50%;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -270,8 +270,8 @@
     
     /* Installation Log */
     .install-log {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-secondary, #e8e9ff);
         border-radius: 8px;
         padding: 15px;
         margin-top: 20px;
@@ -287,17 +287,17 @@
     .install-log-title {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .log-textarea {
         width: 100%;
         padding: 12px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-secondary, #e8e9ff);
         border-radius: 8px;
         font-size: 13px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         resize: vertical;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
@@ -320,30 +320,30 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--alert-success-bg, #d1fae5);
+        color: var(--alert-success-text, #065f46);
+        border: 1px solid var(--alert-success-border, #a7f3d0);
     }
     
     .alert-success .alert-icon {
-        color: #10b981;
+        color: var(--alert-success-icon, #10b981);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--alert-danger-bg, #fee2e2);
+        color: var(--alert-danger-text, #991b1b);
+        border: 1px solid var(--alert-danger-border, #fecaca);
     }
     
     .alert-danger .alert-icon {
-        color: #ef4444;
+        color: var(--alert-danger-icon, #ef4444);
     }
     
     /* Loading Spinner */
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-secondary, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -359,7 +359,7 @@
     /* Help Text */
     .help-text {
         font-size: 13px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-top: 5px;
     }
     
diff --git a/emailPremium/templates/emailPremium/mailQueue.html b/emailPremium/templates/emailPremium/mailQueue.html
index e19211696..3ef6497be 100644
--- a/emailPremium/templates/emailPremium/mailQueue.html
+++ b/emailPremium/templates/emailPremium/mailQueue.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, 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-primary, #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;
@@ -50,15 +50,15 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Documentation Link */
     .docs-link {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         color: #5856d6;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         padding: 8px 20px;
         border-radius: 8px;
         font-weight: 600;
@@ -82,18 +82,18 @@
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, 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-primary, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -174,26 +174,26 @@
         padding: 15px;
         font-size: 12px;
         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-primary, #e8e9ff);
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .queue-table td {
         padding: 15px;
         font-size: 14px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0ff;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-secondary, #f0f0ff);
     }
     
     .queue-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .queue-table code {
-        background: #f0f0ff;
+        background: var(--bg-tertiary, #f0f0ff);
         color: #5856d6;
         padding: 4px 8px;
         border-radius: 4px;
@@ -203,9 +203,9 @@
     
     /* View Message Button */
     .view-message-btn {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         color: #5856d6;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         padding: 6px 16px;
         border-radius: 6px;
         font-weight: 600;
@@ -239,8 +239,8 @@
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px 12px 0 0;
         padding: 20px;
     }
@@ -248,7 +248,7 @@
     .modal-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0;
     }
     
@@ -256,7 +256,7 @@
         background: transparent;
         border: none;
         font-size: 24px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         cursor: pointer;
         padding: 0;
         width: 32px;
@@ -269,8 +269,8 @@
     }
     
     .modal-close:hover {
-        background: #e8e9ff;
-        color: #2f3640;
+        background: var(--border-primary, #e8e9ff);
+        color: var(--text-primary, #2f3640);
     }
     
     .modal-body {
@@ -280,11 +280,11 @@
     .message-textarea {
         width: 100%;
         padding: 12px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: #f8f9ff;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, #f8f9ff);
         resize: vertical;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
@@ -294,12 +294,12 @@
         outline: none;
         border-color: #5856d6;
         box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
-        background: white;
+        background: var(--bg-primary, white);
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-top: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 0 0 12px 12px;
         padding: 15px 20px;
         display: flex;
@@ -331,21 +331,21 @@
     }
     
     .modal-btn.secondary {
-        background: white;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary, white);
+        color: var(--text-secondary, #64748b);
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .modal-btn.secondary:hover {
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-secondary, #f8f9ff);
+        color: var(--text-primary, #2f3640);
     }
     
     /* Loading Spinner */
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-primary, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -362,20 +362,20 @@
     .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .empty-state-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 20px;
         font-size: 36px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .empty-state-text {
@@ -385,7 +385,7 @@
     
     .empty-state-subtext {
         font-size: 14px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     /* Responsive */