From 17fa913ba9bfe007d139627d42e8a114699c855f Mon Sep 17 00:00:00 2001 From: root Date: Tue, 7 Apr 2026 11:27:30 +0500 Subject: [PATCH] feat: add Forest, Mono, and Cyberpunk color themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- ui/messages/en.json | 3 +++ ui/messages/fr.json | 3 +++ ui/messages/id.json | 3 +++ ui/messages/pt.json | 3 +++ ui/messages/ru.json | 3 +++ ui/src/app.css | 42 ++++++++++++++++++++++++++++++ ui/src/routes/+layout.svelte | 3 +++ ui/src/routes/profile/+page.svelte | 3 +++ 8 files changed, 63 insertions(+) diff --git a/ui/messages/en.json b/ui/messages/en.json index 8ce3fe4..6b1b24d 100644 --- a/ui/messages/en.json +++ b/ui/messages/en.json @@ -161,6 +161,9 @@ "profile_theme_amber": "Amber", "profile_theme_slate": "Slate", "profile_theme_rose": "Rose", + "profile_theme_forest": "Forest", + "profile_theme_mono": "Mono", + "profile_theme_cyber": "Cyberpunk", "profile_theme_light": "Light", "profile_theme_light_slate": "Light Blue", "profile_theme_light_rose": "Light Rose", diff --git a/ui/messages/fr.json b/ui/messages/fr.json index 78810ec..d3289d7 100644 --- a/ui/messages/fr.json +++ b/ui/messages/fr.json @@ -161,6 +161,9 @@ "profile_theme_amber": "Ambre", "profile_theme_slate": "Ardoise", "profile_theme_rose": "Rose", + "profile_theme_forest": "Forêt", + "profile_theme_mono": "Mono", + "profile_theme_cyber": "Cyberpunk", "profile_theme_light": "Light", "profile_theme_light_slate": "Light Blue", "profile_theme_light_rose": "Light Rose", diff --git a/ui/messages/id.json b/ui/messages/id.json index 70b71cb..e843e20 100644 --- a/ui/messages/id.json +++ b/ui/messages/id.json @@ -161,6 +161,9 @@ "profile_theme_amber": "Amber", "profile_theme_slate": "Abu-abu", "profile_theme_rose": "Mawar", + "profile_theme_forest": "Hutan", + "profile_theme_mono": "Mono", + "profile_theme_cyber": "Cyberpunk", "profile_theme_light": "Light", "profile_theme_light_slate": "Light Blue", "profile_theme_light_rose": "Light Rose", diff --git a/ui/messages/pt.json b/ui/messages/pt.json index 26007d5..2a33bdb 100644 --- a/ui/messages/pt.json +++ b/ui/messages/pt.json @@ -161,6 +161,9 @@ "profile_theme_amber": "Âmbar", "profile_theme_slate": "Ardósia", "profile_theme_rose": "Rosa", + "profile_theme_forest": "Floresta", + "profile_theme_mono": "Mono", + "profile_theme_cyber": "Cyberpunk", "profile_theme_light": "Light", "profile_theme_light_slate": "Light Blue", "profile_theme_light_rose": "Light Rose", diff --git a/ui/messages/ru.json b/ui/messages/ru.json index 3e788ed..f78272b 100644 --- a/ui/messages/ru.json +++ b/ui/messages/ru.json @@ -161,6 +161,9 @@ "profile_theme_amber": "Янтарь", "profile_theme_slate": "Сланец", "profile_theme_rose": "Роза", + "profile_theme_forest": "Лес", + "profile_theme_mono": "Моно", + "profile_theme_cyber": "Киберпанк", "profile_theme_light": "Light", "profile_theme_light_slate": "Light Blue", "profile_theme_light_rose": "Light Rose", diff --git a/ui/src/app.css b/ui/src/app.css index ab806d7..770d94d 100644 --- a/ui/src/app.css +++ b/ui/src/app.css @@ -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); diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte index 4a38159..3ba4f55 100644 --- a/ui/src/routes/+layout.svelte +++ b/ui/src/routes/+layout.svelte @@ -38,6 +38,9 @@ { id: 'amber', color: '#f59e0b' }, { id: 'slate', color: '#818cf8' }, { id: 'rose', color: '#fb7185' }, + { id: 'forest', color: '#4ade80' }, + { id: 'mono', color: '#f4f4f5' }, + { id: 'cyber', color: '#22d3ee' }, { id: 'light', color: '#d97706', light: true }, { id: 'light-slate', color: '#4f46e5', light: true }, { id: 'light-rose', color: '#e11d48', light: true }, diff --git a/ui/src/routes/profile/+page.svelte b/ui/src/routes/profile/+page.svelte index 6cc9801..b15d8ba 100644 --- a/ui/src/routes/profile/+page.svelte +++ b/ui/src/routes/profile/+page.svelte @@ -145,6 +145,9 @@ { id: 'amber', label: () => m.profile_theme_amber(), swatch: '#f59e0b' }, { id: 'slate', label: () => m.profile_theme_slate(), swatch: '#818cf8' }, { id: 'rose', label: () => m.profile_theme_rose(), swatch: '#fb7185' }, + { id: 'forest', label: () => m.profile_theme_forest(), swatch: '#4ade80' }, + { id: 'mono', label: () => m.profile_theme_mono(), swatch: '#f4f4f5' }, + { id: 'cyber', label: () => m.profile_theme_cyber(), swatch: '#22d3ee' }, { id: 'light', label: () => m.profile_theme_light(), swatch: '#d97706', light: true }, { id: 'light-slate', label: () => m.profile_theme_light_slate(), swatch: '#4f46e5', light: true }, { id: 'light-rose', label: () => m.profile_theme_light_rose(), swatch: '#e11d48', light: true },