feat: add internationalization for theme and language switchers

- Update `en.json` and `zh.json` with new translations for theme and language switching
- Modify `LocaleSwitcher` and `ThemeSwitcher` components to use internationalized labels
- Replace hardcoded strings with translations from `useTranslations` hook
- Improve accessibility by using translated aria-labels and sr-only text
- Refactor button styling to use `size-9` utility class

messages/en.json

@@ -8,7 +8,12 @@
   "Common": {
     "login": "Login",
     "logout": "Log out",
-    "signUp": "Sign up"
+    "signUp": "Sign up",
+    "theme": "Toggle theme",
+    "language": "Switch language",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
   },
   "HomePage": {
     "title": "next-intl example"

messages/zh.json

@@ -8,7 +8,12 @@
   "Common": {
     "login": "登录",
     "logout": "退出",
-    "signUp": "注册"
+    "signUp": "注册",
+    "theme": "切换主题",
+    "language": "切换语言",
+    "light": "浅色模式",
+    "dark": "深色模式",
+    "system": "跟随系统"
   },
   "HomePage": {
     "title": "next-intl 示例"

src/components/layout/locale-switcher.tsx

@@ -8,10 +8,10 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useLocalePathname, useLocaleRouter } from '@/i18n/navigation';
-import { DEFAULT_LOCALE, Locale, LOCALE_LIST, routing } from '@/i18n/routing';
+import { Locale, LOCALE_LIST, routing } from '@/i18n/routing';
 import { useLocaleStore } from '@/stores/locale-store';
 import { Languages } from 'lucide-react';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import { useEffect, useTransition } from 'react';
 
@@ -30,7 +30,8 @@ export default function LocaleSwitcher() {
   const locale = useLocale();
   const { currentLocale, setCurrentLocale } = useLocaleStore();
   const [, startTransition] = useTransition();
-
+  const t = useTranslations('Common');
+  
   useEffect(() => {
     setCurrentLocale(locale);
   }, [locale, setCurrentLocale]);
@@ -55,10 +56,10 @@ export default function LocaleSwitcher() {
         <Button
           variant="ghost"
           size="sm"
-          className="h-9 w-9 p-0.5 border border-border rounded-full"
+          className="size-9 p-0.5 border border-border rounded-full"
         >
           <Languages className="size-3" />
-          <span className="sr-only">Switch language</span>
+          <span className="sr-only">{t('language')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">

src/components/layout/theme-switcher-horizontal.tsx

@@ -5,6 +5,7 @@ import { LaptopIcon, MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { cn } from '@/lib/utils';
 import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 
 /**
  * Theme switcher component, used in the footer, switch theme by theme variable
@@ -12,6 +13,7 @@ import { useEffect, useState } from 'react';
 export function ThemeSwitcherHorizontal() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const t = useTranslations('Common');
 
   // Only show the UI after hydration to prevent hydration mismatch
   useEffect(() => {
@@ -38,7 +40,7 @@ export function ThemeSwitcherHorizontal() {
           theme === 'light' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('light')}
-        aria-label="Light mode"
+        aria-label={t('light')}
       >
         <SunIcon className="size-4" />
       </Button>
@@ -51,7 +53,7 @@ export function ThemeSwitcherHorizontal() {
           theme === 'dark' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('dark')}
-        aria-label="Dark mode"
+        aria-label={t('dark')}
       >
         <MoonIcon className="size-4" />
       </Button>
@@ -64,7 +66,7 @@ export function ThemeSwitcherHorizontal() {
           theme === 'system' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('system')}
-        aria-label="System mode"
+        aria-label={t('system')}
       >
         <LaptopIcon className="size-4" />
       </Button>

src/components/layout/theme-switcher.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { LaptopIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 
 /**
@@ -15,6 +16,7 @@ import { useTheme } from 'next-themes';
  */
 export function ThemeSwitcher() {
   const { setTheme } = useTheme();
+  const t = useTranslations('Common');
 
   return (
     <DropdownMenu>
@@ -22,11 +24,11 @@ export function ThemeSwitcher() {
         <Button
           variant="ghost"
           size="sm"
-          className="h-9 w-9 p-0.5 border border-border rounded-full"
+          className="size-9 p-0.5 border border-border rounded-full"
         >
           <SunIcon className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
+          <span className="sr-only">{t('theme')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -35,21 +37,21 @@ export function ThemeSwitcher() {
           className="cursor-pointer"
         >
           <SunIcon className="mr-2 size-4" />
-          <span>Light</span>
+          <span>{t('light')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setTheme('dark')}
           className="cursor-pointer"
         >
           <MoonIcon className="mr-2 size-4" />
-          <span>Dark</span>
+          <span>{t('dark')}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setTheme('system')}
           className="cursor-pointer"
         >
           <LaptopIcon className="mr-2 size-4" />
-          <span>System</span>
+          <span>{t('system')}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>