Night Mode

Adds a transparent dark layer depending on the time of the day to any website to make it less bright.
Script suggerito dall'autore
Potresti essere interessato/a anche a Redirect to Google Translator
Fai una domanda, pubblica una recensione, oppure segnala lo script.
// ==UserScript==
// @name         Night Mode
// @namespace    Nightmode
// @version      8
// @description  Adds a transparent dark layer depending on the time of the day to any website to make it less bright.
// @author       hacker09
// @include      *
// @require      https://greasyfork.org/scripts/403996-exev/code/ExEv.js?version=808391
// @icon         https://i.imgur.com/XxHMRlM.png
// @run-at       document-start
// @grant        GM_setValue
// @grant        GM_getValue
// @noframes
// ==/UserScript==

(function() {
  'use strict';
  if (GM_getValue("DefaultOpacity") === undefined) { //If the variable doesn't exist yet define the variables
    GM_setValue('DefaultOpacity', 30); //Set the default opacity % number
    GM_setValue('FromHour', 21); ///From this hour on enable the dark layer
    GM_setValue('ToHour', 8); //Up to this hour keep the dark layer enabled
  } //Finishes the if condition

  var timeinhours = new Date().getHours(); //Get the actual time

  if (GM_getValue('FromHour') < GM_getValue('ToHour')) //If the FromHour time is smaller than the ToHour time (If from hour is morning,afternoon or evening hour)
  { //Starts the if condition
    var TimeCondition = timeinhours >= GM_getValue('FromHour') && timeinhours <= GM_getValue('ToHour'); //Creates a new variable to check and hold the time condition
  } //Finishes the if condition
  if (GM_getValue('FromHour') > GM_getValue('ToHour')) //If the FromHour time is greater than the ToHour time (If from hour is night hour)
  { //Starts the if condition
    TimeCondition = timeinhours >= GM_getValue('FromHour') || timeinhours <= GM_getValue('ToHour'); //Creates a new variable to check and hold the time condition
  } //Finishes the if condition
  if (GM_getValue('FromHour') === GM_getValue('ToHour')) //If the FromHour time is equal the ToHour time
  { //Starts the if condition
    TimeCondition = timeinhours === GM_getValue('FromHour'); //Creates a new variable to check and hold the time condition
  } //Finishes the if condition

  if (TimeCondition === true || timeinhours === 0) //If the actual time is within the set times
  { //Starts the if condition
    document.events.on('bodyloaded', async () => { //When the body is loaded
      var opacity = (GM_getValue('nightSettings:' + document.location.host) || {}).opacity; //Get the website custom opacity %
      var DefaultOpacity = document.createElement('center'); //Creates a new element
      var SetCustomLayer = document.createElement('input'); //Creates a new element
      var MenuBox = document.createElement('container'); //Creates a new element
      var percentage = document.createElement('center'); //Creates a new element
      var closeButton = document.createElement('span'); //Creates a new element
      var Disable = document.createElement('center'); //Creates a new element
      var ShowMenu = document.createElement('div'); //Creates a new element
      var From = document.createElement('center'); //Creates a new element
      var text = document.createElement('center'); //Creates a new element
      var layer = document.createElement('div'); //Creates a new element

      ShowMenu.setAttribute("id", "nightmenu"); //Sets an id to the ShowMenu button
      layer.setAttribute("id", "nightThemeLayout"); //Sets an id to the layer element
      text.setAttribute("style", "color: white; margin-right: 10px;"); //The CSS for the text button
      SetCustomLayer.setAttribute("style", "cursor: pointer;"); //The CSS for the SetCustomLayer button
      [From, percentage, DefaultOpacity, Disable].map(element => element.setAttribute("style", "color: white;")); //The CSS for these 3 elements
      closeButton.setAttribute("style", "font: -webkit-control; color: red; position: absolute; left: calc(100% - (18px + 1.75px) * 0.9); top: -2px; cursor: pointer;"); //The CSS for the closeButton button
      ShowMenu.setAttribute("style", "cursor: pointer; width: 2rem; height: 2rem; position: fixed; top: " + `calc(${window.innerHeight}px - 2rem)` + "; left: " + `calc(${window.innerWidth}px - 3rem)` + "; text-align: center; background: rgb(0, 0, 0); color: white; padding: 0.5rem 0px; border: 1px solid white; z-index: 2147483647;"); //The CSS for the ShowMenu button
      MenuBox.setAttribute("style", "position: fixed; background: rgba(0, 0, 0, 0.8); display: none; transform: translateX(calc(50vw - 50%)); left: 0px; top: 40vh; border: 1px solid white; z-index: 2147483647;"); //The CSS for the MenuBox
      layer.setAttribute("style", "width: 100vw; height: 100vh; z-index: 2147483647; background: rgb(0, 0, 0); opacity: " + (opacity || GM_getValue("DefaultOpacity")) + "%" + "; position: fixed; top: 0px; left: 0px; pointer-events: none;"); //The CSS for the layer button

      DefaultOpacity.innerHTML = 'Default Opacity <input id="DefaultOpacity" style="width: 17px;" value="' + GM_getValue('DefaultOpacity') + '"></input>%'; //Set the default opacity % number to be displayed
      From.innerHTML = 'From <input id="FromHour" style="width: 17px;" value="' + GM_getValue('FromHour') + '"></input> to <input id="ToHour" style="width: 17px;" value="' + GM_getValue('ToHour') + '"></input>'; //Set the default from and to times
      Disable.innerHTML = 'Disable/Enable <input id="nightDisable" style="width: 17px;" type="checkbox"></input>'; //Add the disable checkbox

      ShowMenu.innerText = "⚙️"; //Sets the ShowMenu symbol
      closeButton.innerText = "❌"; //Sets the closeButton symbol
      text.innerText = "Layer's opacity"; //Sets the text element text
      percentage.innerText = (opacity || GM_getValue('DefaultOpacity')) + "%"; //Sets the % number text to be shown

      SetCustomLayer.min = "0"; //Define the minimum range number to 0
      SetCustomLayer.max = "95"; //Define the maximum range number to 95
      SetCustomLayer.type = "range"; //Let the user define the input from a range
      SetCustomLayer.value = (opacity || GM_getValue('DefaultOpacity')); //Set the default opacity % number to be displayed

      MenuBox.append(text, SetCustomLayer, percentage, From, DefaultOpacity, closeButton, Disable); //Add the element to the page
      document.body.append(layer, ShowMenu, MenuBox); //Add the element to the page

      [document.querySelector("#DefaultOpacity"), document.querySelector("#ToHour"), document.querySelector("#FromHour")].map(element => element.oninput = function() {
        GM_setValue('DefaultOpacity', parseInt(document.querySelector("#DefaultOpacity").value)); //Store the new DefaultOpacity variable %
        GM_setValue('FromHour', parseInt(document.querySelector("#FromHour").value)); //Store the new FromHour time variable
        GM_setValue('ToHour', parseInt(document.querySelector("#ToHour").value)); //Store the new ToHour time variable
      });

      document.querySelector("#nightDisable").addEventListener('change', function() { //If the disable/enable checkbox is checked/unchecked
        if (this.checked) { //If the checkbox is checked
          document.querySelector("#nightThemeLayout").style.display = 'none'; //Hide the dark layer
          document.querySelector("#nightmenu").style.display = 'none'; //Hide the menu
        } else { //If the checkbox is unchecked
          document.querySelector("#nightThemeLayout").style.display = ''; //Show the dark layer
          document.querySelector("#nightmenu").style.display = ''; //Show the menu
        } //Finishes the else condition
      }); //FInishes the onchange event listener

      document.addEventListener("fullscreenchange", function() { //When a video is on full screen
        if (document.fullscreen) { //If the video entered the full screen mode
          ShowMenu.style.display = "none"; //Hide the menu
        } else { //If the video lefted the full screen mode
          ShowMenu.style.display = "block"; //Show the menu button again
        } //Finishes the if condition
      }); //Finishes the fullscreenchange event listener

      ShowMenu.onclick = function() { //When the menu button is clicked
        this.style.display = "none"; //Hide the menu
        MenuBox.style.display = ''; //Show the options box
      }; //FInishes the click event listener

      closeButton.onclick = function() { //When the close button is clicked
        this.parentNode.style.display = "none"; //Hide the options box
        ShowMenu.style.display = "block"; //Show the menu button again
      }; //FInishes the click event listener

      SetCustomLayer.oninput = function() { //When the user changed the opacity %
        GM_setValue('nightSettings:' + document.location.host, {
          "opacity": this.value
        }); //Store the new opacity % to be used on this site
        percentage.innerText = `${this.value}%`; //Change the displayed opacity %
        layer.style.opacity = this.value + "%"; //Change the website opacity
      }; //Finishes the oninput event listener
    }); //Finishes the bodyloaded event listener
  } //Finishes the if condition
})();