From d4f33346ed0d0436d21c56ec2958fb0ba98ec967 Mon Sep 17 00:00:00 2001
From: ben7sys <ben@7sys.de>
Date: Sun, 17 Nov 2024 06:49:19 +0100
Subject: [PATCH] theme toggle problems

---
 public/components/header.html |  1 +
 public/css/header.css         | 40 +++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/public/components/header.html b/public/components/header.html
index ae7097f..1d2f958 100644
--- a/public/components/header.html
+++ b/public/components/header.html
@@ -11,6 +11,7 @@
             <a href="#services" id="expertise-link">Expertise</a>
             <a href="#contact" id="contact-link">Kontakt</a>
             <button class="theme-toggle" aria-label="Theme Toggle">
+                <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
         </nav>
diff --git a/public/css/header.css b/public/css/header.css
index b4203b0..c6963cd 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -71,10 +71,15 @@ header {
     justify-content: center;
     transition: var(--theme-transition);
     border-radius: var(--border-radius);
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: var(--spacing-sm);
 }
 
 .theme-toggle:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
 }
 
 .theme-toggle:focus-visible {
@@ -83,6 +88,41 @@ header {
     border-radius: var(--border-radius);
 }
 
+.theme-toggle i {
+    font-size: 1.2rem;
+    position: absolute;
+    transition: opacity var(--transition-speed) ease,
+                transform var(--transition-speed) ease;
+    transform: var(--gpu-accelerated);
+}
+
+/* Light Theme Icon States */
+[data-theme="light"] .theme-toggle .fa-moon {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+[data-theme="light"] .theme-toggle .fa-sun {
+    opacity: 0;
+    transform: rotate(-90deg) var(--gpu-accelerated);
+}
+
+/* Dark Theme Icon States */
+[data-theme="dark"] .theme-toggle .fa-moon {
+    opacity: 0;
+    transform: rotate(90deg) var(--gpu-accelerated);
+}
+
+[data-theme="dark"] .theme-toggle .fa-sun {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+/* Hover Animation */
+.theme-toggle:hover i {
+    transform: rotate(15deg) var(--gpu-accelerated);
+}
+
 .mobile-menu-toggle {
     display: none;
     background: none;