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.

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

7 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.

πŸ› οΈ 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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published