A simple, accessible dark mode toggle built with HTML, CSS, and JavaScript.
Supports system preferences, remembers user settings via localStorage
, and uses smooth visual transitions.
- π Toggle between dark & light themes
- πΎ Persists user preference with
localStorage
- π§ Respects system
prefers-color-scheme
- π± Responsive and mobile-friendly layout
- βΏ Accessible toggle button with focus styles
- π¨ Smooth transitions using CSS custom properties
-
Clone the repo:
git clone https://github.com/your-username/dark-mode-toggle.git cd dark-mode-toggle
-
Open index.html in your browser.
Or, if you have Python 3 installed:
python3 -m http.server 8000 Then visit http://localhost:8000 in your browser.
- HTML5
- CSS3 β custom properties, transitions, media queries
- Vanilla JavaScript
- How to implement theme switching with CSS custom properties
- Using localStorage to persist user preferences
- Improving accessibility with ARIA and focus outlines
Built by @n4aika