Add dark theme support

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 = () => {

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">

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() {

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;
+}

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({