Breakdance DIY Dark mode toggle

While we are working on making dark mode toggle element. I will share small workaround to create dark mode switching button. This is not the best method, rather workaround as there are some hardcoded settings.

Step 1: JavaScript theme setter

This code will set theme based on value stored in user Local storage via Local storage API which is supported in all modern browsers.

<script>
if(localStorage.getItem("headspinTheme")){
var item = localStorage.getItem("headspinTheme");
  document.querySelector("html").setAttribute("data-hsx", item);
}
</script>

You will need to store that as Header code inside Breakdance settings. You need to locate like:

WP Admin => Breakdance > Settings > Custom code

There you will see Header code text area where you need to paste mentioned code. We need to save this code like this so it will executed before page so we prevent FOUC which would happen if this code is executed after page is generated.

Step 2: Breakdance button switcher

Design structure to copy you can find here

After code is copied, you need to go to Breakdance and press CTRL + V to paste elements.

Step 3: Configuration

Design structure is made of two Breakdance button elements. Configuration logic is inside separate code block element.

Inside that code block under CSS panel you will find small code like this:

You could notice .dark-only this is the case for default light them, in case of default dark theme you should rename this to .light-only