diff --git a/src/components/ThemeIcon.tsx b/src/components/ThemeIcon.tsx
index 09b38fb..8c939ed 100644
--- a/src/components/ThemeIcon.tsx
+++ b/src/components/ThemeIcon.tsx
@@ -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} />;
 		}
 	};