Websites with Dark Mode see up to 80% higher user satisfaction — add it to yours instantly with Darkify
Get Darkify

Advanced Dark Mode Targeting and Customization

Take full control of how dark mode is applied across your site with powerful element, page, and CSS targeting options. Customize every aspect of your site’s dark mode without touching a single line of code.
PRO

Precise Element Targeting with HTML and CSS Controls

Control exactly which elements should be affected by dark mode with powerful HTML and CSS targeting. Ensure a polished, consistent look across your site by choosing which elements are styled in dark mode and which are left untouched.
Allow Only Elements — Apply dark mode exclusively to specific elements by targeting their tag, class, or ID.
Force to Correct (Allowed Elements) — Automatically adjust background and text colors for allowed elements to keep your design consistent.
Disallowed Elements — Exclude specific elements from dark mode to prevent unwanted styling conflicts.
Force to Correct (Disallowed Elements) — Override conflicting styles for disallowed elements to ensure a polished look.

Test Element Exclusions in Dark Mode

See how Darkify’s HTML and CSS Restriction settings let you precisely control which elements are affected by dark mode. This section is excluded from dark mode, meaning it will stay light even when the rest of your site is in dark mode. Switch the site to dark mode to see it in action.
PRO

Granular Control for Pages and Posts

Decide exactly where dark mode should be applied on your site. Include or exclude specific pages and posts, giving you complete control over the user experience.
Allow Only Pages — Restrict dark mode to specific pages, ensuring it only appears where you want it.
Disallowed Pages — Exclude pages where dark mode should not be applied, keeping your design consistent.
Allow Only Posts — Apply dark mode only to selected posts for a curated dark experience.
Disallowed Posts — Prevent dark mode from being enabled on specific posts to preserve unique designs.

Total Style Control with Custom CSS

For ultimate control, add your own CSS for both dark mode and normal mode. Fine-tune every aspect of your design without limitations.
Dark Mode CSS — Apply styles that are only active when dark mode is enabled, perfect for unique dark mode designs.
CSS Rules for Children — Automatically apply styles to all child elements for consistent, predictable behavior.
Smart Selector Handling — Use advanced pseudo-class selectors for precise control over your dark mode styling.
Normal Mode CSS — Add global styles that apply in both light and dark modes for a unified design.

Backup and Extras Section

Easily back up your dark mode settings, import them to other sites, or clean up data on deletion for a seamless experience.
Import/Export Settings — Quickly transfer your dark mode settings between sites.
Download Backup Files — Create secure backups of your custom dark mode configurations.
Clean-up Data on Deletion — Automatically remove all plugin data when you uninstall, keeping your site clutter-free.

Common Questions About Advanced Settings

Got questions about how to fine-tune your dark mode setup? Here are the most frequently asked questions about element targeting, page restrictions, custom CSS, and more. If you don’t find your answer here, our support team is always ready to help.

Toggle Dark Mode