How do I add a day and night button to my xenforo forum?

johnski

New member
Joined
Dec 23, 2019
Messages
2
Points
1
How do I add a day and night button to my xenforo forum? Do I have to create a plugin/add-on or is this something I can create with Coding?
 

Steven

Administrator
Staff member
Joined
Dec 19, 2019
Messages
7
Points
1
For this you can follow the tutorial below, it was a great help for my forum.


Code:
<input type="checkbox" id="toggle_dayNight" class="toggle remember" hidden>

<div id="top">

Code (markup):

Whatever your main content wrapping DIV is. We need a content wrapping 100% min-height DIV since input can't go before <body>.


Now first we want to bring the checkbox back into functionality with display:block, but still hidden so we apo it off the screen. This lets it be focused for keyboard navigation and makes IE and Edge let it work.

Code:
.toggle {

  display:block;

  position:absolute;

  left:-999em;

}


Code (markup):

Might look stupid, but it works.


#top {

  background:#EEE;

}


h1 {

  background:rgba(0,0,0.0.1);

}


Code (markup):

To make the toggle trigger night mode, you'd just:


#toggle_dayNight:checked + #top {

  background:#222;

}


#toggle_dayNight:checked + #top h1 {

  background:rgba(255,255,255,0.1);

}


Code (markup):

The trick is how to trigger the checkbox on and off whilst hiding it.


<label for="toggle_dayNight" class="control_dayNight"></label>


Code (markup):


.control_dayNight:before {

  content:"Click for Night Mode";

}


#toggle_dayNight:checked + #top .control_dayNight:before {

  content:"Click for Day Mode";

}
Code (markup):

We want that label empty since CSS off it does nothing, so we use generated content not only to make the text but also to change the text when it is checked.


More complex layouts you may need to use :checked + element + element, or even :checked ~ element, or some such.


But that's really the functionality side of implementing it. You could get fancier with fade in/out animations or slide in/out changes of day/night icons to take it even further.


It might seem like having to say ":checked + #top Element" over and over again would be painful in terms of reskinning, but so long as you didn't piss on it with a framework and have proper separation of presentation from content, the average site shouldn't need more than 4k of code, at worst 6k... basically bupkis.


Now, that makes it toggle on/off, but then we need to store the state. This is where that "remember" class comes into play. I often have a LOT of checkboxes I want to remember the state of, and this is where the ONLY scripting comes into play.


Code:
(function(d) {



    var rememberInput = d.getElementsByClassName('remember');


   


    /* believe it or not, fastest way to iterate a nodeList */


    for (var i = 0, input; input = rememberInput[i]; i++) {


   


        /* first let's see if any are to be remembered as set */


        if (localStorage.getItem(input.id) === '1') input.checked = true;


           


        /* then add event handler to save their state */


        input.addEventListener('change', rememberChange, false);


    }


   


    function rememberChange(e) {


   


        /* we'll use local storage, but cookie can be used too */


        localStorage.setItem(


            e.currentTarget.id,


            e.currentTarget.checked ? '1' : ''


        );


        console.log(


            e.currentTarget.checked,


            localStorage.getItem(e.currentTarget.id)


        );


       


    } // rememberChange



})(document);

Code (markup):

Which I'd include right before </body> so the script runs before CSS is applied. This way the "check the local storage and set the value if present" will set day/night before the render starts. Yes, some tools will bitch about a "blocking script" but in this case we're blocking on purpose in a place where it doesn't matter!


Information thanks too CUTCODEDOWN.COM © Jason M. Knight
 
Top