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;