dark mode

client/src/app.css

@@ -8,7 +8,7 @@
 	font-family: 'Fira Mono', monospace;
 
 	--ui-bg-0: #fefefe;
-	--ui-bg-0-85: #ffffffd9;
+	--ui-bg-0-85: #fefefed9;
 	--ui-bg-1: #eee;
 	--ui-bg-2: #e2e2e2;
 	--ui-text-0: #111;
@@ -19,6 +19,17 @@
 	--ui-anim: all 150ms ease;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--ui-bg-0: #111;
+		--ui-bg-0-85: #111111d9;
+		--ui-bg-1: #222;
+		--ui-bg-2: #282828;
+		--ui-text-0: #fefefe;
+		--ui-text-1: #eee;
+	}
+}
+
 .error-text {
 	color: var(--ui-clr-error);
 }
@@ -53,6 +64,13 @@ button {
 	transition: var(--ui-anim);
 	font-family: inherit;
 	font-size: inherit;
+	background: inherit;
+	color: inherit;
+}
+
+*:disabled,
+*[disabled='true'] {
+	opacity: 0.5;
 }
 
 fieldset {

client/src/lib/ui/TextInput.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <label>
-	<small>
+	<small disabled={$$restProps.disabled}>
 		{label}
 	</small>
 	<input bind:value {...$$restProps} />