From b7ff90f5c48bd34fbe5efffecd69882393f0e4e1 Mon Sep 17 00:00:00 2001
From: Mahmoud AlSharif <16165616+mas-iota@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:51:39 +0300
Subject: [PATCH] Add dark theme toggle setting

---
 src/control/design/design.js  |  7 +++++++
 src/control/design/index.html | 12 ++++++++++++
 src/entities/Settings.js      |  4 ++++
 src/widget/css/main.css       | 10 ++++++++++
 src/widget/widget.js          | 11 ++++++++++-
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/control/design/design.js b/src/control/design/design.js
index d89b351..6ffe941 100644
--- a/src/control/design/design.js
+++ b/src/control/design/design.js
@@ -25,6 +25,7 @@ const render = () => {
   const allowMapStyleSelectionBtn = document.querySelector('#allow-map-style-selection-btn');
   const showCategoryOnLocDetailsBtn = document.querySelector('#show-category-on-loc-details-btn');
   const showContributorNameToggle = document.querySelector('#show-contributor-name');
+  const darkThemeToggle = document.querySelector('#dark-theme-toggle');
 
   for (const radio of listViewPositionRadios) {
     if (radio.value === state.settings.design?.listViewPosition) {
@@ -109,6 +110,12 @@ const render = () => {
     state.settings.design.showContributorName = e.target.checked;
     saveSettings();
   };
+
+  darkThemeToggle.checked = state.settings.design.darkTheme;
+  darkThemeToggle.onchange = (e) => {
+    state.settings.design.darkTheme = e.target.checked;
+    saveSettings();
+  };
 };
 
 const saveSettings = () => {
diff --git a/src/control/design/index.html b/src/control/design/index.html
index d0650da..a23d215 100755
--- a/src/control/design/index.html
+++ b/src/control/design/index.html
@@ -138,6 +138,18 @@ <h4>Loading...</h4>
       </div>
     </div>
     <hr class="none" />
+    <div class="form-group main clearfix">
+      <div class="col-md-4 pull-left padding-left-zero">
+        <label class="">Dark Theme</label>
+      </div>
+      <div class="col-md-8 pull-right margin-top-five padding-right-zero flex-row">
+        <div class="button-switch">
+          <input id="dark-theme-toggle" type="checkbox" />
+          <label for="dark-theme-toggle" class="label-success"></label>
+        </div>
+      </div>
+    </div>
+    <hr class="none" />
     <div class="section-title">Location Details Screen</div>
     <hr class="none" />
     <div class="form-group main clearfix">
diff --git a/src/entities/Settings.js b/src/entities/Settings.js
index 251b59f..b5a26f2 100644
--- a/src/entities/Settings.js
+++ b/src/entities/Settings.js
@@ -64,6 +64,7 @@ export default class Settings {
       detailsMapPosition: 'top',
       showDetailsCategory: true,
       showContributorName: false,
+      darkTheme: false,
     };
     this.globalEntries = data.globalEntries || {
       locations: {
@@ -99,6 +100,9 @@ export default class Settings {
     if (typeof this.globalEditors.allowLocationCreatorsToEdit === 'undefined') {
       this.globalEditors.allowLocationCreatorsToEdit = true;
     }
+    if (typeof this.design.darkTheme === 'undefined') {
+      this.design.darkTheme = false;
+    }
   }
 
   toJSON() {
diff --git a/src/widget/css/main.css b/src/widget/css/main.css
index 5b095b9..5c4240a 100644
--- a/src/widget/css/main.css
+++ b/src/widget/css/main.css
@@ -1520,3 +1520,13 @@ h4.light-text {
 .hidden {
   display: none !important;
 }
+
+body.theme-dark {
+  --bf-theme-background: #121212;
+  --bf-theme-body-text: #ffffff;
+  --bf-theme-header-text: #ffffff;
+  --bf-theme-primary: #1E88E5;
+  --bf-theme-warning: #FFC107;
+  --bf-theme-success: #4CAF50;
+  --bf-theme-default: #BDBDBD;
+}
diff --git a/src/widget/widget.js b/src/widget/widget.js
index 3ee7e5c..4e12bb4 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -53,9 +53,18 @@ if (!buildfire.components.carousel.view.prototype.clear) {
   };
 }
 
+const applyTheme = () => {
+  if (!state.settings || !state.settings.design) return;
+  document.body.classList.toggle('theme-dark', state.settings.design.darkTheme);
+};
+
 const refreshSettings = () => WidgetController
   .getAppSettings()
-  .then((response) => state.settings = response);
+  .then((response) => {
+    state.settings = response;
+    applyTheme();
+    return response;
+  });
 
 const refreshCategories = () => WidgetController
   .searchCategories({