diff --git a/components/Blog/ThemeSwitch.tsx b/components/Blog/ThemeSwitch.tsx index 46c868b..8b18d68 100644 --- a/components/Blog/ThemeSwitch.tsx +++ b/components/Blog/ThemeSwitch.tsx @@ -20,9 +20,8 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => { setMounted(true); }, []); - const switchTheme = (newTheme: string) => { - console.log(newTheme); - if (newTheme === "dark") setFadeProps({ + const switchTheme = (theme: string) => { + if (theme === "dark") setFadeProps({ sun: styles.fadeIn, moon: styles.fadeOut }); @@ -31,16 +30,16 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => { moon: styles.fadeIn }); - setTheme(newTheme); + setTheme(theme); }; if (!mounted) { return
- +
; } - const sunClasses = fadeProps.sun || (theme === "dark" ? styles.selected : undefined); + const sunClasses = fadeProps.sun || (theme !== "light" ? styles.selected : undefined); const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined); return
diff --git a/styles/Blog/ThemeSwitch.module.scss b/styles/Blog/ThemeSwitch.module.scss index 9308c20..f095af9 100644 --- a/styles/Blog/ThemeSwitch.module.scss +++ b/styles/Blog/ThemeSwitch.module.scss @@ -24,6 +24,11 @@ animation: fadeIn 0.2s ease-in-out; animation-fill-mode: forwards; } + + .placeHolder { + opacity: 1 !important; + transform: translate(0, 0) !important; + } } @keyframes fadeOut {