So, turns out users /really/ like nightmode.
So while for some sites, the previous, much simpler nightmode will work fine, some will find their users demanding more complex functionality out of the nightmode as the site grows, or at least I did.
This is a far more complex setup, however- so if you find it intimidating, the simple night mode will work almost as well, with a third of the work.
So here's a more complex nightmode, with the following functionalities:
- Saved state- It will remember a users preference, and flip the nightmode to it on load.
- Auto nightmode option- Like google maps, it flips nightmode on when its night, and off when it's day.
- Instead of a cluttered toggle, separated functions
Step 1: CSS
Grab notepad or nodepad++, and your favorite web browser for development. Open up the inspector (ctrl-shift-i on chrome), and carefully tweak your way to a working night mode, copy pasting each CSS rule you make to the txt document, removing any unrelated rules (Keep only things you change!).
Be detailed! Remember dismiss dialogs, search pages, group pages, user settings pages, composers, everything.
Once you have a full night mode CSS, save this file as nightmode.css
Step 2: Putting the CSS file on your server
Use filezilla or similar to throw nightmode.css into nodebb/public
Step 3: JS
Paste the following into your header:
<script>
function nightmodeon(){
var el = document.getElementById('myStyles');
if ( el !== null ) {
} else {
var oLink = document.createElement("link")
oLink.id = 'myStyles';
oLink.href = "/nightmode.css";
oLink.rel = "stylesheet";
oLink.type = "text/css";
document.body.appendChild(oLink);
}
}
function daymode(){
var el = document.getElementById('myStyles');
if ( el !== null ) {
el.parentNode.removeChild(el);
} else {
var oLink = document.createElement("link")
oLink.id = 'myStyles';
oLink.href = "/nightmode.css";
oLink.rel = "stylesheet";
oLink.type = "text/css";
}
}
function autonightmode(){
var d = new Date();
var n = d.getHours();
if (n >= 21 || n <= 5) {
nightmodeon()
}
else{
daymode()
}
}
function nmSwitch(){
if (Number(localStorage.nmState) == 1) {
localStorage.nmState = Number(localStorage.nmState)+1;
modeSet()
}
else if (Number(localStorage.nmState) == 2) {
localStorage.nmState = Number(localStorage.nmState)+1;
modeSet()
}
else if (Number(localStorage.nmState) == 3) {
localStorage.nmState = Number(localStorage.nmState)+1;
modeSet()
}
else {
localStorage.nmState = 1;
}
}
function modeSet(){
if (Number(localStorage.nmState) == 1) {
autonightmode();
console.log('modeAuto');
}
else if (Number(localStorage.nmState) == 2) {
daymode();
console.log('modeDay');
$(".nightmodeCSS").html(" ");
}
else if (Number(localStorage.nmState) == 3) {
nightmodeon();
console.log('modeNight');
$(".nightmodeCSS").html(" ");
}
else {
autonightmode();
localStorage.nmState = 1;
console.log('modeElseAuto');
}
}
</script>`
You also need to create a HTML footer widget, and place this inside the widget. If you do not do this, it will not work.
<script> modeSet(); </script>
Step 4: Button
The button for this CAN be simple, but that will be absolutely baffling for the user, because it has three states, one less obvious then the others. You /will/ want to style this button to have three states, one for each mode, so the user can tell what mode they're in. However, if you just want to get it working and let the users sort it out, you can simply place this:
<button class="nightmodebutton" onclick="nmSwitch();"><span></span></button>
HOWEVER, there is a special place in hell for people who do that. Ideally, you should style the above button as "OFF" in your default CSS, style it as "ON" in your nightmode CSS, then add something like:
$(".[CLASS OF SOME EMPTY DIV HERE]").html("<style>.[BUTTONCLASS] span {color: #2196f3 !important;}</style>");
into "function autonightmode()", to give it an "Auto" state.
Hopefully that wasn't too complex, I'm aware it's a bit of a wall of text. Feel free to shoot me a chat if you have issues setting this up!
Telescope: Build your own Hacker News, Reddit, or Product Hunt.
