Added options menu items, implimented darkmode, thank goodnes

main.css

@@ -6,10 +6,19 @@
 	--middle-accent:	rgba(128,128,128,0.1);
 	--middle-shade:		rgba(128,128,128,0.5);
 	--shadows-color:	rgba(138,138,138,1);
+	&.darkmode {
+		--foreground-high:	rgba(250,250,250,0.5);
+		--foreground-low:	rgba(200,200,200,1);
+		--background-high:	rgba(40,40,40,0.5);
+		--background-low:	rgba(10,10,10,1);
+		--shadows-color:	rgba(138,138,138,1);
+	}
 }
 
 body {
 	margin:0;
+	background: var(--background-low);
+	color: var(--foreground-high);
 }
 
 #root {
@@ -38,6 +47,50 @@ body {
 	padding: 5%;
 }
 
+.options_body > div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-bottom: solid 1px var(--foreground-low);
+	padding: 0 20px 0 20px;
+	height: 40px;
+	label {
+		flex:1;
+	}
+	input[type="number"] {
+		width: 100px;
+	}
+}
+
+.dm-indicator {
+	display: inline-block;
+	height: 30px;
+	width: 30px;
+	background: yellow;
+	border-radius: 15px;
+	box-shadow: inset 0 0 5px 5px rgba(240,140,0,0.8);
+	appearance: unset;
+}
+.dm-indicator:checked {
+	background: lightgrey;
+	box-shadow: inset 10px 10px 5px -5px black;
+}
+
+.toggle-switch {
+	appearance: unset;
+	display: inline-block;
+	height: 30px;
+	width: 70px;
+	border-radius: 15px;
+	background: var(--background-low);
+	box-shadow: inset -40px 0px 2px -2px var(--foreground-high);
+	transition: box-shadow 300ms;
+}
+
+.toggle-switch:checked {
+	box-shadow: inset 40px 0px 2px -2px var(--foreground-high);
+}
+
 .board_tab {
 	display: inline-block;
 	height: 24px;
@@ -122,13 +175,19 @@ body {
 	transition: left 500ms, backdrop-filter 500ms;
 }
 
-.dialog_body {
+.library_body {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 	grid-gap: 5%;
 	padding: 5%;
 }
 
+.options_body {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
 .pec {
 	text-align: center;
 	height: 100%;

main.js

@@ -51,6 +51,15 @@ function systemMsg (message,level=0) { // abstraction?
 	// but later we will also have it push an error toast in the ui.
 }
 
+function toggleDarkmode () {
+	var html = document.documentElement;
+	if (html.classList.contains("darkmode")) {
+		html.classList.remove("darkmode");
+	} else {
+		html.classList.add("darkmode");
+	}
+}
+
 function inRange(target,min,max) {
 	if (isNaN(target) || isNaN(min) || isNaN(max)) { return false; }
 	return (min <= target && target <= max);
@@ -180,11 +189,11 @@ app.gui.view.id = "view";
 app.gui.main.appendChild(app.gui.view);
 // Library popup
 app.gui.library = new auxillery_dialog("Library");
-app.gui.library.body.classList.add("dialog_body");
+app.gui.library.body.classList.add("library_body");
 app.gui.main.append(app.gui.library.root);
 // Options popup
 app.gui.options = new auxillery_dialog("Options");
-app.gui.options.body.classList.add("dialog_body");
+app.gui.options.body.classList.add("options_body");
 app.gui.main.append(app.gui.options.root);
 app.gui.optionsButton.addEventListener("click", ()=>{ app.gui.options.root.classList.add("focused") });
 // pre-populate grid with emptys
@@ -222,15 +231,23 @@ app.options = {};
 app.options.darkmode = false; // should always be an option
 app.options.audioFeedback = false; // read word aloude
 app.options.feedbackFloodLimit = 3;
-app.options.feedbackTimeout = 60000; // 60 seconds
+app.options.feedbackTimeout = 60; // 60 seconds
 // overload defaults with options stored in localstorage
 
 // build Options UI
 app.gui.options_darkmode = document.createElement("div");
 app.gui.options.body.appendChild(app.gui.options_darkmode);
+app.gui.options_darkmode.innerHTML = '<label for="darkmode-checkbox">Darkmode</label> <input id="darkmode-checkbox" type="checkbox" class="dm-indicator" />';
+app.gui.options_darkmode.addEventListener("change", toggleDarkmode);
+
 app.gui.options_audioFeedback = document.createElement("div");
 app.gui.options.body.appendChild(app.gui.options_audioFeedback);
+app.gui.options_audioFeedback.innerHTML = '<label for="audio-feedback-toggle">Read Allowed</label> <input id="audio-feedback-toggle" type="checkbox" class="toggle-switch" />';
+
 app.gui.options_feedbackFloodLimit = document.createElement("div");
 app.gui.options.body.appendChild(app.gui.options_feedbackFloodLimit);
+app.gui.options_feedbackFloodLimit.innerHTML = '<label for="flood-limit">Audio Flood Limit</label> <input id="flood-limit" type="number" min=1 step=2 max=10 />';
+
 app.gui.options_feedbackTimeout = document.createElement("div");
 app.gui.options.body.appendChild(app.gui.options_feedbackTimeout);
+app.gui.options_feedbackTimeout.innerHTML = '<label for="flood-timeout">Audio Flood Timeout</label> <input id="flood-timeout" type="number" min=0 step=10 />';