Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Dark mode — is it possible?

    General Discussion
    6
    13
    546
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Hayo Gebauer
      Hayo Gebauer last edited by

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

      would it be possible to implement something like this?

      1 Reply Last reply Reply Quote 1
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 1
        • Hayo Gebauer
          Hayo Gebauer last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • Hayo Gebauer
              Hayo Gebauer last edited by

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

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                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

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 1
                • T
                  thomasmaier last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • arminunruh
                    arminunruh Global Moderator last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • Hayo Gebauer
                      Hayo Gebauer last edited by

                      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 1 Reply Last reply Reply Quote 0
                      • Hayo Gebauer
                        Hayo Gebauer @Hayo Gebauer last edited by

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • felix_rabe
                          felix_rabe last edited by 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 1 Reply Last reply Reply Quote 1
                          • Hayo Gebauer
                            Hayo Gebauer @felix_rabe last edited by

                            Thanks, it worked!!
                            @fr

                            1 Reply Last reply Reply Quote 0
                            • Richard
                              Richard Global Moderator last edited by

                              Dear @fr

                              Awesome! :)

                              This is great for people in the future too

                              Thank you sincerely & for using Lay Theme
                              Richard

                              1 Reply Last reply Reply Quote 1
                              • First post
                                Last post

                              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

                              Thanks!

                              Online Users

                              Y
                              A
                              K
                              M
                              P

                              Recent Topics

                              • K

                                Unable to update lay theme / to login wp admin

                              • S

                                Theme crashed - because of Polylang?

                              • A

                                New button feature not available

                              • A

                                carousel addon not working after update

                              laytheme.com