feat: enhance theme toggle functionality with auto theme support and icon updates. Fix #243

This commit is contained in:
Will Miao
2025-06-21 20:43:44 +08:00
parent ba2e42b06e
commit c3dd4da11b
4 changed files with 62 additions and 7 deletions

View File

@@ -115,7 +115,8 @@
}
.theme-toggle .light-icon,
.theme-toggle .dark-icon {
.theme-toggle .dark-icon,
.theme-toggle .auto-icon {
position: absolute;
top: 50%;
left: 50%;
@@ -124,15 +125,38 @@
transition: opacity 0.3s ease;
}
/* Default state shows dark icon */
.theme-toggle .dark-icon {
opacity: 1;
}
[data-theme="light"] .theme-toggle .light-icon {
/* Light theme shows light icon */
.theme-toggle.theme-light .light-icon {
opacity: 1;
}
[data-theme="light"] .theme-toggle .dark-icon {
.theme-toggle.theme-light .dark-icon,
.theme-toggle.theme-light .auto-icon {
opacity: 0;
}
/* Dark theme shows dark icon */
.theme-toggle.theme-dark .dark-icon {
opacity: 1;
}
.theme-toggle.theme-dark .light-icon,
.theme-toggle.theme-dark .auto-icon {
opacity: 0;
}
/* Auto theme shows auto icon */
.theme-toggle.theme-auto .auto-icon {
opacity: 1;
}
.theme-toggle.theme-auto .light-icon,
.theme-toggle.theme-auto .dark-icon {
opacity: 0;
}