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 @@
Expertise
Kontakt
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;