WP Manifestindependent plugin directory
manifest / themes / em-dark-mode

EM Dark Mode

Dark mode toggle for WordPress with customizable colors and system preference detection

by Emrys · github.com/iamthearsh/em-dark-mode · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/iamthearsh/em-dark-mode/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/iamthearsh/em-dark-mode ↗

EM Dark Mode Banner

A lightweight, customizable dark mode toggle for WordPress. Give your visitors the power to switch between light and dark themes with a beautiful floating button.

✨ Features

  • 🌙 One-Click Toggle - Beautiful floating button to switch modes
  • 🎨 Fully Customizable - Choose colors, position, and transition speed
  • 💾 Remembers Preference - Uses localStorage to persist user choice
  • 🖥️ System Detection - Auto-detects user's OS dark mode setting
  • ⚡ Lightweight - Under 5KB, no jQuery dependency
  • 📱 Responsive - Works perfectly on all devices
  • ♿ Accessible - Keyboard navigation support
  • 🔧 Developer API - JavaScript API for custom integrations

📦 Installation

Manual Installation

  1. Download the plugin zip file
  2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
  3. Upload the zip file and click Install Now
  4. Activate the plugin

From GitHub

  1. Clone this repository into your /wp-content/plugins/ directory
  2. Activate through WordPress Admin → Plugins

⚙️ Configuration

Navigate to Settings → EM Dark Mode to customize:

Option Description
Enable Dark Mode Show/hide the toggle button
Button Position Bottom-right, bottom-left, top-right, top-left
Default Mode Start with light or dark mode
Respect System Auto-detect OS preference
Transition Speed Animation duration (0-2 seconds)
Dark Background Background color for dark mode
Dark Text Color Text color for dark mode

🔧 Developer API

// Enable dark mode
EMDarkMode.enable();

// Disable dark mode  
EMDarkMode.disable();

// Toggle dark mode
EMDarkMode.toggle();

// Check if dark mode is active
if (EMDarkMode.isDark()) {
    console.log('Dark mode is on!');
}

// Reset stored preference
EMDarkMode.reset();

// Listen for mode changes
document.addEventListener('em-dark-mode-change', function(e) {
    console.log('Dark mode:', e.detail.isDark);
});

🎨 Custom Styling

Add custom CSS to target dark mode:

/* Only applied in dark mode */
body.em-dark-mode .my-element {
    background-color: #1a1a2e;
}

/* Exclude elements from inversion */
.em-no-invert {
    /* This class prevents automatic filtering */
}

📋 Requirements

  • WordPress 5.0 or higher
  • PHP 7.2 or higher

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the GPL-2.0 License - see the LICENSE file for details.

👤 Author

Emrys

⭐ Show Your Support

Give a ⭐ if this project helped you!

Made with ❤️ by Emrys