moon and sun svg, no selection and text css

freirart · Apr 30, 2024 · 260cedd · 260cedd
1 parent cbd773a
commit 260cedd
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/public/images/moon.svg b/public/images/moon.svg
diff --git a/public/images/sun.svg b/public/images/sun.svg
diff --git a/src/components/ColorModeSwitch/ColorModeSwitch.tsx b/src/components/ColorModeSwitch/ColorModeSwitch.tsx
@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 interface ColorModeSwitchProps {
   isDarkMode: boolean;
   onToggle: Function;
@@ -11,16 +13,21 @@ export default function ColorModeSwitch({
     <div
       onClick={() => onToggle()}
       className="flex absolute bottom-8 right-8 w-12 h-6 rounded-full
-        dark:bg-light-blue dark:text-special-black bg-special-black
-        text-white-blue text-center cursor-pointer"
+        dark:bg-white-blue bg-special-black cursor-pointer"
     >
       <span
         className={
-          'h-6 w-6 rounded-full shadow-lg transition-all duration-200 ' +
-          (isDarkMode ? 'bg-white-blue' : 'ml-6 bg-dark-blue')
+          `flex justify-center h-6 w-6 rounded-full shadow-lg transition-all
+          duration-200 select-none` +
+          (isDarkMode ? ' bg-[#FFE483]' : ' ml-6 bg-dark-blue')
         }
       >
-        {isDarkMode ? '🌞' : '🌙'}
+        <Image
+          src={`/images/${isDarkMode ? 'sun' : 'moon'}.svg`}
+          height={18}
+          width={18}
+          alt="Sun"
+        />
       </span>
     </div>
   );