theme persistence

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

@@ -172,18 +172,37 @@ body {
 	background: radial-gradient(#ffff00, #ffe169) !important;
 }
 
+[data-bs-theme="dark"] .WP2 {
+	color: black !important;
+}
+
 .WP4 {
+	color: black;
 	background: radial-gradient(#00ffff, #69c3ff) !important;
 }
 
+[data-bs-theme="dark"] .WP4 {
+	color: black !important;
+}
+
 .WP5 {
+	color: black;
 	background: radial-gradient(#ff0000, #e396ff) !important;
 }
 
+[data-bs-theme="dark"] .WP5 {
+	color: black !important;
+}
+
 .TA3 {
+	color: black;
 	background: radial-gradient(#99ff99, #ccffcc) !important;
 }
 
+[data-bs-theme="dark"] .TA3 {
+	color: black !important;
+}
+
 .left {
 	text-align: left;
 }

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

@@ -2,6 +2,13 @@ toggleTheme = function() {
 	var oldValue = $("html").attr("data-bs-theme");
 	var newValue = oldValue == "dark" ? "light" : "dark";
 	$("html").attr("data-bs-theme", newValue);
+	var url = "profile/" + newValue;
+	$.ajax({
+		url: url,
+		dataType: 'json',
+		type: "POST",
+		contentType: 'application/json'
+	});
 }
 
 resetValue = function(selector, value) {

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

@@ -52,24 +52,31 @@
 			</div>
 		</div>
 		<script type="text/javascript">
-			resetClock = function() {
-				$("#clock").empty();
-				var theme = $("html").attr("data-bs-theme");
-				var arrowcolor;
-				var scalecolor;
-				var backgroundcolor;
-				if (theme == "dark") {
-					arrowcolor = "#fff";
-					scalecolor = "#aaa";
-					backgroundcolor = "rgba(0, 0, 0, 0.3)"
-				} else {
-					arrowcolor = "#099";
-					scalecolor = "#000";
-					backgroundcolor = "rgba(0, 0, 0, 0)";
-				}
-		  	new Clock(38, "#clock", arrowcolor, scalecolor, backgroundcolor);
-		  }
-		  resetClock();
+		//<![CDATA[
+			$(document).ready(function(){
+				var theme = "[[${theme}]]";
+				$("html").attr("data-bs-theme", theme);
+				
+				resetClock = function() {
+					$("#clock").empty();
+					var theme = $("html").attr("data-bs-theme");
+					var arrowcolor;
+					var scalecolor;
+					var backgroundcolor;
+					if (theme == "dark") {
+						arrowcolor = "#fff";
+						scalecolor = "#aaa";
+						backgroundcolor = "rgba(0, 0, 0, 0.3)"
+					} else {
+						arrowcolor = "#099";
+						scalecolor = "#000";
+						backgroundcolor = "rgba(0, 0, 0, 0)";
+					}
+			  	new Clock(38, "#clock", arrowcolor, scalecolor, backgroundcolor);
+			  }
+			  resetClock();
+			});
+			//]]>
 		</script>
 	</nav>
 	<main layout:fragment="content" class="page body"></main>