From a753f828232a1052ab8fb58a1ae691174d2fc839 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 18 Jun 2026 15:17:34 +0000
Subject: [PATCH] feat(ui): ThemeToggle i18n + animated icon, drop
 transition:all

The theme toggle hard-coded its English tooltip; route it through the existing
nav switchToLightMode/switchToDarkMode keys and add an aria-label. The sun/moon
icon now replays a small rotate+fade on theme change (keyed remount; honored by
the global reduced-motion block). Replace the .theme-toggle `transition: all`
with explicit properties.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/react-ui/src/App.css                    | 12 +++++++++++-
 core/http/react-ui/src/components/ThemeToggle.jsx |  9 +++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index af3b25538..38abfef88 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -552,12 +552,22 @@
   border-radius: var(--radius-md);
   cursor: pointer;
   font-size: 0.875rem;
-  transition: all var(--duration-fast) var(--ease-default);
+  transition: color var(--duration-fast) var(--ease-default),
+              border-color var(--duration-fast) var(--ease-default),
+              background var(--duration-fast) var(--ease-default);
 }
 .theme-toggle:hover {
   color: var(--color-primary);
   border-color: var(--color-primary-border);
 }
+.theme-toggle__icon {
+  display: inline-block;
+  animation: themeIconIn var(--duration-normal) var(--ease-default);
+}
+@keyframes themeIconIn {
+  from { opacity: 0; transform: rotate(-90deg) scale(0.7); }
+  to   { opacity: 1; transform: rotate(0) scale(1); }
+}
 
 /* Language switcher */
 .language-switcher {
diff --git a/core/http/react-ui/src/components/ThemeToggle.jsx b/core/http/react-ui/src/components/ThemeToggle.jsx
index 99843b32c..964e37917 100644
--- a/core/http/react-ui/src/components/ThemeToggle.jsx
+++ b/core/http/react-ui/src/components/ThemeToggle.jsx
@@ -1,15 +1,20 @@
+import { useTranslation } from 'react-i18next'
 import { useTheme } from '../contexts/ThemeContext'
 
 export default function ThemeToggle() {
   const { theme, toggleTheme } = useTheme()
+  const { t } = useTranslation('nav')
+  const label = theme === 'dark' ? t('switchToLightMode') : t('switchToDarkMode')
 
   return (
     <button
       onClick={toggleTheme}
       className="theme-toggle"
-      title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      title={label}
+      aria-label={label}
     >
-      <i className={`fas ${theme === 'dark' ? 'fa-sun' : 'fa-moon'}`} />
+      {/* key on theme so the icon remounts and replays the rotate/fade */}
+      <i key={theme} className={`fas ${theme === 'dark' ? 'fa-sun' : 'fa-moon'} theme-toggle__icon`} aria-hidden="true" />
     </button>
   )
 }