From 40fc344a24afa4717d38dc403771967faf561424 Mon Sep 17 00:00:00 2001
From: marc tobias <mtmail@gmx.net>
Date: Tue, 22 Apr 2025 00:39:28 +0200
Subject: [PATCH] dark mode

---
 eslint.config.mjs                         |  6 ++
 src/App.svelte                            |  1 +
 src/color-mode-toggler.js                 | 80 +++++++++++++++++++++++
 src/components/DetailsOneRow.svelte       |  3 +-
 src/components/DetailsPostcodeHint.svelte |  2 +-
 src/components/Header.svelte              | 32 +++++++--
 src/components/LastUpdated.svelte         |  2 +-
 src/components/ResultsList.svelte         | 21 +++---
 src/global_style.css                      |  6 ++
 src/pages/DetailsPage.svelte              |  6 +-
 10 files changed, 139 insertions(+), 20 deletions(-)
 create mode 100644 src/color-mode-toggler.js

diff --git a/eslint.config.mjs b/eslint.config.mjs
index aaa4e26..51b3451 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -68,4 +68,10 @@ export default [...compat.extends(
             browser: true,
         },
     },
+}, {
+    files: ["src/color-mode-toggler.js"],
+    rules: {
+        "semi": "off",
+        "max-len": "off"
+    }
 }];
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 98ba029..f9f1946 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,7 @@
 <script>
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap/dist/js/bootstrap.bundle.js';
+  import './color-mode-toggler.js';
 
   import { page, refresh_page } from './lib/stores.js';
 
diff --git a/src/color-mode-toggler.js b/src/color-mode-toggler.js
new file mode 100644
index 0000000..b320fc5
--- /dev/null
+++ b/src/color-mode-toggler.js
@@ -0,0 +1,80 @@
+/*!
+ * https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
+ *
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    // const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    // const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    // activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
diff --git a/src/components/DetailsOneRow.svelte b/src/components/DetailsOneRow.svelte
index 8ba3769..d7c00af 100644
--- a/src/components/DetailsOneRow.svelte
+++ b/src/components/DetailsOneRow.svelte
@@ -49,7 +49,8 @@
 
 <style>
   .notused td {
-    color: #ccc;
+    color: var(--bs-secondary-color);
+    font-style: italic;
   }
 
   td {
diff --git a/src/components/DetailsPostcodeHint.svelte b/src/components/DetailsPostcodeHint.svelte
index 3397604..da78b83 100644
--- a/src/components/DetailsPostcodeHint.svelte
+++ b/src/components/DetailsPostcodeHint.svelte
@@ -71,7 +71,7 @@
 <style>
   #postcode-hint {
     font-size: 0.9em;
-    background-color: #ededff;
+    background-color: var(--bs-secondary-bg);
     display: none;
   }
 </style>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 0d678bd..7e14211 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -31,7 +31,7 @@
   .navbar-brand h1 {
     display: inline;
     font-size: 1.2em;
-    color: #333;
+    color: var(--bs-body-color);
   }
 
   .navbar-brand img {
@@ -57,10 +57,11 @@
 
   .search-section {
     padding: 1em 30px;
-    background-color: #f5f5f5;
-    border-top: 2px solid #ddd;
-    border-bottom: 2px solid #ddd;
+    background-color: var(--bs-tertiary-bg);
+    border-top: 2px solid var(--bs-border-color);
+    border-bottom: 2px solid var(--bs-border-color);
   }
+
 </style>
 
 <header class="container-fluid">
@@ -111,6 +112,29 @@
       </div>
       <!-- Right aligned links -->
       <ul class="navbar-nav">
+        <li class="nav-item position-relative">
+          <button class="btn nav-link dropdown-toggle" id="bd-theme" type="button"
+                  data-bs-toggle="dropdown" aria-label="Toggle color theme">
+            <span id="bd-theme-text">Color</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
+            <li>
+              <button type="button" class="dropdown-item" data-bs-theme-value="light">
+                Light
+              </button>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item" data-bs-theme-value="dark">
+                Dark
+              </button>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item" data-bs-theme-value="auto">
+                Auto
+              </button>
+            </li>
+          </ul>
+        </li>
         <li class="nav-item">
           <PageLink page="about"
                     extra_classes="nav-link {view === 'about' ? 'active' : ''}">
diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte
index 0d7768d..b87ca64 100644
--- a/src/components/LastUpdated.svelte
+++ b/src/components/LastUpdated.svelte
@@ -41,7 +41,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    background-color: #eee;
+    background-color: var(--bs-primary-bg-subtle);
     z-index: 100;
   }
 </style>
diff --git a/src/components/ResultsList.svelte b/src/components/ResultsList.svelte
index 8935ec1..7ff55f4 100644
--- a/src/components/ResultsList.svelte
+++ b/src/components/ResultsList.svelte
@@ -98,28 +98,29 @@
   .result {
     font-size: 0.8em;
     margin: 5px;
-    margin-top:0px;
+    margin-top: 0;
     padding: 4px 8px;
     border-radius: 2px;
-    background:#F0F7FF;
-    border: 2px solid #D7E7FF;
-    cursor:pointer;
+    background: var(--bs-secondary-bg);
+    border: 1px solid var(--bs-secondary-color);
+    cursor: pointer;
     min-height: 5em;
   }
 
   .result.highlight {
-    background-color: #D9E7F7;
-    border-color: #9DB9E4;
+    background-color: var(--bs-primary-bg-subtle);
+    border-color: var(--bs-primary-color-subtle);
   }
   .result.highlight :global(a) {
     margin: 10px auto;
     display: block;
     max-width: 10em;
     padding: 1px;
-    background-color: white;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-secondary-bg);
   }
-  .result .type{
-    color: gray;
+  .result .type {
+    color: var(--bs-secondary-color);
     font-size: 0.8em;
   }
   .result :global(a) {
@@ -141,6 +142,6 @@
   }
 
   .result.highlight :global(a):hover {
-    color: #111;
+    background-color: var(--bs-primary-bg-subtle);
   }
 </style>
diff --git a/src/global_style.css b/src/global_style.css
index 93bd19b..2fa86e1 100644
--- a/src/global_style.css
+++ b/src/global_style.css
@@ -8,3 +8,9 @@
 a { text-decoration: none }
 a:hover { text-decoration: underline; }
 a.btn:hover { text-decoration: none; }
+
+html[data-bs-theme=dark] img.mapicon {
+  /* invert the image colors */
+  filter: invert(1) hue-rotate(180deg);
+  background-color: transparent;
+}
diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index a8bb120..55f5cb9 100644
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -280,7 +280,7 @@
   h2 {
     font-size: 2em;
     padding-left: 8px;
-    background-color: white;
+    background-color: var(--bs-body-bg);
   }
   h3 {
     font-size: 1.5em;
@@ -288,7 +288,7 @@
   }
 
   tr.all-columns {
-    background-color: white !important;
+    background-color: var(--bs-body-bg) !important;
     border: none;
   }
   tr.all-columns td {
@@ -296,7 +296,7 @@
     padding-left: 0 !important;
   }
   :global(span.noname){
-    color:#800;
+    color: var(--bs-danger);
   }
 
   #map-wrapper {
-- 
2.39.5