Apply theme color to mode icon

This commit is contained in:
Nicola Benaglia 2025-06-02 21:25:11 +02:00
parent 345d192bb5
commit 47d9e57db0

View File

@ -1,5 +1,5 @@
import { useThemeContext } from './ThemeContext'; import { useThemeContext } from './ThemeContext';
import { Box, IconButton, Tooltip } from '@mui/material'; import { Box, IconButton, Tooltip, useTheme } from '@mui/material';
import LightModeIcon from '@mui/icons-material/LightMode'; import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode'; import DarkModeIcon from '@mui/icons-material/DarkMode';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -15,6 +15,7 @@ const ThemeSelector = () => {
]); ]);
const { themeMode, toggleTheme } = useThemeContext(); const { themeMode, toggleTheme } = useThemeContext();
const selectorRef = useRef(null); const selectorRef = useRef(null);
const theme = useTheme();
return ( return (
<Box ref={selectorRef}> <Box ref={selectorRef}>
@ -29,7 +30,12 @@ const ThemeSelector = () => {
}) })
} }
> >
<IconButton onClick={toggleTheme}> <IconButton
onClick={toggleTheme}
sx={{
color: theme.palette.text.secondary,
}}
>
{themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />} {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton> </IconButton>
</Tooltip> </Tooltip>