From c317c085aa40ca16a737091ca0040db546bcaf80 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 26 Apr 2026 20:53:10 +0200
Subject: [PATCH] fix(nav): replace hardcoded ThemeToggle title with Paraglide
 i18n keys

Add theme_toggle_to_light / theme_toggle_to_dark to de/en/es messages.
Extract themeLabel as $derived and use it for both aria-label and title,
matching the pattern applied to NotificationBell.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                      | 2 ++
 frontend/messages/en.json                      | 2 ++
 frontend/messages/es.json                      | 2 ++
 frontend/src/lib/components/ThemeToggle.svelte | 9 +++++++--
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 8522580c..3c3b31f1 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -23,6 +23,8 @@
 	"nav_conversations": "Briefwechsel",
 	"nav_admin": "Admin",
 	"nav_logout": "Abmelden",
+	"theme_toggle_to_light": "Zu hellem Design wechseln",
+	"theme_toggle_to_dark": "Zu dunklem Design wechseln",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
 	"btn_confirm": "Bestätigen",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index cddafac1..57a29039 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -23,6 +23,8 @@
 	"nav_conversations": "Letters",
 	"nav_admin": "Admin",
 	"nav_logout": "Sign out",
+	"theme_toggle_to_light": "Switch to light mode",
+	"theme_toggle_to_dark": "Switch to dark mode",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
 	"btn_confirm": "Confirm",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index f5125884..ef6a4ee6 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -23,6 +23,8 @@
 	"nav_conversations": "Cartas",
 	"nav_admin": "Admin",
 	"nav_logout": "Cerrar sesión",
+	"theme_toggle_to_light": "Cambiar a modo claro",
+	"theme_toggle_to_dark": "Cambiar a modo oscuro",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
 	"btn_confirm": "Confirmar",
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index 012fd670..834f765c 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
 
 type Theme = 'light' | 'dark';
 
@@ -19,6 +20,10 @@ onMount(() => {
 	theme = resolveInitialTheme();
 });
 
+const themeLabel = $derived(
+	theme === 'dark' ? m.theme_toggle_to_light() : m.theme_toggle_to_dark()
+);
+
 function toggle() {
 	theme = theme === 'dark' ? 'light' : 'dark';
 	localStorage.setItem('theme', theme);
@@ -29,8 +34,8 @@ function toggle() {
 <button
 	type="button"
 	onclick={toggle}
-	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
-	title={theme === 'dark' ? 'light mode' : 'dark mode'}
+	aria-label={themeLabel}
+	title={themeLabel}
 	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	{#if theme === 'dark'}