ui: Implement switchable dark theme

js/dom.js

@@ -10,3 +10,7 @@ function for_all(class_name, func) {
 function load_img(img) {
 	img.classList.remove("unloaded");
 }
+function get_background() {
+	let bg = get("background");
+	return bg.children[1-bg.classList.contains("dark")];
+}

js/main.js

@@ -2,7 +2,11 @@ function onload() {
 	for_all("back", (btn) => {
 		btn.onclick = back;
 	});
-	back();
+	switch_theme(true);
+	setTimeout(() => {
+		back();
+		document.body.classList.remove("init");
+	}, 50)
 }
 
 function show(id) {
@@ -11,9 +15,27 @@ function show(id) {
 	});
 	get(id).classList.remove("hidden");
 	get(id).scrollTop = 0;
-	get("background").classList.remove("scaled");
+	get_background().classList.remove("scaled");
 }
 function back() {
 	show("page-home");
-	get("background").classList.add("scaled");
+	get_background().classList.add("scaled");
+}
+
+var is_dark = false;
+function switch_theme(value) {
+	if (value === undefined) value = !is_dark; 
+	is_dark = value;
+	get("css_dark").disabled = !is_dark;
+	let bg_box = get("background").classList;
+	if (is_dark) {
+		get("theme-indicator").innerText = "dark_mode";
+		bg_box.add("dark");
+		get_background().src = "img/background-dark.jpg";
+	}
+	else {
+		get("theme-indicator").innerText = "light_mode";
+		bg_box.remove("dark");
+		get_background().src = "img/background.jpg";
+	}
 }