diff --git a/ui/messages/en.json b/ui/messages/en.json index a509a5f..926146d 100644 --- a/ui/messages/en.json +++ b/ui/messages/en.json @@ -160,6 +160,9 @@ "profile_theme_amber": "Amber", "profile_theme_slate": "Slate", "profile_theme_rose": "Rose", + "profile_theme_light": "Light", + "profile_theme_light_slate": "Light Blue", + "profile_theme_light_rose": "Light Rose", "profile_reading_heading": "Reading settings", "profile_voice_label": "Default voice", "profile_speed_label": "Playback speed", diff --git a/ui/messages/fr.json b/ui/messages/fr.json index 52c0dc5..25f1263 100644 --- a/ui/messages/fr.json +++ b/ui/messages/fr.json @@ -160,6 +160,9 @@ "profile_theme_amber": "Ambre", "profile_theme_slate": "Ardoise", "profile_theme_rose": "Rose", + "profile_theme_light": "Light", + "profile_theme_light_slate": "Light Blue", + "profile_theme_light_rose": "Light Rose", "profile_reading_heading": "Paramètres de lecture", "profile_voice_label": "Voix par défaut", "profile_speed_label": "Vitesse de lecture", diff --git a/ui/messages/id.json b/ui/messages/id.json index cce7dae..97967dd 100644 --- a/ui/messages/id.json +++ b/ui/messages/id.json @@ -160,6 +160,9 @@ "profile_theme_amber": "Amber", "profile_theme_slate": "Abu-abu", "profile_theme_rose": "Mawar", + "profile_theme_light": "Light", + "profile_theme_light_slate": "Light Blue", + "profile_theme_light_rose": "Light Rose", "profile_reading_heading": "Pengaturan membaca", "profile_voice_label": "Suara default", "profile_speed_label": "Kecepatan pemutaran", diff --git a/ui/messages/pt.json b/ui/messages/pt.json index e36b04d..8ab2210 100644 --- a/ui/messages/pt.json +++ b/ui/messages/pt.json @@ -160,6 +160,9 @@ "profile_theme_amber": "Âmbar", "profile_theme_slate": "Ardósia", "profile_theme_rose": "Rosa", + "profile_theme_light": "Light", + "profile_theme_light_slate": "Light Blue", + "profile_theme_light_rose": "Light Rose", "profile_reading_heading": "Configurações de leitura", "profile_voice_label": "Voz padrão", "profile_speed_label": "Velocidade de reprodução", diff --git a/ui/messages/ru.json b/ui/messages/ru.json index 4992f56..51c3386 100644 --- a/ui/messages/ru.json +++ b/ui/messages/ru.json @@ -160,6 +160,9 @@ "profile_theme_amber": "Янтарь", "profile_theme_slate": "Сланец", "profile_theme_rose": "Роза", + "profile_theme_light": "Light", + "profile_theme_light_slate": "Light Blue", + "profile_theme_light_rose": "Light Rose", "profile_reading_heading": "Настройки чтения", "profile_voice_label": "Голос по умолчанию", "profile_speed_label": "Скорость воспроизведения", diff --git a/ui/src/app.css b/ui/src/app.css index bdcb4b3..1491ed1 100644 --- a/ui/src/app.css +++ b/ui/src/app.css @@ -55,6 +55,48 @@ --color-success: #4ade80; /* green-400 */ } +/* ── Light amber theme ────────────────────────────────────────────────── */ +[data-theme="light"] { + --color-brand: #d97706; /* amber-600 */ + --color-brand-dim: #b45309; /* amber-700 */ + --color-surface: #ffffff; + --color-surface-2: #f4f4f5; /* zinc-100 */ + --color-surface-3: #e4e4e7; /* zinc-200 */ + --color-muted: #71717a; /* zinc-500 */ + --color-text: #18181b; /* zinc-900 */ + --color-border: #d4d4d8; /* zinc-300 */ + --color-danger: #dc2626; /* red-600 */ + --color-success: #16a34a; /* green-600 */ +} + +/* ── Light slate theme ────────────────────────────────────────────────── */ +[data-theme="light-slate"] { + --color-brand: #4f46e5; /* indigo-600 */ + --color-brand-dim: #4338ca; /* indigo-700 */ + --color-surface: #f8fafc; /* slate-50 */ + --color-surface-2: #f1f5f9; /* slate-100 */ + --color-surface-3: #e2e8f0; /* slate-200 */ + --color-muted: #64748b; /* slate-500 */ + --color-text: #0f172a; /* slate-900 */ + --color-border: #cbd5e1; /* slate-300 */ + --color-danger: #dc2626; /* red-600 */ + --color-success: #16a34a; /* green-600 */ +} + +/* ── Light rose theme ─────────────────────────────────────────────────── */ +[data-theme="light-rose"] { + --color-brand: #e11d48; /* rose-600 */ + --color-brand-dim: #be123c; /* rose-700 */ + --color-surface: #fff1f2; /* rose-50 */ + --color-surface-2: #ffe4e6; /* rose-100 */ + --color-surface-3: #fecdd3; /* rose-200 */ + --color-muted: #9f1239; /* rose-800 at 60% */ + --color-text: #0f0a0b; /* near black */ + --color-border: #fda4af; /* rose-300 */ + --color-danger: #dc2626; /* red-600 */ + --color-success: #16a34a; /* green-600 */ +} + 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 fe3ef87..f00587f 100644 --- a/ui/src/routes/+layout.svelte +++ b/ui/src/routes/+layout.svelte @@ -22,9 +22,12 @@ let langMenuOpen = $state(false); const THEMES = [ - { id: 'amber', color: '#f59e0b' }, - { id: 'slate', color: '#818cf8' }, - { id: 'rose', color: '#fb7185' }, + { id: 'amber', color: '#f59e0b' }, + { id: 'slate', color: '#818cf8' }, + { id: 'rose', color: '#fb7185' }, + { id: 'light', color: '#d97706', light: true }, + { id: 'light-slate', color: '#4f46e5', light: true }, + { id: 'light-rose', color: '#e11d48', light: true }, ]; // Chapter list drawer state for the mini-player @@ -316,12 +319,15 @@