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>
This commit is contained in:
cdnutterandClaude Opus 5.5 committed 2026-09-25 10:10:15 -07:00
1 parent fd56fa8eb1
commit 6d92b46130
3 files changed
+24 -1

No files matched your search

+1 -1
View File
@@ -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] {
+1
View File
@@ -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},
+22
View File
@@ -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;