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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/iamthearsh/em-dark-mode/archive/refs/heads/master.zip
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