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

Thank you so much in advance!
Jacob

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

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.

Thank you so much for this.

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

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

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

Awesome! :)

This is great for people in the future too

Thank you sincerely & for using Lay Theme
Richard

.nav.mobile-nav

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

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

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

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.

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

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

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?

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

Best!

Marius