trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: change theme icon color based on theme

Browse source
This commit is contained in:
trafficlunar 2025-02-08 17:39:10 +00:00
parent 9c94c35464
commit 44609671a9
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/ThemeIcon.tsx
View file

@ -7,7 +7,7 @@ interface Props {
} }
function ThemeIcon({ inApp }: Props) { function ThemeIcon({ inApp }: Props) {
const { theme, setTheme } = useContext(ThemeContext); const { theme, setTheme, isDark } = useContext(ThemeContext);
const onClick = () => { const onClick = () => {
const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light"; const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
@ -16,14 +16,15 @@ function ThemeIcon({ inApp }: Props) {
const getIcon = () => { const getIcon = () => {
const size = inApp ? 24 : 30; const size = inApp ? 24 : 30;
const color = inApp ? (isDark ? "white" : "black") : "white";
switch (theme) { switch (theme) {
case "light": case "light":
return <SunIcon size={size} />; return <SunIcon size={size} color={color} />;
case "dark": case "dark":
return <MoonIcon size={size} />; return <MoonIcon size={size} color={color} />;
case "system": case "system":
return <SunMoonIcon size={size} />; return <SunMoonIcon size={size} color={color} />;
} }
}; };