Dark mode is more than a trend—it’s a comfortable way for users to view your site. Sometimes you don’t want dark mode tied only to a switch. You may want any element to trigger it: a button, an icon, a card, or even a whole section.
This guide shows you how to do exactly that.
You’ll learn how to activate dark mode using any class or ID, toggle it with JavaScript, and keep your code clean and flexible. The steps are short, clear, and ready to copy into your project.
How to Find Customer Trigger Element?
Finding a customer trigger element is simple and only takes a few steps. Just identify the element on your page and grab its Class or ID using your browser’s inspect tool.
- Navigate to any page or post where the trigger element exists.
- Head over to the specific element you want to use (button, text, image, etc.).
- Right-click the element and select Inspect (or Inspect Element).
- In the developer tools panel, locate the highlighted HTML.
- Copy the Class or ID of that element.
How to Add a Custom Trigger?
Implementing a custom trigger to toggle dark mode is easier. Follow the steps below to understand & implement it properly.
- Navigate to Dracula Dark Mode in your WordPress dashboard.
- Go to Settings.
- Under Toggle Switch > Custom Trigger.
- Click on Add New Trigger.
- Enter your desired CSS Selector (.class or #id) for the custom element (button, text, image etc.).
- Choose your desired action to trigger (Toggle Dark Mode, Switch to Dark Mode, Switch to Light Mode).
- If you want to add more triggers, just click the Add New Trigger button.
- Click Save Changes to apply the new trigger.
Video Tutorial