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;
+}