Can WordPress add dark mode without a plugin?

Yes, WordPress can use custom CSS for automatic dark mode without a plugin. Add a light palette and a dark override inside the CSS prefers-color-scheme media query. A proper visitor-controlled toggle is more involved because it needs a button, JavaScript, saved preference handling and early loading to avoid a flash of the wrong colour.

Does prefers-color-scheme add a dark-mode toggle?

No, prefers-color-scheme only detects whether the visitor’s operating system or browser prefers dark colours. It cannot remember a choice made on your website or let someone override that preference. Use it for automatic mode, or combine it with JavaScript and a control if visitors need to choose manually.

Why does my WordPress site flash white before dark mode loads?

The white flash usually happens because the page renders before JavaScript or the dark stylesheet applies the saved preference. Load the preference-setting code early, make the initial background colour match the expected mode, and check whether caching or JavaScript optimisation is delaying it. Test in a private window, where no previous preference is stored.

Will dark mode automatically fix images and page-builder elements?

No, dark mode does not automatically change colours inside images, logos, SVG files or every page-builder widget. Review each template and plugin component, including forms, menus, tables, pop-ups and checkout screens. Add targeted overrides or provide alternate assets where an image has a light background or the component ignores your global colour variables.

How to add dark mode to a WordPress website

Design & Layout Time About 30 minutes 6 steps Updated 27 Sep 2026

The short answer

You can add automatic dark mode with CSS using the prefers-color-scheme media query, but a visitor-controlled toggle needs JavaScript or a plugin. For a simple site, custom CSS is enough; for a complex theme, the plugin route avoids editing every component and helps prevent a white flash.

The route

01Choose automatic or manual mode
02Back up your current styles
03Add the automatic dark palette
04Add a visitor-controlled switch
05Check every site component
06Use a plugin for the fast route

What you need

Administrator access to WordPress
A recent backup or staging copy
A child theme or safe place for custom CSS
A list of colours, buttons and images that need dark-mode overrides

Choose automatic or manual mode

Decide whether dark mode should follow the visitor’s device setting or use a switch on your site. Automatic mode is the simplest option and can be done with CSS. A switch that remembers each visitor’s choice needs JavaScript, storage in the browser, and a control in the page.

Make the choice before changing colours. Mixing automatic detection with a saved manual preference without defining which one wins can make the mode appear to change unexpectedly.

Back up your current styles

Create a backup and work on staging if the site receives traffic. Do not edit the parent theme’s style.css directly because a theme update can overwrite the changes.

For a classic theme, use a child theme or the WordPress Additional CSS area. For a block theme, global styles are managed from Appearance > Editor > Styles, and theme authors can also define styles in theme.json. WordPress recommends the standard global styles system where it can handle the design.

Add the automatic dark palette

For system-controlled dark mode, add a light default and override it inside a dark-colour media query. Put this in Additional CSS, your child theme stylesheet, or the stylesheet loaded by your custom theme:

:root { --site-background: #ffffff; --site-text: #222222; --site-link: #075985; } body { background: var(--site-background); color: var(--site-text); } a { color: var(--site-link); } @media (prefers-color-scheme: dark) {:root { --site-background: #121212; --site-text: #eeeeee; --site-link: #7dd3fc; } }

Replace the variables with your own colours, then add overrides for cards, navigation, forms, tables, borders, notices and buttons. The media query detects the visitor’s operating-system preference; it does not create a switch on its own.

Add a visitor-controlled switch

If visitors must be able to choose light or dark mode regardless of their device setting, add a button and use JavaScript to apply a class or attribute to the page’s root element. Your CSS should define the dark palette under that class or attribute, while the script saves the selection in browser storage and restores it on the next page load.

Load the saved preference as early as possible. If the page first renders in light mode and JavaScript changes it afterwards, visitors may see a white flash. Also provide a text label or accessible name for the button, and do not rely on a sun or moon icon alone.

Check every site component

Preview the home page, posts, pages, archives, search, forms, menus, pop-ups and 404 page in both modes. Check images, logos, SVGs, embedded content, code blocks, WooCommerce screens and page-builder widgets separately because dark mode CSS will not automatically fix colours baked into images or inline styles.

Pay particular attention to contrast, keyboard focus, hover states and disabled controls. If a plugin adds its own background colour or uses high-specificity CSS, your general dark-mode rule may not override it; target that component specifically instead of adding !important everywhere.

Use a plugin for the fast route

For a quick site-wide implementation, install and activate Dark Mode by Traslatability, then choose a ready-made palette or adjust the colours to match your branding. It is suited to sites where you want a visitor-facing switch without manually revising every theme and plugin component.

Use the plugin route when you need a toggle, saved preferences, custom palettes or help reducing the white flash between pages. Keep the manual CSS route when the site is small, the design is controlled by you, and automatic system detection is all you need. Test the plugin with your cache, optimisation and page-builder settings before enabling it on a busy site.

The fast route

Let Dark Mode by Traslatability do it

Lightweight dark-mode switching with custom palettes and no white flash; choose it for fast, low-effort theme adaptation.

Get Dark Mode by Traslatability

Sources

wordpress.org /documentation/article/block-themes/?utm_source=openai

Questions

Can WordPress add dark mode without a plugin?: Yes, WordPress can use custom CSS for automatic dark mode without a plugin. Add a light palette and a dark override inside the CSS prefers-color-scheme media query. A proper visitor-controlled toggle is more involved because it needs a button, JavaScript, saved preference handling and early loading to avoid a flash of the wrong colour.
Does prefers-color-scheme add a dark-mode toggle?: No, prefers-color-scheme only detects whether the visitor’s operating system or browser prefers dark colours. It cannot remember a choice made on your website or let someone override that preference. Use it for automatic mode, or combine it with JavaScript and a control if visitors need to choose manually.
Why does my WordPress site flash white before dark mode loads?: The white flash usually happens because the page renders before JavaScript or the dark stylesheet applies the saved preference. Load the preference-setting code early, make the initial background colour match the expected mode, and check whether caching or JavaScript optimisation is delaying it. Test in a private window, where no previous preference is stored.
Will dark mode automatically fix images and page-builder elements?: No, dark mode does not automatically change colours inside images, logos, SVG files or every page-builder widget. Review each template and plugin component, including forms, menus, tables, pop-ups and checkout screens. Add targeted overrides or provide alternate assets where an image has a light background or the component ignores your global colour variables.