From c9be513a40721c518b332d001a63e2505bf0020a Mon Sep 17 00:00:00 2001
From: April Eaton <dev@aprileaton.net>
Date: Mon, 12 Jan 2026 16:29:41 +0100
Subject: [PATCH] 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                      | 40 ++++++++++++++++++++++++-
 client/src/components/header/header.css | 22 ++++++++++++--
 client/src/components/header/index.tsx  |  1 +
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 1d2bc97..5cebb30 100644
--- a/client/src/App.css
+++ b/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;
diff --git a/client/src/components/header/header.css b/client/src/components/header/header.css
index dd546ca..ef0aaaf 100644
--- a/client/src/components/header/header.css
+++ b/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);
+    }
+}
diff --git a/client/src/components/header/index.tsx b/client/src/components/header/index.tsx
index 18eda90..cbbd234 100644
--- a/client/src/components/header/index.tsx
+++ b/client/src/components/header/index.tsx
@@ -1,3 +1,4 @@
+import "/src/App.css";
 import "./header.css";
 import { Nav } from "./nav";