Dark mode — is it possible?

[Hayo Gebauer]

After another go and mostly with the help of a friend, I made it work!
There's just one small issue left, on mobile in darkmode if you cancel the menu or go to any link in the menu, the background lights up white, anyway to keep it dark?

www.hayogebauer.com (issue only on mobile version)

[Hayo Gebauer]

This post is deleted!

[felix_rabe]

@Hayo-Gebauer

.nav.mobile-nav

You have to tell the dark mode button to toggle the background of this css property to black.

[Hayo Gebauer]

Thanks, it worked!!
@fr

[Richard]

Dear @fr

Awesome! :)

This is great for people in the future too

Thank you sincerely & for using Lay Theme
Richard

[Keffer]

Hello @Hayo-Gebauer

By any chance can you give the code you used for your website ?

Trying to get there but i'm not a code pro ...

[Hayo Gebauer]

@Keffer

This part is the darkmode code, first part of determines, that the website choses darrkmode, if the user has darkmode activated in their OS. (I put this part in Custom HTML at bottom)

<!-- Darkmode Code -->
<script>if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches){jQuery("body").addClass("dark-mode-on");}
window.laytheme.on("newpage", function(layoutObj, type, obj){
 
});
window.laytheme.on("newpage", function(layoutObj, type, obj){
jQuery( "li#menu-item-3845" ).html( '<div class="dark-mode-wrapper"><svg xmlns="http://www.w3.org/2000/svg" id="darkmode" fill="currentColor" stroke="currentColor" stroke-width="1.2" viewBox="0 0 14.5 14.5"><defs><style>.cls-3{fill:none;}.cls-4{stroke:none}svg#darkmode {overflow: hidden;}</style></defs><title>DARKMODE</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-3" cx="7.25" cy="7.25" r="6.75"/><path class="cls-4" d="M14,7.25a6.71,6.71,0,0,0-2.22-5L2.26,11.78A6.74,6.74,0,0,0,14,7.25Z"/></g></g></svg</div>');
});
jQuery(document).on("click", ".dark-mode-wrapper", function(event) {
jQuery("body").toggleClass("dark-mode-on");
});
</script>

Now you need to adjust your CSS classes like this:

.dark-mode-on {background-color: #000!important}

Go through everything until you have a complete darkmode. The darkmode button can be placed by giving a text or image the class:
dark-mode-wrapper

[Keffer]

@Hayo-Gebauer

Thank you so much for this.

[Keffer]

I'm lost trying to put this in motion so a last question :

I would love to add the dark mode in automatic mode in your code, when the system is changing, the website is changing too, without having to refresh.

The example :
https://codepen.io/daelity/pen/zgNdZj
https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript
https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/

Thank you anyone for the help.

[Keffer]

Alright after some tests i've found the solution to have the dark/light mode synchronised.

<!-- Darkmode Code -->
<script>

if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches){
    jQuery("body").addClass("dark-mode-on");
}
window
	.matchMedia("(prefers-color-scheme: dark)")
	.addEventListener("change", function (e) {
		const colorScheme = e.matches ? "dark" : "light";
		console.log(colorScheme);

		if (colorScheme === "dark") {
		    jQuery("body").addClass("dark-mode-on");
		} else {
		    jQuery("body").removeClass("dark-mode-on");
		}
	});
</script>

[jacobtegel]

Dear @mariusjopen and @Hayo-Gebauer thank you so much for your work on this topic!
i recently came across it and immediately tried to implement it on my site. I tried adding the darkmode button .clickme class ( i used .dark-mode-wrapper class) to an empty menu item and it would not fire the event, while an empty link on the site would fire it.
Any idea why that is or how to work around it? I would like to have the toggle button inside the menu permanently accessible.

https://jacobtegel.com/home-copy-2/

Thank you so much in advance!
Jacob

[Hayo Gebauer]

@jacobtegel let me know, when you find out, would like to know as well!