Js Dark Mode Toggle Elementor Pro
hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to create a light / dark mode switcher for a one page website, with Elementor Pro. WITHOUT any additional plugin.
Js Dark Mode Toggle Elementor Pro
First of all, let’s give credit where it’s due because this tutorial is based on the code from Refracted Color.
This tutorial is video based (check above), but below you will find the code needed to complete it.
JS Code
While editing your custom Elementor Pro header, add an HTML widget, and paste the following code:
<div onclick="tdnn()" class="tdnn">
<span class="moon"></span>
</div>
<script type="text/javascript">
function tdnn() {
document.getElementsByClassName("moon")[0].classList.toggle("sun");
document.getElementsByClassName("tdnn")[0].classList.toggle("day");
document.getElementsByTagName("BODY")[0].classList.toggle("light");
}
</script>
Css Code: Light To Dark Mode
If you want a light-to-dark switcher, while editing your custom Elementor Pro header,:
- click on the gear icon (bottom left corner of the editor page) in order to edit the header Settings,
- then Advanced > Custom Css and paste the following code:
:root {
--darkbg: #251d29!important;
--darkt: #ffffff!important;
--lightbg: #ffffff!important;
--lightt: #423966!important;
--toggleHeight: 16em;
--toggleWidth: 30em;
--toggleBtnRadius: 10em;
--bgColor--night: #423966!important;
--mooncolor: #d9fbff!important;
--bgColor--day: #9ee3fb!important;
}
body {
transition: all 0.2s ease-in-out;
background: var(--lightbg);
color: var(--lightt);
text-align: center;
}
.light /* this is actually the dark version */ {
background: var(--darkbg);
color: var(--darkt);
}
h1,h2,h3,h4,h5,h6,p,span {color:inherit!important;}
.elementor-widget-text-editor, a.elementor-accordion-title, .elementor-tab-content {
color: inherit!important;
}
.tdnn {
cursor: pointer;
margin: 0 auto;
text: right!important;
/*change size of toggle with font-size*/
font-size: 2px!important;;
position: absolute;
/* change right & top values for your navigation*/
right:25px!important;
top:-15px!important;
height: var(--toggleHeight);
width: var(--toggleWidth);
border-radius: var(--toggleHeight);
transition: all 500ms ease-in-out;
background: var(--bgColor--night);
}
.day {
background: rgba(255,255,255,0.2);
}
.moon {
position: absolute;
display: block;
border-radius: 50%;
transition: all 400ms ease-in-out;
top: 3em;
left: 3em;
transform: rotate(-75deg);
width: var(--toggleBtnRadius);
height: var(--toggleBtnRadius);
background: var(--bgColor--night);
box-shadow: 3em 2.5em 0 0em var(--mooncolor) inset,
rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
top: 4.5em;
left: 18em;
transform: rotate(0deg);
width: 7em;
height: 7em;
background: #fff;
box-shadow: 3em 3em 0 5em #fff inset, 0 -5em 0 -2.7em #fff,
3.5em -3.5em 0 -3em #fff, 5em 0 0 -2.7em #fff, 3.5em 3.5em 0 -3em #fff,
0 5em 0 -2.7em #fff, -3.5em 3.5em 0 -3em #fff, -5em 0 0 -2.7em #fff,
-3.5em -3.5em 0 -3em #fff;
}
Css Code: Dark To Light Mode
If instead you want a dark-to-light switcher, while editing your custom Elementor Pro header,:
- click on the gear icon (bottom left corner of the editor page) in order to edit the header Settings,
- then Advanced > Custom Css and paste the following code:
:root {
--darkbg: #251d29!important;
--darkt: #ffffff!important;
--lightbg: #ffffff!important;
--lightt: #423966!important;
--toggleHeight: 16em;
--toggleWidth: 30em;
--toggleBtnRadius: 10em;
--bgColor--night: #423966!important;
--mooncolor: #d9fbff!important;
--bgColor--day: #9ee3fb!important;
}
body {
transition: all 0.2s ease-in-out;
background: var(--darkbg);
color: var(--darkt);
text-align: center;
}
.light {
background: var(--lightbg);
color: var(--lightt);
}
h1,h2,h3,h4,h5,h6,p,span {color:inherit!important;}
.elementor-widget-text-editor, a.elementor-accordion-title, .elementor-tab-content {
color: inherit!important;
}
.tdnn {
cursor: pointer;
margin: 0 auto;
text: right!important;
/*change size of toggle with font-size*/
font-size: 2px!important;;
position: absolute;
/* change right & top values for your navigation*/
right:25px!important;
top:-15px!important;
height: var(--toggleHeight);
width: var(--toggleWidth);
border-radius: var(--toggleHeight);
transition: all 500ms ease-in-out;
background: var(--bgColor--night);
}
.day {
background: rgba(255,255,255,0.2);
}
.moon {
position: absolute;
display: block;
border-radius: 50%;
transition: all 400ms ease-in-out;
top: 3em;
left: 3em;
transform: rotate(-75deg);
width: var(--toggleBtnRadius);
height: var(--toggleBtnRadius);
background: var(--bgColor--night);
box-shadow: 3em 2.5em 0 0em var(--mooncolor) inset,
rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
top: 4.5em;
left: 18em;
transform: rotate(0deg);
width: 7em;
height: 7em;
background: #fff;
box-shadow: 3em 3em 0 5em #fff inset, 0 -5em 0 -2.7em #fff,
3.5em -3.5em 0 -3em #fff, 5em 0 0 -2.7em #fff, 3.5em 3.5em 0 -3em #fff,
0 5em 0 -2.7em #fff, -3.5em 3.5em 0 -3em #fff, -5em 0 0 -2.7em #fff,
-3.5em -3.5em 0 -3em #fff;
}
Your turn!
I hope this tutorial will help you create a beautiful light/dark mode switcher with Elementor Pro! It could be for a one page website such as a promotional mini website for example.
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
