Dark/Light Mode Toggle
Light
Dark
Customizable Design
This toggle uses CSS variables to seamlessly switch between light and dark themes with smooth transitions.
All elements adapt to the selected theme, providing a consistent user experience.
Smooth Transitions
Experience smooth color transitions when switching between modes. The transition is applied to all color properties.
This prevents jarring changes and creates a more pleasant user interface.
System Preference
The toggle automatically detects your system preference and sets the initial mode accordingly.
Your preference is saved in local storage, so it persists between visits.
Theme Demo
See how form elements and tables adapt to the current theme.
| Element | Light Mode | Dark Mode |
|---|---|---|
| Background | White | Dark Gray |
| Text | Dark Gray | Light Gray |
| Accent | Blue | Light Blue |