Theme Toggle

A modern toggle button that can switch between light/dark modes with smooth animations.

✨ Animation Effects

🔄 Rotation Animation

The icon rotates 360 degrees smoothly when switching themes.

🎯 Hover Effects

1.05x scale, background color and shadow changes on mouse hover

👆 Click Feedback

0.95x scale on click then restore for immediate feedback

♿ Accessibility

Perfect support for screen readers, keyboard navigation, and focus indicators

🎨 Design Features

🎨 Basic Style ✨ Hover Effect 🌙 Dark Mode

/* Main style features */
.theme-toggle-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  transition: all 0.2s ease-in-out;
}

.theme-toggle-button:hover {
  transform: scale(1.05);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .theme-toggle-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

🌙 Icon Transitions

Theme	Icon	Status
Light	🌙 Moon	Displayed
Dark	☀️ Sun	Displayed
Auto	🌙/☀️	Based on system settings

Accessibility

The theme toggle supports complete accessibility:

• aria-label: Screen reader support
• Keyboard Navigation: Focusable with Tab
• Focus Indicators: Clear focus ring
• State Announcements: Change notifications with aria-live

Usage

The theme toggle is automatically included in the header and can be used immediately without additional setup.

Manual Theme Setting

You can also change themes manually with JavaScript:

// Switch to dark mode
document.documentElement.dataset.theme = "dark";

// Switch to light mode
document.documentElement.dataset.theme = "light";

// Follow system settings
document.documentElement.dataset.theme = "auto";