Kinou/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix color mode in header

Browse Source
This commit is contained in:
kinou-p 2025-02-16 13:35:37 +01:00
parent 13786e32f4
commit da62097164
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
my-app/src/components/header.tsx
View File

@ -14,7 +14,8 @@ function Header() {
const storedLanguage = localStorage.getItem('language') || 'en'; const storedLanguage = localStorage.getItem('language') || 'en';
const [language, setLanguage] = useState(storedLanguage); const [language, setLanguage] = useState(storedLanguage);
const [checked, setChecked] = useState(localStorage.getItem('mode') === 'light' ? false : true); const [mode, setMode] = useState("dark");
const [checked, setChecked] = React.useState(true);
useEffect(() => { useEffect(() => {
i18n.changeLanguage(language); // Apply saved language i18n.changeLanguage(language); // Apply saved language
@ -22,22 +23,29 @@ function Header() {
}, [language, i18n]); // Re-run effect if language changes }, [language, i18n]); // Re-run effect if language changes
useEffect(() => { useEffect(() => {
if (localStorage.getItem('mode') === 'light') { if (!localStorage.getItem('mode'))
changeMode(); localStorage.setItem('mode', 'dark');
setChecked(false); else
{
let current = localStorage.getItem('mode')
if (current == "light")
{
changeMode()
setChecked(false)
} }
}, [changeMode]); }
}, []);
function handleLanguageChange(event: SelectChangeEvent) { function handleLanguageChange(event: SelectChangeEvent) {
const newLang = event.target.value; const newLang = event.target.value;
setLanguage(newLang); // Update state setLanguage(newLang); // Update state
} }
function handleModeToggle() { function handleMode() {
const newMode = checked ? 'dark' : 'light'; let current = localStorage.getItem('mode')
localStorage.setItem('mode', newMode); localStorage.setItem('mode', current == 'light' ? 'dark' : 'light');
changeMode(); changeMode()
setChecked(!checked); setChecked(checked ? false : true)
} }
return ( return (
@ -73,7 +81,7 @@ function Header() {
</MenuItem> </MenuItem>
</Select> </Select>
</Box> </Box>
<MaterialUISwitch checked={checked} onChange={handleModeToggle} /> <MaterialUISwitch checked={checked} onChange={handleMode} />
</div> </div>
</div> </div>
</header> </header>