Dark mode, also known as “night mode” or “light-on-dark” mode, is a website color scheme that sets the background of the page you’re viewing to a dark color, often black or dark grey, and the text to a light color, generally white. Some users feel that this color scheme relieves eyestrain.
In this guide
WordPress does not have a built-in dark mode setting. However, you can apply “dark mode” style formatting to your site by customizing your theme’s colors or with a plugin. We’ll discuss both approaches below.
If you want to apply dark mode as a permanent color scheme to your site, you can edit the site’s color settings to create this effect. How you do this will depend on whether your site uses the Site Editor or the Customizer for site-wide visual changes.
Some themes that support the Site Editor will have a “dark mode” style built in, either as a default or as a predefined custom color palette. To find these themes, go to Appearance → Themes in the left sidebar of your site dashboard and search for themes with “dark” as a search parameter.
You can preview different style variations for many themes by clicking the color swatches in the theme search results or on the theme’s info page:
If your theme does not have a predefined dark mode palette, you can modify the theme’s colors using Styles. This feature is accessible by selecting Styles in the Site Editor’s left sidebar or from the Styles icon while editing a template, pattern, template part, or page in the Site Editor.
From Styles, you can define a color palette for your entire site and customize the colors used for both the background and the primary, secondary, and tertiary text on your site. You can also define custom colors for your background and foreground colors, either by using the color selector or manually entering hex codes.
When setting up a dark mode style, you’ll want to use a dark color for the background. Black (#000000) and very dark greys (#121212 or #181818) are most common, but you might also try dark versions of colors such as blue (#07032e) or green (#031c00).
For typography, use a lighter color that contrasts nicely with the dark background. For black or dark grey backgrounds, you might look at white (#ffffff) or a very light grey (#d1d1d1), while for color backgrounds, you could go with a much lighter version of the same color, such as a light blue (#dcd9fc) or green (#ddffd9).
It’s also worth mentioning that many design sources recommend against having pure black (#000000) and pure white (#FFFFFF) set against each other, whether in Dark Mode or “light mode,” as this stark contrast may cause the most eyestrain. As ever, work with what looks best to you.
Learn more about using Styles to set your color scheme.
You can modify the color settings for Classic and Hybrid themes, which use the Customizer for site-wide visual changes, by going to Appearance → Customize and clicking on Colors or Colors & Backgrounds, depending on the theme. From here, you can adjust the background for your site’s theme to a dark color and the text to a light color, as discussed above.
Some themes may require custom CSS to add “dark mode” styling. Please note that adding this styling to your site is beyond the scope of our support and may require a designer.
Learn more about using the Customizer to set your color scheme.
You can find several plugins in the Marketplace that will add dark mode to your site, such as WP Dark Mode and Droit Dark Mode. In addition to applying dark mode to your site, many of these plugins can also apply dark mode to your site’s wp-admin dashboard.
