Does DarkMode.js remember theme selection?

Yes. It uses localStorage to remember a user's dark or light mode choice across visits.

Does DarkMode.js detect system theme automatically?

Yes. On first load it automatically reads the user's OS-level prefers-color-scheme setting.

DarkMode.js — 3kB Vanilla JS Dark Mode Toggle

See It In Action

Toggle the dark mode switch in the bottom-right corner to instantly see your website adapt. Smooth animations, zero lag.

Why DarkMode.js?

⚡ Ultra Lightweight (3kB)

No dependencies. Loads instantly and keeps page speed blazing fast.

🌗 Smart Preference Detection

Automatically detects your user's system theme on first load.

💾 Persistent Memory

Stores the user's preference with localStorage for seamless sessions.

How It Works

Install DarkMode.js in two easy steps:

Add the HTML toggle markup anywhere in your page.
Include the script before closing </body>.

<div class="darkmode-toggle">
  <input type="checkbox" id="darkmode">
  <label for="darkmode"><span></span></label>
</div>

<script src="darkmode.js"></script>

Why Choose DarkMode.js Over Competitors?

Feature	DarkMode.js	Competitor
Size	3kB	20-50kB+
Dependencies	0	jQuery / Other Libraries
System Theme Detection	✅	❌
Persistent Preference	✅	❌
Ease of Install	1 line HTML + 1 script	Multiple config steps

Ready to Go Dark?

Buy Now — $9

One-time payment. Lifetime updates.

FAQ

Is DarkMode.js lightweight?

Yes, only 3kB and no dependencies.

Does it remember my theme choice?

Yes, localStorage persists your last choice across sessions.

Will it detect my system theme?

Yes, DarkMode.js reads prefers-color-scheme on first load.