Just above this text and on my main website (except the main page) I have implemented a way to toggle between light mode and dark mode without the use of JavaScript. It doesn't quite look as good on this site because it's light by default and the way I implemented it only affects the content portions but that's just me being lazy. With clever layout decisions you could make it apply to the whole thing and put the button whereever. This is just an exampe and much like the mobile / hamburger menu I talked about before, it uses the sibling selector.

The only downside is that it doesn't persist between pages because...it's local to the page. So...that's why I really only add it to my articles so it's easier for some people to read that have a hard time reading light text on dark backgrounds.

The whole idea here is using a checkbox and it's sibling (in the case of this page I'm using the article element. Using the sibling selector (~), you can control all the CSS of all elements within the same container, and all the CSS in their children. For example, this checkbox is in the same paragraph container as this emphasized text, bold text, and anchor and therefore I can use it to style each one.

				   
<div>
	<input class="darkmode" type="checkbox" /> Dark Mode
	<p>This is a paragraph with a <a href="#">link</a> in it.</p>
</div>
				   
				 

				   
/* Make sure that the sibling is always added as it's easy to overlook. In this example, the p must always be there for everything inside it to get styles as p is the sibling of the input checkbox.*/
input.darkmode:checked ~ p {
	background-color: #000;
	color: #fff;
}

input.darkmode:checked ~ p a {
	color: #ff00ff;
}