feat: add Forest, Mono, and Cyberpunk color themes
Some checks failed
Release / Test backend (push) Successful in 38s
Release / Check ui (push) Failing after 31s
Release / Upload source maps (push) Has been skipped
Release / Docker / ui (push) Has been skipped
Release / Docker / caddy (push) Successful in 41s
Release / Docker / backend (push) Successful in 2m29s
Release / Docker / runner (push) Successful in 2m39s
Release / Gitea Release (push) Has been skipped
Some checks failed
Release / Test backend (push) Successful in 38s
Release / Check ui (push) Failing after 31s
Release / Upload source maps (push) Has been skipped
Release / Docker / ui (push) Has been skipped
Release / Docker / caddy (push) Successful in 41s
Release / Docker / backend (push) Successful in 2m29s
Release / Docker / runner (push) Successful in 2m39s
Release / Gitea Release (push) Has been skipped
Forest — deep green surfaces (#0a130d base) with green-400 accent. Inspired by terminal emulators and dark mode IDE forest schemes. Mono — near-black zinc-950 surface with pure white/zinc-100 accent. Minimal high-contrast monochromatic palette for distraction-free reading. Cyber — near-black blue surface with neon cyan-400 accent and dracula-palette success/danger colors. Cyberpunk aesthetic with neon glow feel. Changes: - app.css: three new [data-theme] blocks with full token sets - +layout.svelte: added forest/mono/cyber to THEMES array (before light themes) - profile/+page.svelte: same additions with i18n label functions - messages/*.json: translated names in all 5 locales (en/fr/ru/pt/id)
This commit is contained in:
@@ -97,6 +97,48 @@
|
||||
--color-success: #16a34a; /* green-600 */
|
||||
}
|
||||
|
||||
/* ── Forest theme — dark green ────────────────────────────────────────── */
|
||||
[data-theme="forest"] {
|
||||
--color-brand: #4ade80; /* green-400 */
|
||||
--color-brand-dim: #16a34a; /* green-600 */
|
||||
--color-surface: #0a130d; /* custom near-black green */
|
||||
--color-surface-2: #111c14; /* custom dark green */
|
||||
--color-surface-3: #1a2e1e; /* custom mid green */
|
||||
--color-muted: #6b9a77; /* custom muted green */
|
||||
--color-text: #e8f5e9; /* custom light green-tinted white */
|
||||
--color-border: #1e3a24; /* custom green border */
|
||||
--color-danger: #f87171; /* red-400 */
|
||||
--color-success: #4ade80; /* green-400 */
|
||||
}
|
||||
|
||||
/* ── Mono theme — pure dark with white accent ─────────────────────────── */
|
||||
[data-theme="mono"] {
|
||||
--color-brand: #f4f4f5; /* zinc-100 — white accent */
|
||||
--color-brand-dim: #a1a1aa; /* zinc-400 */
|
||||
--color-surface: #09090b; /* zinc-950 */
|
||||
--color-surface-2: #18181b; /* zinc-900 */
|
||||
--color-surface-3: #27272a; /* zinc-800 */
|
||||
--color-muted: #71717a; /* zinc-500 */
|
||||
--color-text: #f4f4f5; /* zinc-100 */
|
||||
--color-border: #27272a; /* zinc-800 */
|
||||
--color-danger: #f87171; /* red-400 */
|
||||
--color-success: #4ade80; /* green-400 */
|
||||
}
|
||||
|
||||
/* ── Cyberpunk theme — dark with neon cyan/magenta accents ────────────── */
|
||||
[data-theme="cyber"] {
|
||||
--color-brand: #22d3ee; /* cyan-400 — neon cyan */
|
||||
--color-brand-dim: #06b6d4; /* cyan-500 */
|
||||
--color-surface: #050712; /* custom near-black blue */
|
||||
--color-surface-2: #0d1117; /* custom dark blue-black */
|
||||
--color-surface-3: #161b27; /* custom dark blue */
|
||||
--color-muted: #6272a4; /* dracula comment blue */
|
||||
--color-text: #e2e8f0; /* slate-200 */
|
||||
--color-border: #1e2d45; /* custom dark border */
|
||||
--color-danger: #ff5555; /* dracula red */
|
||||
--color-success: #50fa7b; /* dracula green */
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
|
||||
Reference in New Issue
Block a user