From aa0601523da988c3116d5c94f39303909d23b64c Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Tue, 18 Oct 2022 20:03:49 +0200
Subject: [PATCH] Various fixes in theme switch

---
 components/Blog/ThemeSwitch.tsx     | 11 +++++------
 styles/Blog/ThemeSwitch.module.scss |  5 +++++
 2 files changed, 10 insertions(+), 6 deletions(-)

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 <div className={styles.switch} title="Theme switching needs JS to be enabled.">
-            <FileJs size={size || "1.5em"} />
+            <FileJs size={size || "1.5em"} className={styles.placeHolder} />
         </div>;
     }
 
-    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 <div className={styles.switch}>
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 {