Dark Mode in Oxygen

YouTube video

Written By

Jonathan Jernigan

Found at Permaslug and APEX Web Solutions

This easy to follow tutorial will show you how to set up Dark Mode on your Oxygen Builder website. Dark Mode is incredibly popular lately and having the ability to give your users a viewing option like dark mode is a great UX bonus.

Steps via FTP 

  1. Make sure you have My Custom Functionality plugin installed on your WordPress Website:
    https://github.com/srikat/my-custom-functionality/archive/master.zip
  2. Right click this link and save to your computer (“save link as”):
    https://github.com/coliff/dark-mode-switch/blob/master/dark-mode-switch.min.js
  3. Login via FTP to your website
  4. Browse to /wp-content/plugins/my-custom-functionality/assets/js
  5. Add the JS file you downloaded in step 2 to the above directory
  6. Browse to /wp-content/plugins/my-custom-functionality/ and edit plugin.php
  7. Add the following code towards the bottom inside the custom_enqueue_files section:
    wp_register_script( 'darkmode', plugin_dir_url( __FILE__ ) . 'assets/js/dark-mode-switch.min.js', '', '1.0', true );

Steps inside Oxygen

Add a code block and add the below code:

PHP

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

<script src="<?php wp_enqueue_script( 'darkmode' );?>"></script>

CSS:

[data-theme="dark"] {
  background-color: #111 !important;
  color: #fff;
}

[data-theme="dark"] .bg-light {
  background-color: #777 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

[data-theme="dark"] .bg-black {
  background-color: #444 !important;

}

Lastly, add the classes you’ve defined in the CSS section of the code block to whatever elements on your page to be adjusted when the toggle switch is clicked.

Enjoy!

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I summarize the goings on here on Permaslug, share announcements, and other pertinent information. I hate garbage emails as much as you and promise not to contribute anymore to it.

  • This field is for validation purposes and should be left unchanged.