diff --git a/src/assets/logo-en-dark.svg b/src/assets/logo-en-dark.svg
new file mode 100644
index 0000000..a8f64b7
--- /dev/null
+++ b/src/assets/logo-en-dark.svg
@@ -0,0 +1,37 @@
+
+
\ No newline at end of file
diff --git a/src/assets/logo-en.svg b/src/assets/logo-en-light.svg
similarity index 100%
rename from src/assets/logo-en.svg
rename to src/assets/logo-en-light.svg
diff --git a/src/assets/logo-fa-dark.svg b/src/assets/logo-fa-dark.svg
new file mode 100644
index 0000000..8d127af
--- /dev/null
+++ b/src/assets/logo-fa-dark.svg
@@ -0,0 +1,34 @@
+
+
\ No newline at end of file
diff --git a/src/assets/logo-fa.svg b/src/assets/logo-fa-light.svg
similarity index 100%
rename from src/assets/logo-fa.svg
rename to src/assets/logo-fa-light.svg
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index b747bac..b754552 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,24 +1,49 @@
-import LogoFaSvg from '@/assets/logo-fa.svg';
-import LogoEnSvg from '@/assets/logo-en.svg';
-import LogoIconSvg from '@/assets/logo_icon.svg';
-import { Box, type SxProps } from '@mui/material';
+import { useMemo } from 'react';
+import { Box, useColorScheme, type SxProps } from '@mui/material';
import { useTranslation } from 'react-i18next';
+import LogoFaLightSvg from '@/assets/logo-fa-light.svg';
+import LogoEnLightSvg from '@/assets/logo-en-light.svg';
+import LogoFaDarkSvg from '@/assets/logo-fa-dark.svg';
+import LogoEnDarkSvg from '@/assets/logo-en-dark.svg';
+import LogoIconSvg from '@/assets/logo_icon.svg';
+
interface LogoProps {
boxSx?: SxProps;
isIcon?: boolean;
}
+const LOGO_MAP = {
+ fa: {
+ light: LogoFaLightSvg,
+ dark: LogoFaDarkSvg,
+ },
+ en: {
+ light: LogoEnLightSvg,
+ dark: LogoEnDarkSvg,
+ },
+} as const;
+
function Logo({ boxSx, isIcon = false }: LogoProps) {
const { i18n } = useTranslation();
+ const { mode } = useColorScheme();
+
+ const logoSrc = useMemo(() => {
+ if (isIcon) return LogoIconSvg;
+
+ const lang = i18n.language.startsWith('fa') ? 'fa' : 'en';
+ const resolvedMode = mode === 'dark' ? 'dark' : 'light';
+
+ return LOGO_MAP[lang][resolvedMode];
+ }, [i18n.language, mode, isIcon]);
- const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
return (