Dark mode — is it possible?

---

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

would it be possible to implement something like this?

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

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?

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

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

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

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.

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

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

.nav.mobile-nav

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

Thanks, it worked!!
@fr

Dear @fr

Awesome! :)

This is great for people in the future too

Thank you sincerely & for using Lay Theme
Richard