From 9db08e8fa44f25fbebb3ccbd44a262589cec1971 Mon Sep 17 00:00:00 2001
From: mtmail <mtmail@gmx.net>
Date: Thu, 21 Aug 2025 02:13:45 +0200
Subject: [PATCH] init color toggler buttons after each page load (#288)

---
 src/App.svelte               |  1 -
 src/color-mode-toggler.js    | 25 ++++++++++++-------------
 src/components/Header.svelte |  5 ++++-
 src/lib/stores.js            |  1 +
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f9f1946..98ba029 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,6 @@
 <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
index b320fc5..fd4d6e8 100644
--- a/src/color-mode-toggler.js
+++ b/src/color-mode-toggler.js
@@ -6,7 +6,8 @@
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
 
-(() => {
+export function initColorToggler() {
+
   const getStoredTheme = () => localStorage.getItem('theme')
   const setStoredTheme = theme => localStorage.setItem('theme', theme)
 
@@ -64,17 +65,15 @@
     }
   })
 
-  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
+  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)
-        })
+  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/Header.svelte b/src/components/Header.svelte
index fc359cd..d77c6b4 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -3,8 +3,9 @@
   import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';
   import Error from './Error.svelte';
-
+  import { onMount } from 'svelte';
   import { map_store, page } from '../lib/stores.js';
+  import { initColorToggler } from '../color-mode-toggler.js';
 
   let { subheader } = $props();
 
@@ -25,6 +26,8 @@
   });
 
   page.subscribe(pg => { view = pg.tab; });
+
+  onMount(initColorToggler);
 </script>
 
 <style>
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 5e755c1..ae6426b 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -7,6 +7,7 @@ export const last_api_request_url_store = writable();
 export const error_store = writable();
 export const page = writable();
 
+
 /**
  * Update the global page state.
  *
-- 
2.39.5