From 77d69c3c173468d575c464da710b9b91c99e826a Mon Sep 17 00:00:00 2001
From: Infinidoge <infinidoge@inx.moe>
Date: Mon, 5 Feb 2024 16:14:03 -0500
Subject: [PATCH] support dark mode

---
 app/main.css | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/main.css b/app/main.css
index e3ae831..7681bf0 100644
--- a/app/main.css
+++ b/app/main.css
@@ -1,3 +1,18 @@
+:root {
+    --background: #EEE;
+    --textbox: white;
+    --text: #444;
+    --accent: silver;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #444;
+        --textbox: black;
+        --text: #EEE;
+    }
+}
+
 * {
     box-sizing: border-box;
 }
@@ -5,7 +20,7 @@ html, body {
     height: calc(100% - 20px);
 }
 body {
-    background-color: #EEE; 
+    background-color: var(--background);
     margin: 20px;
     padding: 0; 
     font-family: monospace; 
@@ -19,25 +34,25 @@ textarea {
     height: calc(100% - 33px);
     margin-bottom: 20px;
     outline: none;
-    border: 1px solid silver;
+    border: 1px solid var(--accent);
     border: 0;
-    background-color: white;
+    background-color: var(--textbox);
     resize: none;
     overflow: auto;
     font-family: monospace;
     font-size: 16px;
-    color: #444;
+    color: var(--text);
 }
 button {
     height: 40px;
     width: 40px;
     margin-right: 20px;
     margin-bottom: 20px;
-    color: #444;
-    border: 1px solid #444;
+    color: var(--text);
+    border: 1px solid var(--text);
 }
 p {
-    color: silver;
+    color: var(--accent);
     text-align: right;
 }
 span {
-- 
2.42.0