From f97b12613b8f24cbb4641c3f22cdc2daa68348a9 Mon Sep 17 00:00:00 2001
From: leyoonafr <codeacme17@gmail.com>
Date: Sat, 15 Feb 2025 12:35:06 +0800
Subject: [PATCH] ui: enhance Dark Mode toggle icons and improve styling for
 better alignment

---
 src/components/Dark-Mode/index.js | 5 ++++-
 src/components/styles.scss        | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Dark-Mode/index.js b/src/components/Dark-Mode/index.js
index 7d7690a0..44378efc 100644
--- a/src/components/Dark-Mode/index.js
+++ b/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>,
+      }}
     />
   );
 };
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 47faf352..71c678b7 100644
--- a/src/components/styles.scss
+++ b/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;
+}