Add theme descriptions to all translation files and update theme-picker-form

Co-authored-by: danielalves96 <62755605+danielalves96@users.noreply.github.com>

apps/web/messages/ar-SA.json

@@ -1662,7 +1662,10 @@
     "toggle": "تبديل السمة",
     "light": "فاتح",
     "dark": "داكن",
-    "system": "النظام"
+    "system": "النظام",
+    "lightDescription": "الوضع الفاتح دائماً",
+    "darkDescription": "الوضع الداكن دائماً",
+    "systemDescription": "اتباع تفضيلات النظام"
   },
   "twoFactor": {
     "title": "المصادقة الثنائية",

apps/web/messages/de-DE.json

@@ -1660,7 +1660,10 @@
     "toggle": "Design umschalten",
     "light": "Hell",
     "dark": "Dunkel",
-    "system": "System"
+    "system": "System",
+    "lightDescription": "Immer heller Modus",
+    "darkDescription": "Immer dunkler Modus",
+    "systemDescription": "Systempräferenz folgen"
   },
   "twoFactor": {
     "title": "Zwei-Faktor-Authentifizierung",

apps/web/messages/en-US.json

@@ -1625,7 +1625,10 @@
     "toggle": "Toggle theme",
     "light": "Light",
     "dark": "Dark",
-    "system": "System"
+    "system": "System",
+    "lightDescription": "Always light mode",
+    "darkDescription": "Always dark mode",
+    "systemDescription": "Follow system preference"
   },
   "twoFactor": {
     "title": "Two-Factor Authentication",

apps/web/messages/es-ES.json

@@ -1660,7 +1660,10 @@
     "toggle": "Cambiar tema",
     "light": "Claro",
     "dark": "Oscuro",
-    "system": "Sistema"
+    "system": "Sistema",
+    "lightDescription": "Siempre modo claro",
+    "darkDescription": "Siempre modo oscuro",
+    "systemDescription": "Seguir preferencia del sistema"
   },
   "twoFactor": {
     "title": "Autenticación de dos factores",

apps/web/messages/fr-FR.json

@@ -1660,7 +1660,10 @@
     "toggle": "Changer le thème",
     "light": "Clair",
     "dark": "Sombre",
-    "system": "Système"
+    "system": "Système",
+    "lightDescription": "Toujours en mode clair",
+    "darkDescription": "Toujours en mode sombre",
+    "systemDescription": "Suivre les préférences système"
   },
   "twoFactor": {
     "title": "Authentification à Deux Facteurs",

apps/web/messages/hi-IN.json

@@ -1660,7 +1660,10 @@
     "toggle": "थीम टॉगल करें",
     "light": "लाइट",
     "dark": "डार्क",
-    "system": "सिस्टम"
+    "system": "सिस्टम",
+    "lightDescription": "हमेशा लाइट मोड",
+    "darkDescription": "हमेशा डार्क मोड",
+    "systemDescription": "सिस्टम प्राथमिकता का पालन करें"
   },
   "twoFactor": {
     "title": "दो-कारक प्रमाणीकरण",

apps/web/messages/it-IT.json

@@ -1660,7 +1660,10 @@
     "toggle": "Cambia tema",
     "light": "Chiaro",
     "dark": "Scuro",
-    "system": "Sistema"
+    "system": "Sistema",
+    "lightDescription": "Sempre modalità chiara",
+    "darkDescription": "Sempre modalità scura",
+    "systemDescription": "Segui preferenze di sistema"
   },
   "twoFactor": {
     "title": "Autenticazione a Due Fattori",

apps/web/messages/ja-JP.json

@@ -1660,7 +1660,10 @@
     "toggle": "テーマを切り替える",
     "light": "ライト",
     "dark": "ダーク",
-    "system": "システム"
+    "system": "システム",
+    "lightDescription": "常にライトモード",
+    "darkDescription": "常にダークモード",
+    "systemDescription": "システム設定に従う"
   },
   "twoFactor": {
     "title": "二要素認証",

apps/web/messages/ko-KR.json

@@ -1660,7 +1660,10 @@
     "toggle": "테마 전환",
     "light": "라이트",
     "dark": "다크",
-    "system": "시스템"
+    "system": "시스템",
+    "lightDescription": "항상 라이트 모드",
+    "darkDescription": "항상 다크 모드",
+    "systemDescription": "시스템 설정 따르기"
   },
   "twoFactor": {
     "title": "2단계 인증",

apps/web/messages/nl-NL.json

@@ -1660,7 +1660,10 @@
     "toggle": "Thema wisselen",
     "light": "Licht",
     "dark": "Donker",
-    "system": "Systeem"
+    "system": "Systeem",
+    "lightDescription": "Altijd lichte modus",
+    "darkDescription": "Altijd donkere modus",
+    "systemDescription": "Systeemvoorkeur volgen"
   },
   "twoFactor": {
     "title": "Twee-Factor Authenticatie",

apps/web/messages/pl-PL.json

@@ -1660,7 +1660,10 @@
     "toggle": "Przełącz motyw",
     "light": "Jasny",
     "dark": "Ciemny",
-    "system": "Systemowy"
+    "system": "Systemowy",
+    "lightDescription": "Zawsze jasny tryb",
+    "darkDescription": "Zawsze ciemny tryb",
+    "systemDescription": "Zgodnie z ustawieniami systemu"
   },
   "twoFactor": {
     "title": "Uwierzytelnianie dwuskładnikowe",

apps/web/messages/pt-BR.json

@@ -1661,7 +1661,10 @@
     "toggle": "Alternar tema",
     "light": "Claro",
     "dark": "Escuro",
-    "system": "Sistema"
+    "system": "Sistema",
+    "lightDescription": "Sempre modo claro",
+    "darkDescription": "Sempre modo escuro",
+    "systemDescription": "Seguir preferência do sistema"
   },
   "twoFactor": {
     "title": "Autenticação de dois fatores",

apps/web/messages/ru-RU.json

@@ -1660,7 +1660,10 @@
     "toggle": "Переключить тему",
     "light": "Светлая",
     "dark": "Тёмная",
-    "system": "Системная"
+    "system": "Системная",
+    "lightDescription": "Всегда светлая тема",
+    "darkDescription": "Всегда темная тема",
+    "systemDescription": "Следовать системным настройкам"
   },
   "twoFactor": {
     "title": "Двухфакторная аутентификация",

apps/web/messages/tr-TR.json

@@ -1660,7 +1660,10 @@
     "toggle": "Temayı değiştir",
     "light": "Açık",
     "dark": "Koyu",
-    "system": "Sistem"
+    "system": "Sistem",
+    "lightDescription": "Her zaman açık mod",
+    "darkDescription": "Her zaman koyu mod",
+    "systemDescription": "Sistem tercihini takip et"
   },
   "twoFactor": {
     "title": "İki Faktörlü Kimlik Doğrulama",

apps/web/messages/zh-CN.json

@@ -1660,7 +1660,10 @@
     "toggle": "切换主题",
     "light": "明亮",
     "dark": "暗黑",
-    "system": "系统"
+    "system": "系统",
+    "lightDescription": "始终使用明亮模式",
+    "darkDescription": "始终使用暗黑模式",
+    "systemDescription": "跟随系统设置"
   },
   "twoFactor": {
     "title": "双重认证",

apps/web/src/app/customization/components/theme-picker-form.tsx

@@ -11,9 +11,9 @@ import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 
 const THEME_OPTIONS = [
-  { name: "System", value: "system", icon: IconDeviceLaptop, description: "Follow system preference" },
-  { name: "Light", value: "light", icon: IconSun, description: "Always light mode" },
-  { name: "Dark", value: "dark", icon: IconMoon, description: "Always dark mode" },
+  { nameKey: "theme.system", value: "system", icon: IconDeviceLaptop, descriptionKey: "theme.systemDescription" },
+  { nameKey: "theme.light", value: "light", icon: IconSun, descriptionKey: "theme.lightDescription" },
+  { nameKey: "theme.dark", value: "dark", icon: IconMoon, descriptionKey: "theme.darkDescription" },
 ];
 
 export function ThemePickerForm() {
@@ -70,8 +70,8 @@ export function ThemePickerForm() {
                     <div className="flex flex-col items-center gap-3">
                       <div className="flex flex-col items-center gap-2">
                         <IconComponent className="w-6 h-6 text-muted-foreground" />
-                        <span className="font-medium text-base">{themeOption.name}</span>
-                        <span className="text-xs text-muted-foreground">{themeOption.description}</span>
+                        <span className="font-medium text-base">{t(themeOption.nameKey)}</span>
+                        <span className="text-xs text-muted-foreground">{t(themeOption.descriptionKey)}</span>
                       </div>
                     </div>
                   </button>