This section covers known frontend-related issues and how to resolve them when using the WP Dark Mode plugin. All solutions are tested and tailored to make your dark mode integration smoother.
1. Excluding Elements, Pages, and Requests #
1.1 Exclude Specific Elements from Dark Mode #
Add the .wp-dark-mode-ignore class to any HTML element to exclude it from dark mode styling.
<div class=”hero-section wp-dark-mode-ignore”>
<!– This section will always stay light –>
</div>
1.2 Exclude a Page Before It Loads #
Use the wp_dark_mode_is_excluded filter in your functions.php to disable dark mode on specific pages before rendering.
php
add_filter(‘wp_dark_mode_is_excluded’, function($excluded) {
return is_page(‘landing’) ? true : $excluded;
});
1.3 Prevent Frontend AJAX Requests #
If you want to avoid any frontend AJAX requests from WP Dark Mode:
- Go to WP Admin → WP Dark Mode → Settings → Analytics
- Turn off Dark Mode Analytics
This disables automatic AJAX hits on page load.
2. Styling Issues with Custom CSS #
2.1 Custom Background Color Not Working #
If your background styles aren’t applying in dark mode, it’s likely due to using the shorthand background property. Browser prioritizes background-color, which is more specific and works better with dark/light toggles.
✅ Use this:
.section {
background-color: #111 !important;
}
❌ Avoid this:
.section {
background: #111; /* Might be ignored */
}
2.2 Custom CSS Not Applying Properly #
If your dark mode custom CSS seems ignored or inconsistent:
- Use full selectors for higher specificity.
- Add !important to force override.
- WP Dark Mode wraps styles only for dark mode, so this won’t break your light theme.
✅ Example:
body #root > .parent div:first-child {
color: red !important;
}
3. SVG Not Reacting to Dark Mode #
3.1 SVG Icons Not Changing in Dark Mode #
If your SVG icons don’t adapt to dark mode, it’s likely due to hardcoded color values. For full compatibility:
- Replace fixed fill and stroke values with currentColor
- Make sure the surrounding text color is styled by WP Dark Mode
✅ Good Example:
<svg width=”24″ height=”24″ fill=”currentColor” stroke=”currentColor”>
<path d=”…” />
</svg>
Now it can be color using other elements
.icon-wrapper {
color: #fff; /* This controls the SVG color too */
}
❌ Bad Example:
<svg fill=”#000″ stroke=”#000″> <!– May not adapt to dark mode →
By using currentColor, the SVG inherits the CSS color of its parent container, allowing WP Dark Mode to seamlessly style it in both light and dark themes.
