add a dark mode

Author: MathMan05

src/webpage/editor/line.ts

@@ -33,28 +33,30 @@ class Line {
 		const spot = cursors[0] || 0;
 		const parts = [...parseLine(this.str)];
 		let j = 0;
+		const theme = localStorage.getItem("theme") || ("light" as "dark") || "light";
+
 		for (const thing of parts) {
 			let color: string;
 
 			//TODO undo hardcoding of values
 			switch (thing.type) {
 				case "invalidString":
 				case "invalidChar":
-					color = "red";
+					color = theme === "light" ? "red" : "indianred";
 					break;
 				case "instruction":
-					color = "blue";
+					color = theme === "light" ? "blue" : "aqua";
 					break;
 				case "register":
-					color = "red";
+					color = theme === "light" ? "red" : "indianred";
 					break;
 				case "variable":
 					color = "goldenrod";
 					break;
 				case "string":
 				case "comment":
 				case "char":
-					color = "green";
+					color = theme === "light" ? "green" : "greenyellow";
 					break;
 				case "directive":
 					color = "magenta";
@@ -67,7 +69,7 @@ class Line {
 				case "label":
 				case "parentheses":
 				case "unknown":
-					color = "black";
+					color = theme === "light" ? "black" : "white";
 			}
 			ctx.fillStyle = color;
 			const split = thing.content.split("	");

src/webpage/index.ts

@@ -273,6 +273,9 @@ helpMenu.addButton(
 		menu.append(title, tabs, body, close);
 		menu.setAttribute("closedBy", "any");
 		menu.showModal();
+		menu.onclose = () => {
+			menu.remove();
+		};
 	},
 );
 
@@ -281,6 +284,48 @@ helpButton.textContent = I18n.help.help();
 actionRow.append(helpButton);
 helpMenu.bindContextmenu(helpButton, undefined, undefined, true);
 
+const settingsButton = document.createElement("button");
+settingsButton.textContent = I18n.settings.settings();
+actionRow.append(settingsButton);
+let theme = localStorage.getItem("theme") || ("dark" as "light") || "dark";
+function updateTheme() {
+	document.body.className = theme + "-theme";
+}
+updateTheme();
+settingsButton.onclick = () => {
+	const menu = document.createElement("dialog");
+	menu.classList.add("flexttb");
+	const h1 = document.createElement("h1");
+	h1.textContent = I18n.settings.settings();
+
+	const themeSpan = document.createElement("span");
+	themeSpan.textContent = I18n.settings.theme.theme();
+
+	const themeSelect = document.createElement("select");
+	const light = document.createElement("option");
+	light.textContent = I18n.settings.theme.light();
+	light.value = "light";
+	const dark = document.createElement("option");
+	dark.textContent = I18n.settings.theme.dark();
+	dark.value = "dark";
+	if (theme === "dark") dark.selected = true;
+	themeSelect.value = theme;
+	themeSelect.append(light, dark);
+	themeSelect.onchange = () => {
+		theme = themeSelect.value;
+		localStorage.setItem("theme", theme);
+		updateTheme();
+	};
+
+	menu.append(h1, themeSpan, themeSelect);
+	document.body.append(menu);
+	menu.setAttribute("closedBy", "any");
+	menu.showModal();
+	menu.onclose = () => {
+		menu.remove();
+	};
+};
+
 const area = document.getElementById("area") as HTMLElement;
 if (!area) throw Error("area not found");
 let editors: Editor[] = [];

src/webpage/style.css

@@ -8,6 +8,70 @@ body {
 	overflow: hidden; /* avoid "bounce" */
 	-webkit-text-size-adjust: 100%;
 }
+.dark-theme {
+	background: #1b1b1b;
+	color: #ffffff;
+	#mainRow {
+		background: #333333;
+		img {
+			background: #5a5a5a;
+		}
+	}
+	#actionRow {
+		background: #373737;
+		color: white;
+	}
+	button {
+		background: #101010;
+		color: white;
+	}
+	.tabStyle {
+		button {
+			background: #0d0d0d;
+		}
+		.selected {
+			box-shadow: none;
+			background: #090909;
+		}
+		button:hover {
+			background: #3d3d3d;
+		}
+	}
+	.projectList {
+		button:nth-of-type(even) {
+			background-color: rgb(46 46 46);
+		}
+	}
+	.fileList {
+		span {
+			background: #0a0a0a;
+		}
+	}
+	.regiTable {
+		tr:first-child {
+			background: #000000;
+			text-align: center;
+		}
+	}
+	tr:nth-of-type(even) {
+		background-color: rgb(45 45 45);
+	}
+	tr:first-child {
+		background: #000000;
+	}
+	.controls {
+		background: #080808;
+	}
+	.LastUsed {
+		background-color: #5b6529 !important;
+	}
+	.running {
+		background-color: #5b6529;
+	}
+	tr:nth-of-type(even).running {
+		background-color: #5b6529;
+	}
+}
 .speedDiv {
 	width: 200px;
 }

src/webpage/utils/utils.ts

@@ -1,13 +1,3 @@
-setTheme();
-export function setTheme() {
-	let name = localStorage.getItem("theme");
-	if (!name) {
-		localStorage.setItem("theme", "Dark");
-		name = "Dark";
-	}
-	document.body.className = name + "-theme";
-}
-
 class Directory {
 	static home = this.createHome();
 	handle: FileSystemDirectoryHandle;

translations/en.json

@@ -316,6 +316,14 @@
 			"addDescs":"sltiu t1, t2, 10 $1: If t2 is less than the immediate set t1 to 1 otherwise set it to 0 (unsigned)"
 		}
 	},
+	"settings":{
+		"settings":"Settings",
+		"theme":{
+			"theme":"Theme:",
+			"light":"Light",
+			"dark":"Dark"
+		}
+	},
 	"directives":{
 		"global":"Declare the listed label(s) as global to enable referencing from other files",
 		"text":"Store items after this (Instructions) at next available text address",