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%;