fix(ThemeProvider): set document language based on user settings (#10154)

* fix(ThemeProvider): set document language based on user settings

Add language from settings to ThemeProvider context and update document language attribute accordingly

* fix(ThemeProvider): add language to dependency array to prevent stale closures
This commit is contained in:
Phantom 2025-09-14 15:41:43 +08:00 committed by GitHub
parent 9b1e9552d6
commit f9171f3df8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -31,7 +31,7 @@ const tailwindThemeChange = (theme: ThemeMode) => {
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
// 用户设置的主题
const { theme: settedTheme, setTheme: setSettedTheme } = useSettings()
const { theme: settedTheme, setTheme: setSettedTheme, language } = useSettings()
const [actualTheme, setActualTheme] = useState<ThemeMode>(
window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.dark : ThemeMode.light
)
@ -59,6 +59,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
document.body.classList.add('light')
}
document.body.setAttribute('navbar-position', navbarPosition)
document.documentElement.lang = language
// if theme is old auto, then set theme to system
// we can delete this after next big release
@ -73,7 +74,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
document.body.setAttribute('theme-mode', actualTheme)
setActualTheme(actualTheme)
})
}, [actualTheme, initUserTheme, navbarPosition, setSettedTheme, settedTheme])
}, [actualTheme, initUserTheme, language, navbarPosition, setSettedTheme, settedTheme])
useEffect(() => {
tailwindThemeChange(actualTheme)