fix: change theme icon color based on theme
This commit is contained in:
parent
9c94c35464
commit
44609671a9
1 changed files with 5 additions and 4 deletions
|
|
@ -7,7 +7,7 @@ interface Props {
|
|||
}
|
||||
|
||||
function ThemeIcon({ inApp }: Props) {
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
const { theme, setTheme, isDark } = useContext(ThemeContext);
|
||||
|
||||
const onClick = () => {
|
||||
const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
|
||||
|
|
@ -16,14 +16,15 @@ function ThemeIcon({ inApp }: Props) {
|
|||
|
||||
const getIcon = () => {
|
||||
const size = inApp ? 24 : 30;
|
||||
const color = inApp ? (isDark ? "white" : "black") : "white";
|
||||
|
||||
switch (theme) {
|
||||
case "light":
|
||||
return <SunIcon size={size} />;
|
||||
return <SunIcon size={size} color={color} />;
|
||||
case "dark":
|
||||
return <MoonIcon size={size} />;
|
||||
return <MoonIcon size={size} color={color} />;
|
||||
case "system":
|
||||
return <SunMoonIcon size={size} />;
|
||||
return <SunMoonIcon size={size} color={color} />;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue