ui: optimize dark mode icon (#345)

ui: enhance Dark Mode toggle icons and improve styling for better alignment

Author: codeacme17

src/components/Dark-Mode/index.js

@@ -23,7 +23,10 @@ const DarkMode = () => {
       id="darkMode-toggle"
       checked={darkMode}
       onChange={toggleDarkMode}
-      icons={{ checked: '🌙', unchecked: '☀️' }}
+      icons={{
+        checked: <span style={{ fontSize: 12 }}>🌙</span>,
+        unchecked: <span style={{ fontSize: 12 }}>☀️</span>,
+      }}
     />
   );
 };

src/components/styles.scss

@@ -22,3 +22,12 @@ body.dark-mode {
 body.dark-mode a {
   color: #579dff;
 }
+
+.react-toggle-track-check,
+.react-toggle-track-x {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 !important;
+  height: 100% !important;
+}