mirror/LocalAI
1
0
Fork 0
mirror of https://github.com/mudler/LocalAI.git synced 2026-06-18 21:58:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): ThemeToggle i18n + animated icon, drop transition:all

Browse Source 
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>
This commit is contained in:
Ettore Di Giacinto
2026-06-18 15:17:34 +00:00
parent 67e2f2caba
commit a753f82823
2 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/http/react-ui/src/App.css
View File

@@ -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 {

9
core/http/react-ui/src/components/ThemeToggle.jsx
View File

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