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
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!
Membership Benefits Include: