Night Mode

First topic message reminder :

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.

I have updated the tutorial on the support forum.

Superb! Works solid now

SLGray wrote:I have updated the tutorial on the support forum.

Greaaat, thanks !

Wilson wrote:Superb! Works solid now

Perfect, thanks again for letting me know of this problem.

Bonjour

Votre code est excellent

J'aimerais le mettre en haut de mon forum (à gauche ou à droite), mais je n'y arrive pas...

Merci de votre aide et excusez-moi de ne pas parler votre langue

Merci pour votre aide.

Cordialement.

Shag

PS: Bravo pour vos travaux !

Bonjour Shago,

Quelle est l'URL de votre forum ?

Merci !

Ange Tuteur wrote:Bonjour Shago,

Quelle est l'URL de votre forum ?

Merci !

Bonsoir,

Merci pour la réponse rapide

Voici le lien: http://www.fsx-france.com/

Merci

Re,

De rien. Essayez le script suivant :

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
 
  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-body'], // 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; margin-top:-35px; float:right; }</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>Mode Nuit :</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.parentNode.insertBefore(container, footer);
          break;
        }
      }
 
      if (!footer) {
        document.body.appendChild(container); // fallback if footer cannot be found
      }
    });
  }
}());

Re

J'ai mis le script java et rien ...

Merci de ton aide.

Oups, j'ai fait une erreur !

Essayez maintenant :

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
 
  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-body'], // 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; margin-top:-35px; float:right; }</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>Mode Nuit :</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.parentNode.insertBefore(container, footer);
          break;
        }
      }
 
      if (!footer) {
        document.body.appendChild(container); // fallback if footer cannot be found
      }
    });
  }
}());

Re,

Merci à toi !

Juste une chose, certains membres ont une configuration d'image différente...




Serait il possible de descendre le script d'un cran, juste au dessous de la barre du menu ?

Merci d'avance

Re,

Oui ! Ajoutez le code CSS suivant dans votre feuille de style.
Affichage > Couleurs > Feuille de style CSS

Code:

#fa_night_container {
  margin-top:0 !important;
}

C'est trop génial

Je l'ai légèrement modifié pour l’aligner et c'est parfait

Code:

#fa_night_container {
  margin-top:14 !important;

tu es génial

A très bientôt pour te lire.

Cordialement.

Shago

De rien.

Bonne soirée et a bientôt.

how about using someting like .postbody as target so it would be inside the post

It's possible, but it would display in every post, once you've reworked the script of course.

then what about

Code:

.postbody:first

but im wondering where ill put it inside the Script

Code:

page-footer

is that right
i was not online for like 8 month`s so i think i forget a litle of the coding skills

Try this out to see if it works :

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
 
  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 : '.postbody', // 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() {
      footer = $(fa_night_mode.targets)[0];
      if (footer) {
        footer.appendChild(container);
      } else {
        document.body.appendChild(container); // fallback if footer cannot be found
      }
    });
  }
}());

I had to modify it, because the selection method was only for IDs.

working good
but its not at the end of the post
but i think i can try to do that by my self
i just need to regain my skills
thanks for the modify too

What an awesome gadget!
I tried to translate into Arabic and it worked! Not that only, it turned to right (we write from right to left).

Here's the code in Arabic

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
 
  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:5px; 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>الوضع الليلي :</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
      }
    });
  }
}());

Nicely done !

Thanks!
Your work inspires me to make something myself. I know it is a very tiny contribution but I am glad I can help with something.

Cool, thank you @Ange Tuteur

Phewww... Finally got this one done in Edge.




JS:

Code:

(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
       
          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 { position:relative; z-index:999999999; font-size:11px; font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:bold; 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 = $('<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>Dimmer :</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-links.right', footer).prepend(container);
                  break;
                }
              }
         
              if (!footer) {
                document.body.appendChild(container); // fallback if footer cannot be found
              }
            });
          }
        }());

CSS:

Code:

/*POSITION_&_STYLE_NIGHT_MODE_CONTAINER*/#fa_night_container {z-index:1!important;background:none!important;border:0px!important;margin-top:-6px!important}

Ange Tuteur wrote:Try this out to see if it works :

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
 
  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 : '.postbody', // 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() {
      footer = $(fa_night_mode.targets)[0];
      if (footer) {
        footer.appendChild(container);
      } else {
        document.body.appendChild(container); // fallback if footer cannot be found
      }
    });
  }
}());

I had to modify it, because the selection method was only for IDs.

wow thats super nice
i like it this way a lot better
now its my turn to translate it into my language and host it as translated
thank you so much
me after seeing the Script working as i wish

Thanks it's install here
http://graphcode.forumactif.org/