nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed legacy themes + added goth

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-14 11:14:37 +02:00
parent 04b0326778
commit af70f743be
3 changed files with 62 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/ThemeSwitcher.tsx
+2 -3
View File
@@ -3,15 +3,14 @@ import { useState, useEffect, useRef } from 'react';
const THEMES = [ const THEMES = [
{ value: 'salon', label: 'Salon' }, { value: 'salon', label: 'Salon' },
{ value: 'salon-noir', label: 'Salon Noir' }, { value: 'salon-noir', label: 'Salon Noir' },
{ value: 'latte', label: 'Latte' }, { value: 'gothic', label: 'Gothic' },
{ value: 'mocha', label: 'Mocha' },
]; ];
interface Props { interface Props {
defaultTheme?: string; defaultTheme?: string;
} }
export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) { export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
const [theme, setTheme] = useState(() => { const [theme, setTheme] = useState(() => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
return localStorage.getItem('user-theme') || defaultTheme; return localStorage.getItem('user-theme') || defaultTheme;
frontend/src/components/react/admin/Settings.tsx
+2 -3
View File
@@ -68,10 +68,9 @@ export default function Settings() {
> >
<option value="salon">Salon (parchment, default)</option> <option value="salon">Salon (parchment, default)</option>
<option value="salon-noir">Salon Noir (black gallery wall)</option> <option value="salon-noir">Salon Noir (black gallery wall)</option>
<option value="latte">Latte (light)</option> <option value="gothic">Gothic (cathedral nightfall)</option>
<option value="mocha">Mocha (dark)</option>
</select> </select>
<p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p> <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">All three are tuned for the gallery aesthetic. Gothic leans into deep violet-black with cathedral indigo and blood-crimson accents.</p>
</div> </div>
<div> <div>
<label className="field-label">Custom CSS</label> <label className="field-label">Custom CSS</label>
frontend/src/styles/global.css
+58 -26
View File
@@ -101,29 +101,36 @@
--rosewater: #F4E5C9; --rosewater: #F4E5C9;
} }
/* Legacy Catppuccin themes — kept for users that already opted in. */ /* GOTHIC — cathedral nightfall. Midnight violet ground, blood crimson,
.mocha { * tarnished candle gold, stained-glass indigo. Catholic-gothic + Sisters of
--crust: #11111b; --mantle: #181825; --base: #1e1e2e; * Mercy + Bauhaus stark. Primary accent: cathedral velvet mauve. */
--surface0: #313244; --surface1: #45475a; --surface2: #585b70; .gothic {
--overlay0: #6c7086; --overlay1: #7f849c; --overlay2: #9399b2; --crust: #030104;
--text: #cdd6f4; --subtext0: #a6adc8; --subtext1: #bac2de; --mantle: #0A0710;
--blue: #89b4fa; --lavender: #b4befe; --sapphire: #74c7ec; --base: #110B18;
--sky: #89dceb; --teal: #94e2d5; --green: #a6e3a1; --surface0: #1A1224;
--yellow: #f9e2af; --peach: #fab387; --maroon: #eba0ac; --surface1: #261A36;
--red: #f38ba8; --mauve: #cba6f7; --pink: #f5c2e7; --surface2: #382550;
--flamingo: #f2cdcd; --rosewater: #f5e0dc; --overlay0: #4F3970;
} --overlay1: #6E5293;
--overlay2: #8D72B1;
.latte { --text: #EDE3F2; /* bone, violet wash */
--crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5; --subtext0: #9B8AB0;
--surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be; --subtext1: #C0AED2;
--overlay0: #7c7f93; --overlay1: #6c6f85; --overlay2: #5c5f77; --blue: #4239A4; /* stained-glass deep */
--text: #1e1e2e; --subtext0: #3c3f59; --subtext1: #4c4f69; --lavender: #9B7BD4; /* candlelight through purple glass */
--blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5; --sapphire: #5947B2;
--sky: #04a5e5; --teal: #179299; --green: #40a02b; --sky: #7C68C9;
--yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553; --teal: #487B8A; /* verdigris on bronze */
--red: #d20f39; --mauve: #8839ef; --pink: #ea76cb; --green: #5E7842; /* cemetery moss */
--flamingo: #dd7878; --rosewater: #dc8a78; --yellow: #D4A82B; /* taper / tarnished brass */
--peach: #B45A38; /* rust */
--maroon: #5B1A24;
--red: #A41827; /* arterial */
--mauve: #8B2C9E; /* cathedral velvet — primary accent */
--pink: #B25288; /* dried rose */
--flamingo: #C57B96;
--rosewater: #F0DDE8;
} }
html { html {
@@ -168,6 +175,13 @@ body::after {
html.salon-noir body::after { html.salon-noir body::after {
opacity: 0.5; opacity: 0.5;
} }
.gothic body::after,
html.gothic body::after {
opacity: 0.55;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
mix-blend-mode: screen;
}
/* Floating motes of pigment — far background, very subtle. */ /* Floating motes of pigment — far background, very subtle. */
.salon-atmosphere { .salon-atmosphere {
@@ -437,7 +451,9 @@ code, pre, kbd, samp {
border-radius: 2px; border-radius: 2px;
} }
.salon-noir .prose figure img, .salon-noir .prose figure img,
.salon-noir .prose img { .salon-noir .prose img,
.gothic .prose figure img,
.gothic .prose img {
background: background:
linear-gradient(var(--surface0), var(--surface0)) padding-box, linear-gradient(var(--surface0), var(--surface0)) padding-box,
linear-gradient(135deg, var(--surface2), var(--surface1)) border-box; linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
@@ -445,6 +461,13 @@ code, pre, kbd, samp {
0 18px 38px -22px rgba(0, 0, 0, 0.7), 0 18px 38px -22px rgba(0, 0, 0, 0.7),
0 2px 6px -2px rgba(0, 0, 0, 0.5); 0 2px 6px -2px rgba(0, 0, 0, 0.5);
} }
.gothic .prose figure img,
.gothic .prose img {
box-shadow:
0 18px 38px -22px rgba(0, 0, 0, 0.85),
0 2px 6px -2px rgba(0, 0, 0, 0.6),
0 0 0 1px color-mix(in srgb, var(--mauve) 22%, transparent);
}
.prose figure figcaption { .prose figure figcaption {
font-family: var(--font-display); font-family: var(--font-display);
font-style: italic; font-style: italic;
@@ -500,7 +523,8 @@ code, pre, kbd, samp {
transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1); box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
} }
.salon-noir .plate { .salon-noir .plate,
.gothic .plate {
background: var(--surface0); background: var(--surface0);
} }
.plate:hover { .plate:hover {
@@ -690,9 +714,16 @@ code, pre, kbd, samp {
0 10px 30px -20px rgba(20, 16, 12, 0.45); 0 10px 30px -20px rgba(20, 16, 12, 0.45);
border-radius: 2px; border-radius: 2px;
} }
.salon-noir .glass { .salon-noir .glass,
.gothic .glass {
background-color: color-mix(in srgb, var(--surface0) 70%, transparent); background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
} }
.gothic .glass {
border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--mauve) 18%, transparent),
0 14px 40px -24px rgba(0, 0, 0, 0.85);
}
/* ───── Buttons ───── */ /* ───── Buttons ───── */
.btn-stamp { .btn-stamp {
@@ -848,6 +879,7 @@ code, pre, kbd, samp {
input[type="checkbox"] { accent-color: var(--mauve); } input[type="checkbox"] { accent-color: var(--mauve); }
input[type="date"] { color-scheme: light; } input[type="date"] { color-scheme: light; }
.salon-noir input[type="date"] { color-scheme: dark; } .salon-noir input[type="date"] { color-scheme: dark; }
.gothic input[type="date"] { color-scheme: dark; }
/* Reading progress bar - thin terracotta line */ /* Reading progress bar - thin terracotta line */
.reading-progress { .reading-progress {