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:
1 parent
fd56fa8eb1
commit
6d92b46130
3 files changed
+24
-1
No files matched your search
@@ -87,7 +87,7 @@ favorites.example.com {
|
|||||||
|
|
||||||
## Theming
|
## 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
|
```css
|
||||||
:root, [data-theme] {
|
:root, [data-theme] {
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ var Themes = []Theme{
|
|||||||
{"gruvbox", "Gruvbox", true},
|
{"gruvbox", "Gruvbox", true},
|
||||||
{"forest", "Forest", true},
|
{"forest", "Forest", true},
|
||||||
{"synthwave", "Synthwave", true},
|
{"synthwave", "Synthwave", true},
|
||||||
|
{"crimson", "Crimson", true},
|
||||||
{"daylight", "Daylight", false},
|
{"daylight", "Daylight", false},
|
||||||
{"paper", "Paper", false},
|
{"paper", "Paper", false},
|
||||||
{"latte", "Latte", false},
|
{"latte", "Latte", false},
|
||||||
|
|||||||
@@ -164,6 +164,28 @@
|
|||||||
--shadow: 0 10px 40px rgba(255, 79, 216, 0.12);
|
--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"] {
|
[data-theme="daylight"] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--bg: #f6f7f9;
|
--bg: #f6f7f9;
|
||||||
|
|||||||
Reference in new issue
Block a user