Skip to content

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

 
 
 

Contributors