Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Dark mode — is it possible?

Dark mode — is it possible?

Scheduled Pinned Locked Moved General Discussion
20 Posts 8 Posters 1.4k Views
  • 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 GebauerH Offline
    Hayo GebauerH Offline
    Hayo Gebauer
    wrote on last edited by
    #1

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

    would it be possible to implement something like this?

    1 Reply Last reply
    1
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      1
      • Hayo GebauerH Offline
        Hayo GebauerH Offline
        Hayo Gebauer
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • Hayo GebauerH Offline
            Hayo GebauerH Offline
            Hayo Gebauer
            wrote on last edited by
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              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

              J 1 Reply Last reply
              2
              • T Offline
                T Offline
                thomasmaier
                wrote on last edited by
                #7

                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
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  • Hayo GebauerH Offline
                    Hayo GebauerH Offline
                    Hayo Gebauer
                    wrote on last edited by
                    #9

                    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 GebauerH K 2 Replies Last reply
                    0
                    • Hayo GebauerH 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 GebauerH Offline
                      Hayo GebauerH Offline
                      Hayo Gebauer
                      wrote on last edited by
                      #10
                      This post is deleted!
                      1 Reply Last reply
                      0
                      • F Offline
                        F Offline
                        felix_rabe
                        wrote on last edited by felix_rabe
                        #11

                        @Hayo-Gebauer

                        .nav.mobile-nav

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

                        Hayo GebauerH 1 Reply Last reply
                        1
                        • F 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 GebauerH Offline
                          Hayo GebauerH Offline
                          Hayo Gebauer
                          wrote on last edited by
                          #12

                          Thanks, it worked!!
                          @fr

                          1 Reply Last reply
                          0
                          • RichardR Offline
                            RichardR Offline
                            Richard
                            Global Moderator
                            wrote on last edited by
                            #13

                            Dear @fr

                            Awesome! :)

                            This is great for people in the future too

                            Thank you sincerely & for using Lay Theme
                            Richard

                            1 Reply Last reply
                            1
                            • Hayo GebauerH 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)

                              K Offline
                              K Offline
                              Keffer
                              wrote on last edited by
                              #14

                              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 GebauerH 1 Reply Last reply
                              0
                              • K 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 GebauerH Offline
                                Hayo GebauerH Offline
                                Hayo Gebauer
                                wrote on last edited by
                                #15

                                @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

                                K 1 Reply Last reply
                                2
                                • Hayo GebauerH 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

                                  K Offline
                                  K Offline
                                  Keffer
                                  wrote on last edited by
                                  #16

                                  @Hayo-Gebauer

                                  Thank you so much for this.

                                  1 Reply Last reply
                                  0
                                  • K Keffer referenced this topic on
                                  • K Offline
                                    K Offline
                                    Keffer
                                    wrote on last edited by Keffer
                                    #17

                                    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.

                                    1 Reply Last reply
                                    0
                                    • K Offline
                                      K Offline
                                      Keffer
                                      wrote on last edited by Keffer
                                      #18

                                      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>
                                      
                                      1 Reply Last reply
                                      0
                                      • mariusjopenM 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

                                        J Offline
                                        J Offline
                                        jacobtegel
                                        wrote on last edited by jacobtegel
                                        #19

                                        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 GebauerH 1 Reply Last reply
                                        0
                                        • J 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 GebauerH Offline
                                          Hayo GebauerH Offline
                                          Hayo Gebauer
                                          wrote on last edited by
                                          #20

                                          @jacobtegel let me know, when you find out, would like to know as well!

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          I also code custom websites or custom Lay features.
                                          💿 Email me here: 💿
                                          info@laytheme.com

                                          Before you post:
                                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                                          2. Update Lay Theme and all Lay Theme Addons
                                          3. Disable all Plugins
                                          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                          This often solves issues you might run into

                                          When you post:
                                          1. Post a link to where the problem is
                                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                          Online Users
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                          laytheme.com
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Search