switch theme on every page

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

@@ -226,13 +226,17 @@ body {
 
 .version {
 	font-size: small;
-	color: silver;
+	color: black;
 	position: absolute;
 	padding-top: 36px;
 	padding-left: 22px;
 	z-index: 0;
 }
 
+[data-bs-theme="dark"] .version {
+	color: white;
+}
+
 .fc-content {
 	cursor: pointer;
 }

src/main/resources/static/js/helper.js

@@ -1,8 +1,8 @@
-toggleTheme = function() {
+toggleTheme = function(urlprefix) {
 	var oldValue = $("html").attr("data-bs-theme");
 	var newValue = oldValue == "dark" ? "light" : "dark";
 	$("html").attr("data-bs-theme", newValue);
-	var url = "profile/" + newValue;
+	var url = urlprefix + "/profile/" + newValue;
 	$.ajax({
 		url: url,
 		dataType: 'json',

src/main/resources/templates/layout/main.html

@@ -47,7 +47,7 @@
 					<li class="nav-item"><a class="nav-link titlemod"><font layout:fragment="title"></font></a></li>
 					<li layout:fragment="menuitem" style="list-style-type: none"></li>
 					<li layout:fragment="menu" style="list-style-type: none"></li>
-					<li class="nav-item ms-auto"><div id="clock" class="clock" onclick="toggleTheme();resetClock()"></div></li>
+					<li class="nav-item ms-auto"><div id="clock" class="clock" th:attr="onclick=|toggleTheme('${baseUrl}');resetClock()|"></div></li>
 				</ul>
 			</div>
 		</div>