How I Enable Dark Mode In My WordPress Sites (Without A Plugin)

Since roughly a couple of weeks ago, I’ve been enabling dark mode on my devices and their browsers and apps, and I like it.

Anyway, when the Dark Reader extension on my browser turned my websites dark, I don’t like the visual because they’re not optimized for dark mode.

So, I decided to make all of my websites dark mode-friendly. And here’s how.

1. Add CSS code for dark mode

Add the following code to the Stylesheet (style.css), or if your theme supports an additional CSS feature like my theme does (Genesis Framework), you can use that.

/* Dark mode CSS */
@media (prefers-color-scheme: dark) {
 body {
 background-color: #333333;
 color: #dcdcdc;
 }
}

Credit to SmartWP.

The code above lets your site switch to the dark mode when the browser is in dark mode.

Don’t forget to customize the code to make sure your website looks nice when in dark mode because not all colors look good in dark mode.

2. Enable SVG support in WordPress

Next, we must enable SVG support in our WordPress sites because WordPress doesn’t support SVG by default since SVG can contain scripts that could be harmful to our websites.

To enable SVG support, add the following code to the Theme Functions (functions.php).

//* Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
  $filetype = wp_check_filetype( $filename, $mimes );
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
}, 10, 4 );
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
  echo '';
}
add_action( 'admin_head', 'fix_svg' );

Credit to GTmetrix

Now you can upload SVG images without getting any error messages.

3. Create an SVG logo, images, and icons that support dark mode

SVG is a format that is widely used by modern websites for their logo, icons, and many other things due to its capability to be programmed.

So, we must make sure that the images, graphics, and icons in our websites are able switch to their dark mode version by making them as SVG files.

Here are the steps:

1. Create the necessary graphics and export them in SVG format.
2. Sanitize the SVG files using SVG Sanitizer Test or SVG Minifier. This step is unnecessary if you make your own SVG images therefore you can trust that your file is safe.
3. Upload the image to SVG Viewer and click Prettify so the code will be easy to look.
4. Replace the <style> block (or insert it if it doesn’t exist yet) with the following code and then download it.

<style>
  path {
  fill: #333333;
}
@media (prefers-color-scheme: dark) {
  path { fill: #dcdcdc; }
}
</style>

Credit to Owen Conti

Now you can upload the images and replace all the current non-SVG standard images.

---

And that is how I enabled dark mode to my websites without using a plugin.

I think that having a dark mode will be the standard for many WordPress themes since it is easy on the eyes and saves battery for devices with OLED screens.