Add a sleek, fully customizable Dark Mode toggle to any website in seconds.
Universal Dark Mode is a lightning-fast, zero-dependency JavaScript and CSS snippet that instantly generates a dark theme for your web projects. Instead of rewriting your entire CSS file, this script uses an advanced CSS filter technique to invert your website's colors while automatically protecting your images, videos, and iframes from being inverted.
It comes with a built-in Visual Generator! Simply open the included HTML generator in your browser, customize your toggle button visually, and copy the generated code directly into your project.
Key Features:
- Zero Dependencies: No jQuery, no external libraries, and no heavy icon fonts.
- Visual Code Generator: Customize the button position, colors, size, and shape with a live preview.
- 9 SVG Icons: Includes line-art SVGs (Moon, Sun, Bulb, Power, etc.) that scale perfectly and respond to color changes.
- Smart Inversion Logic: Instantly turns backgrounds dark and text light, but perfectly preserves
, and elements.
- Local Storage Memory: Remembers the user's preference (Dark/Light) across page reloads.
- System Preference Detection: Automatically respects the user's OS-level dark mode settings on their first visit.
- Universal Compatibility: Works on HTML sites, PHP, WordPress, React, or any platform that accepts custom HTML/JS.
What's Included:
- Visual Code Generator (HTML/JS)
- Demo Page
- Documentation
Appreciated on May 4th, 2026
