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>
   )
 }