feat: add dark mode support

web/style.css

@@ -1,8 +1,17 @@
 :root {
   font-family: monospace;
+  --text: #4c4f69;
+  --base: #eff1f5;
   --background-color: #f0f0f0;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #cdd6f4;
+    --base: #1e1e2e;
+  }
+}
+
 html,
 body {
   width: 100%;
@@ -18,6 +27,16 @@ body {
   opacity: 1;
   background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px);
   background-size: 10px 10px;
+  color: var(--text);
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1e1e2e;
+    opacity: 1;
+    background-image: radial-gradient(#585b70 0.5px, #1e1e2e 0.5px);
+    background-size: 10px 10px;
+  }
 }
 
 h1,
@@ -27,7 +46,6 @@ h4,
 h5,
 h6 {
   margin: 0;
-  opacity: 80%;
   font-weight: 400;
 }
 
@@ -49,11 +67,13 @@ h6 {
 }
 
 .button {
-  border: 2px solid black;
+  border: 2px solid var(--text);
+  background: var(--base);
   position: relative;
   font-family: monospace;
   font-weight: 800;
   padding: 0.5rem 1rem;
+  color: var(--text);
 }
 
 .button:hover {
@@ -68,9 +88,24 @@ h6 {
   );
 }
 
+@media (prefers-color-scheme: dark) {
+  .button:hover {
+    background-color: #1e1e2e;
+    opacity: 1;
+    background-size: 10px 10px;
+    background-image: repeating-linear-gradient(
+      45deg,
+      #585b70 0,
+      #585b70 1px,
+      #1e1e2e 0,
+      #1e1e2e 50%
+    );
+  }
+}
+
 .button:active {
-  background: black !important;
-  color: white;
+  background: var(--text) !important;
+  color: var(--base);
   transform: translate(2px, 2px);
 }
 
@@ -89,7 +124,13 @@ h6 {
   bottom: -1px;
   padding: 0.5rem 1rem;
   content: "";
-  background-color: black;
+  background-color: var(--text);
   z-index: -1;
   transform: translate(2px, 2px);
 }
+
+@media (prefers-color-scheme: dark) {
+  .button:after {
+    opacity: 0.5;
+  }
+}