Night Mode

What is "Night Mode" ? Night Mode is a plugin that allows you to reduce the brightness of the forum, making it appear easier on the eyes. It's perfect for night time browsing, people with light sensitivity, or vampires !

Click to view demo

This plugin is optimized for use on all forum versions and expected to work on the following browsers.

Chrome	Firefox	Internet Explorer	Opera	Safari
5.0+	23.0+	11+	15+	4+

Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Night Mode
Placement : In all the pages
Paste the following code :

Code:

(function() {
  if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
  if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
 
    window.fa_night_mode = {
      targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
   
      // executed when the dimmer is changed
      dimLight : function() {
        var val = +fa_night_mode.dimmer.value;
        fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
        fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
        my_setcookie('fa_night_level', val);
      }
    };
 
    // startup variables
    var dimmer = document.createElement('INPUT'),
        container = document.createElement('DIV'),
        counter = document.createElement('SPAN'),
        cookie = my_getcookie('fa_night_level'); // cookies <3
     
    // set the night shade and styles
    document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style>');
    fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];

    fa_night_mode.interval = window.setInterval(function() {
      if (document.body) {
        document.body.appendChild(fa_night_mode.shade);
        window.clearInterval(fa_night_mode.interval);
      }
    }, 1);
 
    // dimmer attributes
    dimmer.id = 'fa_night_dimmer';
    dimmer.type = 'range';
    dimmer.min = 0;
    dimmer.max = 90;
    dimmer.value = cookie || 0;
    dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
 
    // percentage counter
    counter.id = 'fa_night_counter';
    counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
 
    // container contents
    container.id = 'fa_night_container';
    container.innerHTML = '<span>Night Mode :</span>';
    $(container).append([dimmer, counter]);
 
    // cache nodes to the global object
    fa_night_mode.dimmer = dimmer;
    fa_night_mode.counter = counter;
 
 
    // stuff to do when the document is ready
    $(function() {
      // find one ( AND ONLY ONE ) of the targets to attach the dimmer
      for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
        footer = document.getElementById(fa_night_mode.targets[i]);
        if (footer) {
          footer.appendChild(container);
          break;
        }
      }
   
      if (!footer) {
        document.body.appendChild(container); // fallback if footer cannot be found
      }
    });
  }
}());

When you're finished, save the script and Night Mode will be installed ! To test it out, go to your forum and you'll be able to find the Night Mode controls at the footer. Just drag the slider to change the dimness of the forum and you'll be set !


If you have any questions, comments, or encounter a bug feel free to leave a reply below. Now say goodbye to those sunglasses, because you'll be able to dim the lights from now on !

Notice

Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author.

Fantastic feature! I had such program running on my laptop before upgrading to Windows 10 Pro 64, but I don't remember the name. Please tell me, how do I move the #fa_night_container to these kind of places http://prntscr.com/ao34nr ?

I tried this using CSS:

Code:

/*---- NIGHT MODE -----------------------------------------------*/
#fa_night_container {margin-top:-30px}

If it's not possible thru CSS then better leave it. I don't want you to change the whole script just for me

Find the targets variable and add the ID of the element you want it attached to. This is how it looks by default :

Code:

targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to

It'll attach onto the default footers of each version. If the footer isn't available it'll be placed at the end of the body element.

Considering where you want it you can modify this part :

Code:

footer.appendChild(container);

into this :

Code:

$('.navbar', footer).prepend(container);

That should add it to the beginning of the .navbar element.

http://prntscr.com/ao3ij5

JS:

Code:

(function() {
          if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
          if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
         
            window.fa_night_mode = {
              targets : ['picture_legend', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
           
              // executed when the dimmer is changed
              dimLight : function() {
                var val = +fa_night_mode.dimmer.value;
                fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
                fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
                my_setcookie('fa_night_level', val);
              }
            };
         
            // startup variables
            var dimmer = document.createElement('INPUT'),
                container = document.createElement('DIV'),
                counter = document.createElement('SPAN'),
                cookie = my_getcookie('fa_night_level'); // cookies <3
             
            // set the night shade and styles
            document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:10px; font-family:arial, sans-serif; background:#EEE; border:0px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');
            fa_night_mode.shade = document.getElementById('fa_night_shade');
         
            // dimmer attributes
            dimmer.id = 'fa_night_dimmer';
            dimmer.type = 'range';
            dimmer.min = 0;
            dimmer.max = 90;
            dimmer.value = cookie || 0;
            dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
         
            // percentage counter
            counter.id = 'fa_night_counter';
            counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
         
            // container contents
            container.id = 'fa_night_container';
            container.innerHTML = '<span>Nacht Modus :</span>';
            $(container).append([dimmer, counter]);
         
            // cache nodes to the global object
            fa_night_mode.dimmer = dimmer;
            fa_night_mode.counter = counter;
         
         
            // stuff to do when the document is ready
            $(function() {
              // find one ( AND ONLY ONE ) of the targets to attach the dimmer
              for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
                footer = document.getElementById(fa_night_mode.targets[i]);
                if (footer) {
                  footer.appendChild(container);
                  break;
                }
              }
           
              if (!footer) {
                document.body.appendChild(container); // fallback if footer cannot be found
              }
            });
          }
        }());

CSS:

Code:

/*---- NIGHT MODE -----------------------------------------------*/
#fa_night_container {background:none!important}
#fa_night_dimmer:hover {cursor: url(http://i14.servimg.com/u/f14/17/68/63/00/sonic10.gif), pointer!important;}


Oooh is that where you wanted it ?

Ange Tuteur wrote:Oooh is that where you wanted it ?

Looks cute there doesn't it? Translated it to Dutch as well.

Another marvelous script! Thank you Ange, just the thing I want!


Question: How can you make the option 'Night Mode' immune to the dimness?

Cool little feature there Ange.

Samantha wrote: Looks cute there doesn't it? Translated it to Dutch as well.

Totally, it looks snug !

Wilson wrote:Another marvelous script! Thank you Ange, just the thing I want!


Question: How can you make the option 'Night Mode' immune to the dimness?

No problem, glad you like it.

I'm not sure, what is this "dimness" options ?

brandon_g wrote:Cool little feature there Ange.

Thanks !

Ange Tuteur wrote:

Samantha wrote: Looks cute there doesn't it? Translated it to Dutch as well.

Totally, it looks snug !

Wilson wrote:Another marvelous script! Thank you Ange, just the thing I want!


Question: How can you make the option 'Night Mode' immune to the dimness?

No problem, glad you like it.

I'm not sure, what is this "dimness" options ?

brandon_g wrote:Cool little feature there Ange.

Thanks !

Wow thanks dude! Finally got a compliment out of your coffee trap.

I think what Wilson tried to mention is, when dimming the controls get dimmed as well. I guess he asked for a way to keep the controls into view (excluded from dimming).

Ooooh, I get it now. Edit the script and find this part :

Code:

document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');

and replace it with this :

Code:

document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { position:relative; z-index:999999999; font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');

However, if there's any content that's fixed to the screen it may overlap it.

Haha! Thanks for explaining it further @Samantha.

Script works great @Ange Tuteur! Thanks once again.

I'm looking forward to see your next genius creation, Seth! XXX

Oh, pls don't choke upon ur 1st cup reading this today. We're all gonna miss ya yk....

Whispering: I bet I got 50k of FM credits laying around somewhere to pay for that flight to Virginia.... Hmmm....

fantastic

Wilson wrote:Script works great Ange Tuteur! Thanks once again.

Anytime.

Samantha wrote:I'm looking forward to see your next genius creation, Seth! XXX

Oh, pls don't choke upon ur 1st cup reading this today. We're all gonna miss ya yk....

Whispering: I bet I got 50k of FM credits laying around somewhere to pay for that flight to Virginia.... Hmmm....

At the moment I have one more thing in testing. After that I need to pull something else out of my... magic hat.

Good luck, I'm out in the boondocks.

jessy wrote:fantastic

I found a bug!

I looked into the elements of my forum and I was wondering why the supposedly head elements is inside the body tag. I tried turning off the javascripts, then things are now ok. Now I turned on the javascripts again and tried looking for specific script that is doing the thing.

Figured it was this script. This is how it looks like when the script is activated:

What is the issue with your forum?  Is the script causing an issue with your forum's appearance?

@SLGray As I said on my last reply. Not really causing much a problem but I don't think it's a good thing having head elements inside body tag.

What do you mean by head elements?

Elements that was supposedly inside <head> tag.

I really do not see what you are talking about in your screenshot.

Sorry for not being clear.
With the script on:

With the script off:

hello i put this code in my second forum  http://keeponblogging.forumotion.com (invision) and i found some weird bug ..
when i activate the night mode somehow the thanks button appears in front of the topic like a navbar ..i think its a conflict between the two 



here is the code from the thanks button in case you need it

Code:

$(function() {
  var message = function(child, parent) {
        var pseudo = $(child, parent).text(),
            icon = '<img src="http://i18.servimg.com/u/f18/18/21/60/73/fa_sta10.png" alt=""/>';
   
        return '<div id="fa_thanks_message">' + icon + ' Ο συγγραφέας σου είπε ευχαριστώ, ' + pseudo + ' ! ' + icon + '</div>';
      },
     
      version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
      node = document.createElement(version ? 'DIV' : 'TR'),
      post = $(version ? 'div' : 'tr' + '.post'),
      j = post.length,
      i = 0;
 
  if (version == 'badapple') {
    if (window.console) console.error('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
    return;
  }
 
  node.id = 'fa_thanks'; // id for style modifications
  if (!version) node.innerHTML = '<td colspan="2"></td>'; // phpbb2 must have a cell as the child node
 
  for (; i < j; i++) {
   
    if ((version ? post[i] : post[i].firstChild).style.backgroundColor) { // thanked posts have the backgroundColor style property
     
      post[i].className += ' thanked'; // mark the thanked post with a class
      (version ? node : node.firstChild).innerHTML = message(['.name', 'dl > dt > strong', '.username', '.popmenubutton'][version], post[i]); // thanks message
     
      switch (version) {
       
        case 0 : // phpbb2
          node.firstChild.style.backgroundColor = post[i].firstChild.style.backgroundColor;
          node.firstChild.className = post[i].firstChild.className;
          post[i].parentNode.insertBefore(node, post[i].nextSibling);
          break;
         
        case 1 : // phpbb3
          post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling);
          break;
         
        case 2 : // punbb
          node.className = 'postfoot';
          node.style.margin = '0';
          post[i].appendChild(node);
          break;
         
        case 3 : // invision
          node.className = 'post-footer';
          node.style.backgroundColor = post[i].style.backgroundColor;
          post[i].appendChild(node);
          break;
       
      }
     
      break; // break out of the for loop when the thanked post is found
    }
   
  }
});

the code on my punbb forum works perfect by the way love it

Wilson wrote:I found a bug!

I looked into the elements of my forum and I was wondering why the supposedly head elements is inside the body tag. I tried turning off the javascripts, then things are now ok. Now I turned on the javascripts again and tried looking for specific script that is doing the thing.

Figured it was this script. This is how it looks like when the script is activated:

Thanks a lot, I didn't notice this when I was working on it ! It was most likely caused due to document.write()'ing a div into the head section. I replaced that method with an interval that polls to see if the body is ready. Let me know if the update script in the first post works for you.

skouliki wrote:hello i put this code in my second forum  http://keeponblogging.forumotion.com (invision) and i found some weird bug ..
when i activate the night mode somehow the thanks button appears in front of the topic like a navbar ..i think its a conflict between the two 



here is the code from the thanks button in case you need it

Code:

$(function() {
  var message = function(child, parent) {
        var pseudo = $(child, parent).text(),
            icon = '<img src="http://i18.servimg.com/u/f18/18/21/60/73/fa_sta10.png" alt=""/>';
   
        return '<div id="fa_thanks_message">' + icon + ' Ο συγγραφέας σου είπε ευχαριστώ, ' + pseudo + ' ! ' + icon + '</div>';
      },
     
      version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
      node = document.createElement(version ? 'DIV' : 'TR'),
      post = $(version ? 'div' : 'tr' + '.post'),
      j = post.length,
      i = 0;
 
  if (version == 'badapple') {
    if (window.console) console.error('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
    return;
  }
 
  node.id = 'fa_thanks'; // id for style modifications
  if (!version) node.innerHTML = '<td colspan="2"></td>'; // phpbb2 must have a cell as the child node
 
  for (; i < j; i++) {
   
    if ((version ? post[i] : post[i].firstChild).style.backgroundColor) { // thanked posts have the backgroundColor style property
     
      post[i].className += ' thanked'; // mark the thanked post with a class
      (version ? node : node.firstChild).innerHTML = message(['.name', 'dl > dt > strong', '.username', '.popmenubutton'][version], post[i]); // thanks message
     
      switch (version) {
       
        case 0 : // phpbb2
          node.firstChild.style.backgroundColor = post[i].firstChild.style.backgroundColor;
          node.firstChild.className = post[i].firstChild.className;
          post[i].parentNode.insertBefore(node, post[i].nextSibling);
          break;
         
        case 1 : // phpbb3
          post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling);
          break;
         
        case 2 : // punbb
          node.className = 'postfoot';
          node.style.margin = '0';
          post[i].appendChild(node);
          break;
         
        case 3 : // invision
          node.className = 'post-footer';
          node.style.backgroundColor = post[i].style.backgroundColor;
          post[i].appendChild(node);
          break;
       
      }
     
      break; // break out of the for loop when the thanked post is found
    }
   
  }
});

the code on my punbb forum works perfect by the way love it

It looks like this might be caused by a naive mistake on my part. In the script you posted, replace this :

Code:

$(version ? 'div' : 'tr' + '.post')

by :

Code:

$(version ? 'div.post' : 'tr.post')

I'll make sure someone updates the tutorial.

yes now all works perfect thank you