Dark mode — is it possible?

[Hayo Gebauer]

https://codepen.io/HarlemSquirrel/pen/NdMebZ?fbclid=IwAR0yShgdR6YdQZ54H1N3wEeb1gNW_LNh_cDVeBTFn6xWcZdQ8clO7AxaT80

would it be possible to implement something like this?

[mariusjopen]

Dear @Hayo-Gebauer
well, you might use this code to achieve exactly this.

To implement it have a look here:
http://laytheme.com/documentation.html#custom-javascript

Best!

Marius

[Hayo Gebauer]

thanks for the advice, I'm not familiar with jQuery but managed to make this:

hayogebauer.com/lel

using this:
<script>
jQuery(document).on("click", ".clickme", function(event) {
jQuery("nav.primary").css("color", "#fff");
jQuery("._Default").css("color", "#fff");
jQuery("._Small").css("color", "#fff");
jQuery("._Caption").css("color", "#fff");
jQuery("body").css("background-color", "#0a0a0a");
});
</script>

still buggy though, I think I have the wrong selectors? also it doenst switch back to light mode on click and doesnt last on refresh, any tipps?

[mariusjopen]

Dear @Hayo-Gebauer
lovely!

Well done!

I think the best is if you make a quick, free tutorial about Javascript or jQuery on Codeacademy.
Then you will know everything you need.

Best!

Marius

[Hayo Gebauer]

Anyone here maybe, who can help me with this code?
I tried finding out on the net, don't have the time to do the codearmy tutorial currently...

[mariusjopen]

Dear @Hayo-Gebauer

Have a look here:

jQuery(document).on("click", ".clickme", function(event) {
jQuery("body").toogleClass("dark-mode-on");
});

This toggles a class called "dark-mode-on" in the top of your page.

You can then use CSS with children elements to make the change. For example:

.dark-mode-on .site-title {
color: red;
}

.dark-mode-on ._Default {
background-color: yellow;
}

Just to give you a rough idea…

Hope that helps!

Best!

Marius

[thomasmaier]

On page load I am getting this error "Failed to load resource: [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (backbone.radio.min.js.map, line 0)

What can cause this?

And if I use the code and click the toggle link it produces the error "[Error] TypeError: undefined is not an object (evaluating 'jQuery(t).offset().top')
(anonymous function) (frontend.app.min.js:1:60885)
dispatch (jquery.js:3:12375)
(anonymous function) (jquery.js:3:9094)"

weird.

[arminunruh]

please create a new topic for your new issue

make sure u have updated lay theme and all of your lay theme addons

u can only update lay theme if u have entered the license key

then make sure if you use any caching plugin to clear the cache or disable the caching plugin

[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!