From 4cc699640613dde0edf56d19c586cab2d1f298b8 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sat, 22 Mar 2025 09:49:15 +0800
Subject: [PATCH] Refactor theme toggle styles for improved positioning

- Updated CSS for the theme toggle component to ensure relative positioning for the container.
- Centered light and dark icons within the theme toggle using absolute positioning and transform properties.
- Added transition effects for opacity to enhance visual feedback during theme changes.
---
 static/css/components/header.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/static/css/components/header.css b/static/css/components/header.css
index 9b5e8b92..0cac5bfb 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -110,8 +110,18 @@
   transform: translateY(-2px);
 }
 
-.theme-toggle .light-icon {
+.theme-toggle {
+  position: relative; /* Ensure relative positioning for the container */
+}
+
+.theme-toggle .light-icon,
+.theme-toggle .dark-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center perfectly */
   opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .theme-toggle .dark-icon {