Skip to content

A responsive, accessible dark mode toggle built with HTML, CSS, and vanilla JavaScript. Supports system preferences, remembers user settings with localStorage, and features smooth transitions. Perfect as a UI micro-project or starter feature for larger apps.

Notifications You must be signed in to change notification settings

n4ika/dark-mode-toggle

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŒ— Dark Mode Toggle

View Live Version

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.

Dark mode toggle demo


✨ Features

  • πŸŒ™ 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

πŸš€ Run Locally

  1. Clone the repo:

    git clone https://github.com/your-username/dark-mode-toggle.git
    cd dark-mode-toggle
    
  2. 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.

πŸ› οΈ Tech Stack

  • HTML5
  • CSS3 – custom properties, transitions, media queries
  • Vanilla JavaScript

πŸ’‘ What I Learned

  • How to implement theme switching with CSS custom properties
  • Using localStorage to persist user preferences
  • Improving accessibility with ARIA and focus outlines

πŸ§‘πŸΎβ€πŸ’» Author

Built by @n4aika

About

A responsive, accessible dark mode toggle built with HTML, CSS, and vanilla JavaScript. Supports system preferences, remembers user settings with localStorage, and features smooth transitions. Perfect as a UI micro-project or starter feature for larger apps.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published