finished dark mode extension

src/main/resources/static/css/style.css

@@ -51,7 +51,7 @@ body {
 	background-repeat: repeat;
 }
 
-[data-bs-theme="dark"] html {
+[data-bs-theme="dark"] body {
 		background-image: url('../images/background_dark.svg');
 }
 
@@ -551,15 +551,6 @@ div {
     display: none;
 }
 
-/* ===== Dark Mode (Bootstrap 5.3: data-bs-theme="dark") ===== */
-
-/* --- style.css --- */
-[data-bs-theme="dark"] body,
-[data-bs-theme="dark"] .navbar-background {
-	background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
-		url('../images/background.jpg');
-}
-
 [data-bs-theme="dark"] .mainpage {
 	background-color: rgba(33, 37, 41, 0.6);
 }

src/main/resources/static/images/Icon_Dunkelmodus_hover.svg

@@ -9,7 +9,7 @@
       }
 
       .cls-1, .cls-2 {
-        stroke: #ffffcc;
+        stroke: #008b8b;
       }
 
       .cls-1, .cls-2, .cls-3 {

src/main/resources/static/images/Icon_Hellmodus.svg

@@ -9,7 +9,7 @@
       }
 
       .cls-1, .cls-2 {
-        stroke: #313122;
+        stroke: #c1c1aa;
       }
 
       .cls-1, .cls-2, .cls-3 {

src/main/resources/static/js/progress.js

@@ -7,16 +7,3 @@ progress = {
         $("#requestopen").remove();
     }
 }
-
-    (function() {
-        const saved = localStorage.getItem('theme');
-        const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        document.documentElement.setAttribute('data-bs-theme', saved || preferred);
-    })();
-
-		function toggleTheme() {
-			const html = document.documentElement;
-			const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
-			html.setAttribute('data-bs-theme', next);
-			localStorage.setItem('theme', next);
-		}

src/main/resources/static/js/theme.js

@@ -0,0 +1,47 @@
+(function () {
+	'use strict';
+
+	var STORAGE_KEY = 'theme';
+	var root = document.documentElement;
+
+	function getStoredTheme() {
+		try {
+			return localStorage.getItem(STORAGE_KEY);
+		} catch (e) {
+			return null;
+		}
+	}
+
+	function storeTheme(theme) {
+		try {
+			localStorage.setItem(STORAGE_KEY, theme);
+		} catch (e) {
+		}
+	}
+
+	function getPreferredTheme() {
+		var stored = getStoredTheme();
+		if (stored === 'dark' || stored === 'light') {
+			return stored;
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+
+	function applyTheme(theme) {
+		root.setAttribute('data-bs-theme', theme);
+	}
+
+	applyTheme(getPreferredTheme());
+
+	window.toggleTheme = function () {
+		var next = root.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
+		applyTheme(next);
+		storeTheme(next);
+	};
+
+	window.addEventListener('storage', function (e) {
+		if (e.key === STORAGE_KEY && (e.newValue === 'dark' || e.newValue === 'light')) {
+			applyTheme(e.newValue);
+		}
+	});
+})();

src/main/resources/templates/template.html

@@ -4,6 +4,7 @@
 <title>Camp Organizer 2</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<script th:src="@{/js/theme.js}"></script>
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/bootstrap/5.3.8/css/bootstrap.min.css} " />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/font-awesome/7.0.1/css/all.min.css} " />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/datatables/1.13.5/css/jquery.dataTables.min.css}" />
@@ -22,7 +23,7 @@
 <script th:src="@{/js/progress.js}"></script>
 </head>
 <body>
-	<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light headerlayout navbar-background">
+	<nav class="navbar sticky-top navbar-expand-lg headerlayout navbar-background">
 		<span class="navbar-brand"><a th:href="@{/allgemeines}"><span class="logo"></span></a></span>
 		<button class="navbar-toggler" style="margin-right: 40px" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 			aria-expanded="false">