Dark mode — is it possible?
-
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-javascriptBest!
Marius
-
thanks for the advice, I'm not familiar with jQuery but managed to make this:
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)
-
This post is deleted! -
.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
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it