From 7d3fb409cbe45ef115d6a5b3d76bac9ecdc310aa Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:51:58 +0200
Subject: [PATCH] Update DarkModeSwitcher.tsx

---
 .../src/client/components/DarkModeSwitcher.tsx   | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/template/app/src/client/components/DarkModeSwitcher.tsx b/template/app/src/client/components/DarkModeSwitcher.tsx
index 0679a91f..249089bb 100644
--- a/template/app/src/client/components/DarkModeSwitcher.tsx
+++ b/template/app/src/client/components/DarkModeSwitcher.tsx
@@ -25,25 +25,19 @@ const DarkModeSwitcher = () => {
             }
           )}
         >
-          <ModeIcon isInLightMode={isInLightMode} lightIcon={<SunIcon />} darkIcon={<MoonIcon />} />
+          <ModeIcon isInLightMode={isInLightMode} />
         </span>
       </label>
     </div>
   );
-};
+}; 
 
-interface ModeIconProps {
-  isInLightMode: boolean;
-  lightIcon: JSX.Element;
-  darkIcon: JSX.Element;
-}
-
-function ModeIcon({ isInLightMode, lightIcon, darkIcon }: ModeIconProps) {
+function ModeIcon({ isInLightMode }: { isInLightMode: boolean }) {
   const iconStyle = 'absolute inset-0 flex items-center justify-center transition-opacity ease-in-out duration-400';
   return (
     <>
-      <span className={cn(iconStyle, isInLightMode ? 'opacity-100' : 'opacity-0')}>{lightIcon}</span>
-      <span className={cn(iconStyle, !isInLightMode ? 'opacity-100' : 'opacity-0')}>{darkIcon}</span>
+      <span className={cn(iconStyle, isInLightMode ? 'opacity-100' : 'opacity-0')}><SunIcon /></span>
+      <span className={cn(iconStyle, !isInLightMode ? 'opacity-100' : 'opacity-0')}><MoonIcon /></span>
     </>
   );
 }