WordPress Development
How to Add Dark Mode to Your WordPress Site: Plugins, CSS, and Elementor
Over 80% of smartphone users use dark mode when available. Here is every method for implementing it on WordPress — from a one-click plugin to a CSS variable system.
Dark mode has shifted from a niche developer preference to a mainstream user expectation. Over 80% of smartphone users use dark mode when the option is available. Adding dark mode to your WordPress site improves accessibility, reduces eye strain for visitors reading in low-light environments, and signals that your site is built with modern UX standards in mind.
How dark mode works on the web
There are two approaches to dark mode on WordPress sites:
- CSS prefers-color-scheme media query: automatically applies dark styles when the visitor’s operating system is set to dark mode. No toggle required — the site adapts to the visitor’s system preference automatically.
- User toggle: a button or switch on the page lets visitors manually choose between light and dark mode regardless of their OS setting. The preference is stored in localStorage and persists across pages.
The best implementation combines both: respect the system preference by default, and offer a toggle for visitors who want to override it.
Method 1 — Dark Mode plugin (quickest)
The Dark Mode plugin by Daniel James is the most widely used WordPress dark mode solution. It adds a toggle button to your site and applies dark styles automatically.
Go to Plugins › Add New, search ‘Dark Mode’, install and activate the plugin by Daniel James.
Set the toggle position (bottom left, bottom right, or custom), the default mode (light or respect OS setting), and the dark mode colour scheme.
The plugin applies a default dark colour palette. Override specific colours for your brand via the plugin’s CSS customisation option or by adding CSS to your child theme targeting the body.dark-mode class.
Check your homepage, blog posts, product pages, contact page, and checkout. Dark mode CSS can cause contrast issues with images, embedded content, or elements using hardcoded colours.
Method 2 — CSS prefers-color-scheme (developer approach)
For full design control, implement dark mode using the CSS prefers-color-scheme media query in your child theme’s style.css or custom CSS. This approach requires defining a complete dark colour palette for your site:
CSS variables make this significantly cleaner — define your colour tokens in :root for light mode and redefine them inside the prefers-color-scheme: dark media query. All elements using var(–color-background) automatically update when dark mode is active.
If you are implementing dark mode from scratch on a custom theme, define all colours as CSS custom properties (CSS variables) in :root, then override only the variable values inside the prefers-color-scheme media query. This avoids duplicating hundreds of individual CSS rules and keeps your dark mode implementation maintainable.
Method 3 — Elementor dark mode
Elementor Pro includes Global Colors. For Elementor-built sites, the cleanest approach to dark mode is:
- Define all colours as Elementor Global Colors (Site Settings › Global Colors)
- Use a dark mode plugin that targets CSS custom properties to override these global colour values when dark mode is active
- The WP Dark Mode plugin (premium) supports Elementor-specific integration and can override Elementor global colours automatically
Testing dark mode on WordPress
- Open Chrome DevTools (F12), go to the Rendering tab, and set ‘Emulate CSS media feature prefers-color-scheme’ to dark to test without changing OS settings
- Check all text for sufficient contrast — WCAG 2.1 requires 4.5:1 ratio. Use the WebAIM Contrast Checker to verify text/background combinations in dark mode
- Test images: photographs look fine in dark mode; PNG images with white backgrounds show as white boxes on dark backgrounds — use transparent PNG backgrounds or add CSS to handle these cases
- Test embedded content: YouTube embeds, maps, and third-party widgets may not respect your dark mode styling
- Test form fields: inputs, select dropdowns, and textareas often need explicit dark mode styling
Performance considerations
Dark mode implementations have minimal performance impact. The CSS prefers-color-scheme approach adds no JavaScript and negligible CSS weight. Plugin-based implementations add a small JavaScript file for the toggle and localStorage handling. Neither approach measurably affects Core Web Vitals.
SVG icons and logos embedded inline in HTML respond to CSS colour rules — you can control their colour in dark mode. SVG files loaded as tags do not respond to CSS and will appear on their original background. For dark mode compatibility, use inline SVG or CSS masks for icons that need to change colour in dark mode.
Need dark mode and modern UX improvements added to your WordPress site?
Simple Automation Solutions adds dark mode, accessibility improvements, and UX enhancements to WordPress sites worldwide.
Frequently asked questions
Does dark mode affect WordPress SEO?+
Dark mode is a purely presentational feature and has no direct effect on SEO. Both light and dark versions of your site contain identical content and markup — the CSS change is invisible to Googlebot. Indirectly, dark mode can improve user experience metrics (reduced bounce rate for low-light visitors, longer session duration) which may contribute positively to engagement signals that influence rankings.
Can I make the WordPress admin dark?+
Yes. The WordPress admin has a built-in dark colour scheme. Go to Users › Profile and select the ‘Midnight’ or ‘Coffee’ colour scheme for a darker admin interface. Third-party plugins like WP Dashboard UI Customize offer more complete dark admin experiences. This is separate from your site’s front-end dark mode — changing the admin colour scheme only affects the backend, not what visitors see.
Does dark mode work on all WordPress themes?+
The prefers-color-scheme CSS approach works on all themes, but the visual quality depends on how well your theme uses CSS variables for colours. Themes that use hardcoded colour values (like #ffffff for backgrounds throughout) require more CSS rules to override comprehensively. Modern themes (Astra, Kadence, GeneratePress) use CSS variables extensively, making them more compatible with dark mode implementations.
