Better themeing with proper light/dark mode support

The themeing is broken up into 4 colors, `text`, `background`, `accent`,
and `highlight`
`text` is used for most foreground elements, including obviously text
`background` is used for most background colors
`accent` is used for decorations
`highlight` is used for highlighting certain elements, such as headers

client/src/App.css

@@ -1,6 +1,44 @@
-html {
+:root {
+    /* Catppuccin colors */
+    /* Light mode */
+    --light-text: #1e2030;
+    --light-background: #eff1f5;
+    --light-accent: #8839ef;
+    --light-highlight: #209fb5;
+    /* Dark mode */
+    --dark-text: #cad3f5;
+    --dark-background: #24273a;
+    --dark-accent: #c6a0f6;
+    --dark-highlight: #7dc4e4;
+
+    /* Global configs */
     color-scheme: light dark;
     font-family: system-ui;
+}
+
+@media (prefers-color-scheme: light) {
+    html {
+        color: var(--light-text);
+        background-color: var(--light-background);
+    }
+
+    h1 {
+        color: var(--light-highlight);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        color: var(--dark-text);
+        background-color: var(--dark-background);
+    }
+
+    h1 {
+        color: var(--dark-highlight);
+    }
+}
+
+html {
     display: flex;
     align-items: center;
     justify-content: center;

client/src/components/header/header.css

@@ -1,5 +1,4 @@
 header {
-    border-color: #c6a0f6;
     border-width: 2px;
     border-style: solid;
 
@@ -20,8 +19,27 @@ nav {
     }
 
     a {
-        color: #cad3f5;
         text-decoration: none;
         font-weight: bold;
     }
 }
+
+@media (prefers-color-scheme: light) {
+    header {
+        border-color: var(--light-accent);
+    }
+
+    a {
+        color: var(--light-text);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    header {
+        border-color: var(--dark-accent);
+    }
+
+    a {
+        color: var(--dark-text);
+    }
+}

client/src/components/header/index.tsx

@@ -1,3 +1,4 @@
+import "/src/App.css";
 import "./header.css";
 import { Nav } from "./nav";