feat(i18n): convert ThemeToggle to t() (Batch F)

This commit is contained in:
iamdoubz committed 2026-07-12 12:53:22 -05:00
1 parent 681933c8cf
commit 8fc5d72576
1 file changed
+9 -6
+9 -6
View File
@@ -3,6 +3,7 @@
// plain <select> — three icon buttons instead of a text dropdown, defaults
// to "system" so the app follows the OS until the user picks an override.
import { Monitor, Sun, Moon } from "@lucide/svelte";
import { t } from "../i18n/index.svelte";
interface Props {
value: "system" | "light" | "dark";
@@ -10,21 +11,23 @@
}
let { value, onchange }: Props = $props();
// labelKey resolves through t() in the template so a language switch relabels
// the buttons (a t() call in this module-level const would evaluate once).
const options = [
{ id: "system", label: "Match system", Icon: Monitor },
{ id: "light", label: "Light", Icon: Sun },
{ id: "dark", label: "Dark", Icon: Moon },
{ id: "system", labelKey: "theme.system", Icon: Monitor },
{ id: "light", labelKey: "theme.light", Icon: Sun },
{ id: "dark", labelKey: "theme.dark", Icon: Moon },
] as const;
</script>
<div class="toggle" role="radiogroup" aria-label="Theme">
<div class="toggle" role="radiogroup" aria-label={t("theme.group")}>
{#each options as opt (opt.id)}
<button
role="radio"
aria-checked={value === opt.id}
class:active={value === opt.id}
title={opt.label}
aria-label={opt.label}
title={t(opt.labelKey)}
aria-label={t(opt.labelKey)}
onclick={() => onchange(opt.id)}
>
<opt.Icon size={15} strokeWidth={2} aria-hidden="true" />