Light/Dark Mode Switcher

I recently came up with a solution to create a simple light mode / dark mode switcher using GeneratePress and GenerateBlocks and shared it on a livestream.

Here’s the code you will need to copy this setup!

Section ID

First you’ll need to give the section you want to effect with the switcher the id of #blogContent. This can be done by selecting the section, and in the block settings going under ‘Advanced’ > ‘HTML anchor’. You don’t need to include the “#” inside of this field.

SVG Icon

Below you’ll find the code for the SVG icon. You’ll want to copy and paste this into a Custom HTML block.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="mode-switch-button" viewBox="0 0 20 20" onclick="colorModeSwitcher()">
  <g id="switcher-icon" transform="translate(-384 -141)">
    <g id="sun" transform="translate(14)">
      <path id="brightness-high-fill" d="M15,10a5,5,0,1,1-5-5A5,5,0,0,1,15,10ZM10,0a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0V.625A.625.625,0,0,1,10,0Zm0,16.25a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0v-2.5A.625.625,0,0,1,10,16.25ZM20,10a.625.625,0,0,1-.625.625h-2.5a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,20,10ZM3.75,10a.625.625,0,0,1-.625.625H.625a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,3.75,10ZM17.071,2.929a.625.625,0,0,1,0,.884L15.3,5.581A.625.625,0,0,1,14.42,4.7l1.767-1.768a.625.625,0,0,1,.884,0ZM5.58,14.42a.625.625,0,0,1,0,.884L3.813,17.071a.625.625,0,1,1-.884-.884L4.7,14.42A.625.625,0,0,1,5.58,14.42Zm11.491,2.651a.625.625,0,0,1-.884,0L14.42,15.3a.625.625,0,1,1,.884-.884l1.767,1.768a.625.625,0,0,1,0,.884ZM5.58,5.581a.625.625,0,0,1-.884,0L2.929,3.813a.625.625,0,1,1,.884-.884L5.58,4.7a.625.625,0,0,1,0,.885Z" transform="translate(370 141)" fill="#f6f7f8"></path>
    </g>
    <g id="moon" transform="translate(-11.084 2.917)">
      <g id="moon-stars-fill" transform="translate(398 141)">
        <path id="Path_17" data-name="Path 17" d="M5.384.246a.673.673,0,0,1,.072.76A6.317,6.317,0,0,0,4.668,4.07a6.506,6.506,0,0,0,6.567,6.444,6.684,6.684,0,0,0,1.376-.142.711.711,0,0,1,.727.28.642.642,0,0,1-.028.791,7.531,7.531,0,0,1-5.822,2.726A7.416,7.416,0,0,1,0,6.827,7.343,7.343,0,0,1,4.6.053a.681.681,0,0,1,.786.193Z" transform="translate(0 -0.001)" fill="#181818"></path>
        <path id="Path_18" data-name="Path 18" d="M9.979,2.23a.154.154,0,0,1,.292,0l.274.823a1.23,1.23,0,0,0,.777.777l.823.274a.154.154,0,0,1,0,.292l-.823.274a1.228,1.228,0,0,0-.777.777l-.274.823a.154.154,0,0,1-.292,0L9.7,5.448a1.228,1.228,0,0,0-.777-.777L8.1,4.4a.154.154,0,0,1,0-.292l.823-.274A1.228,1.228,0,0,0,9.7,3.053l.274-.823ZM12.153.071a.1.1,0,0,1,.194,0l.183.548a.818.818,0,0,0,.519.519l.548.183a.1.1,0,0,1,0,.194l-.548.183a.819.819,0,0,0-.519.519l-.183.548a.1.1,0,0,1-.194,0l-.183-.548a.819.819,0,0,0-.519-.519L10.9,1.514a.1.1,0,0,1,0-.194l.548-.183A.818.818,0,0,0,11.97.619l.183-.548Z" transform="translate(0.501 -0.001)" fill="#181818"></path>
      </g>
    </g>
  </g>
</svg>

Javascript Function

Create a Hook element using GeneratePress, and copy and paste the code below into your hook.

<script>function colorModeSwitcher() {
  var element = document.getElementById("blogContent");
  element.classList.toggle("light-mode");
}</script>

I would suggest putting this hook in your WP Footer and then using the display conditions to only show it on the pages you need it (in the video I targeted “posts” since this was only going to be used on blog posts).

CSS

Lastly, you’ll need a little bit of CSS to make all the magic happen.

You can put this into your customizer where you can benefit from the live preview and then move it into your child theme once you’re happy with your code.

.mode-switch-button{
	width: 24px;
	height: 24px;
	cursor: pointer;
}

g#moon{
	opacity: 0;
	transition: .5s opacity ease-in;
}

g#sun{
	opacity: 1;
	transition: .5s opacity ease-in;
}

.light-mode g#moon{
	opacity: 1;
}

.light-mode g#sun{
	opacity: 0;
}

.light-mode{
	background-color: white;
	color: #0c0c0c;
}

.light-mode h2, .light-mode h3, .light-mode h4{
	color: #0c0c0c;
}

.light-mode a{
	color: #0c0c0c;
	text-decoration-color: #fec200;
	background-color: #fec20020;
	padding: 0em .2em;
	border-radius: 3px;
	transition: .2s all ease-in;
}

.light-mode a:hover{
	background-color: #fec200;
}

#blogContent{
	transition: .2s all ease-in;
}

Of course, you’ll need to edit that CSS to make it match your colors. If you’re not comfortable with CSS, I walk through what each line is doing during the video so you know what you need to change.