From 6d92b4613051115aa7c77e609aa7373ce8fe1f51 Mon Sep 17 00:00:00 2001
From: Chris <work@cdnutter.org>
Date: Fri, 25 Sep 2026 10:10:15 -0700
Subject: [PATCH] Add Crimson theme: red on OLED black

Pure #000 background (OLED pixels off), near-black panels with dark red
borders, and a red accent (#e0263a) that passes 4.5:1 as text on black and
behind white button labels. Badges use a brighter red to stay legible on
their tinted background.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md                 |  2 +-
 internal/server/themes.go |  1 +
 web/static/css/themes.css | 22 ++++++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ff55222..b39c3f2 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ favorites.example.com {
 
 ## Theming
 
-Pick a preset under **Settings → Appearance**: Midnight, Obsidian, Nord, Dracula, Mocha, Rosé Pine, Gruvbox, Forest, Synthwave, Daylight, Paper or Latte. Then add your own CSS if you like. It loads after the theme on every page, so overriding variables is enough for a whole new look:
+Pick a preset under **Settings → Appearance**: Midnight, Obsidian, Nord, Dracula, Mocha, Rosé Pine, Gruvbox, Forest, Synthwave, Crimson (red on OLED black), Daylight, Paper or Latte. Then add your own CSS if you like. It loads after the theme on every page, so overriding variables is enough for a whole new look:
 
 ```css
 :root, [data-theme] {
diff --git a/internal/server/themes.go b/internal/server/themes.go
index c3728e5..5f92bed 100644
--- a/internal/server/themes.go
+++ b/internal/server/themes.go
@@ -18,6 +18,7 @@ var Themes = []Theme{
 	{"gruvbox", "Gruvbox", true},
 	{"forest", "Forest", true},
 	{"synthwave", "Synthwave", true},
+	{"crimson", "Crimson", true},
 	{"daylight", "Daylight", false},
 	{"paper", "Paper", false},
 	{"latte", "Latte", false},
diff --git a/web/static/css/themes.css b/web/static/css/themes.css
index de44e4f..f43f959 100644
--- a/web/static/css/themes.css
+++ b/web/static/css/themes.css
@@ -164,6 +164,28 @@
   --shadow: 0 10px 40px rgba(255, 79, 216, 0.12);
 }
 
+/* Red on true black: #000 backgrounds switch OLED pixels off. The accent
+   passes 4.5:1 both as text on black and behind white button labels. */
+[data-theme="crimson"] {
+  color-scheme: dark;
+  --bg: #000000;
+  --surface: #0a0a0a;
+  --surface-2: #151011;
+  --border: #2e1418;
+  --text: #f5f1f1;
+  --muted: #b5a9ab;
+  --faint: #75676a;
+  --accent: #e0263a;
+  --accent-text: #ffffff;
+  --accent-soft: rgba(224, 38, 58, 0.16);
+  --danger: #ff5c6c;
+  --success: #4fd1a1;
+  --warn: #f5b84b;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+}
+/* Small badge text on the red tint needs a brighter red to stay legible. */
+[data-theme="crimson"] .badge:not(.badge--warn):not(.badge--muted) { color: #ff5a6a; }
+
 [data-theme="daylight"] {
   color-scheme: light;
   --bg: #f6f7f9;