To All Community Members, We Need Your Help

khalby786 · December 14, 2019, 4:44pm

Okay, so @Callum-OKane, as you requested in the earlier thread, I’ve added a brightness slider for the dark mode at the bottom of the page. It looks a bit ugly right now, but before I beautify it, I need you guys to test it in and see whether you find any bugs, or the background color not changing properly.

Also, I’ve added localStorage options, so that your dark mode brightness value is stored and you don’t have to always adjust the brightness.

I’m planning to add contrast and grayscale sliders, which might take a while. Also, I’ve deliberately left the user cards in default colors, because it looks really ugly in dark mode.

Here’s the full userscript:

// ==UserScript==
// @name       Glitch Support Dark Mode
// @namespace  SUPPORT-DARK-MODE
// @version    0.1
// @match      https://support.glitch.com/*
// @description your friendly dark screen for support.glitch.com
// ==/UserScript==

// var jQ = 3
//variables
//#d6d4d4

var body = document.getElementsByTagName("body")[0];
var center = document.createElement("center");
var hr = document.createElement("hr");
var brk = document.createElement("br");
var dark = document.createElement("button");
var light = document.createElement("button");
var style = document.createElement("style");
var div = document.createElement("div");
var settings = document.createElement("button");
var modal = document.createElement("div");
var modalcontent = document.createElement("div");
var close = document.createElement("span");
var p = document.createElement("p");
var modalcenter = document.createElement("center");
var brightness = document.createElement("span");
var modalbr = document.createElement("br");

var title = document.getElementById("topic-title");
var category = document.getElementsByClassName("category-name");
var user = document.getElementsByClassName("username");

var isLight = true;
var isDark = false;

// specifying IDs so that I can declare styles

div.setAttribute("class", "slidecontainer");
dark.setAttribute("id", "dark");
light.setAttribute("id", "light");
settings.setAttribute("id", "settings");
modal.setAttribute("id", "myModal");
modal.setAttribute("class", "modal");
modalcontent.setAttribute("class", "modal-content");
close.setAttribute("class", "close");

// Append Childs

center.appendChild(hr);
center.appendChild(dark);
center.appendChild(light);
center.appendChild(settings);
center.appendChild(brk);

modalcenter.appendChild(p);
modalcenter.appendChild(brightness);
modalcenter.appendChild(modalbr);
modalcenter.appendChild(div);
modalcontent.appendChild(close);
modalcontent.appendChild(modalcenter);
modal.appendChild(modalcontent);

document.body.appendChild(modal);

body.appendChild(center);

document.head.appendChild(style);

// Setting innerHTML content

dark.innerHTML = "dark";
light.innerHTML = "light";
settings.innerHTML = "⚙";
div.innerHTML =
  '<input type="range" min="0" max="170" value="0" class="slider" id="backValue">';
//modal.innerHTML = '<div class="modal-content"><span class="close">&times;</span><p>Some text in the Modal..</p></div>'
close.innerHTML = "&times;";
p.innerHTML =
  "Adjust dark mode/light mode settings so as to enhance your visual experience of the Support Forums!";
brightness.innerHTML = "BRIGHTNESS";

//var modalcontent = document.getElementsByClassName("model-content")[0];
//modalcontent.appendChild(div);
//document.getElementsByClassName('modal-content').appendChild(div);

var slider = document.getElementById("backValue");

//Document Event Listener

dark.addEventListener("click", function() {
  __a("DARK");
});
light.addEventListener("click", function() {
  __a("LIGHT");
});

// Functions defining what to do...

function darkstyles() {
  style.innerHTML = `
    
    
.slider {
  -webkit-appearance: none;
  width: 40%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: none;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4545CC;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4545CC;
  cursor: pointer;
}
    
    body {
      background-color: black;
      color: white;
    }

    .fancy-title {
      color: white;
    }

    #topic-title h1 a {
      color: white;
    }

    .category-name {
      color: white;
    }

    .username {
      color: white;
    }

    #light {
      border: solid #4545CC 2px;
      color: #4545CC;
      fill: #4545CC;
      background: white;
      height: 30px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    #dark {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    #settings {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    .topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
      color: white;
    }

    blockquote {
      background-color: black;
    }

    aside.quote .title {
      background-color: black;
    }

    .topic-map {
      color: white;
      border-radius: 5px;
      background-color: black;
    }

    .map {
      border-radius: 5px;
      color: white;
      background-color: black;
    }

    .topic-map h3 {
      color: white;
      background-color: black;
    }

    .names span a {
      color: #d6d4d4;
    }

    .discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
      color: #d6d4d4;
    }

    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 9; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
      border-radius: 9px;
      color: black;
    }

    /* The Close Button */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .nav-pills>li>a {
      color: white;
    }

  `;
}

function lightstyles() {
  style.innerHTML = `

    body {
      background-color: white;
      color: black;
    }

    .fancy-title {
      color: black;
    }

    .category-name {
      color: black;
    }

    .username {
      color: black;
    }

    #light {
      border: solid #4545CC 2px;
      color: #4545CC;
      fill: #4545CC;
      background: white;
      height: 30px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    #dark {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    #settings {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    .topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
      color: black;
    }

    blockquote {
      background-color: #f9f9f9;
    }

    aside.quote .title {
      background-color: #f9f9f9;
    }

    .topic-map {
      color: black;
      border-radius: 5px;
      background-color: ##f9f9f9;
    }

    .map {
      border-radius: 5px;
      color: black;
      background-color: ##f9f9f9;
    }

    .topic-map h3 {
      color: black;
      background-color: ##f9f9f9;
    }

    .names span a {
      color: #646464;
    }

    .discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
      color: #646464;
    }

    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 9; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
      border-radius: 9px;
    }

    /* The Close Button */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .nav-pills>li>a {
      color: black;
    }
`;
}

//mode function
function __a(mode) {
  switch (mode) {
    case "DARK":
      darkstyles();
      slider.style.display = "block";
      var darkBackColor = localStorage.getItem("rgbvalues");
      if (darkBackColor == "") {
        darkBackColor = 0;
      } else {
        document.body.style.backgroundColor =
          "rgb(0, 0, " + darkBackColor + ")";
      }
      isDark = true;
      isLight = false;
      dark.style.marginRight = "10px";
      brightness.style.display = "block";
      var x, i;
      x = document.querySelectorAll("blockquote");
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "rgb(0, 0, " + darkBackColor + ")";
      }
      var y, ii;
      y = document.querySelectorAll("aside.quote .title");
      for (ii = 0; ii < y.length; ii++) {
        x[ii].style.backgroundColor = "rgb(0, 0, " + darkBackColor + ")";
      }
      var z, iii;
      z = document.querySelectorAll(".topic-map");
      for (iii = 0; iii < y.length; iii++) {
        x[iii].style.backgroundColor = "rgb(0, 0, " + darkBackColor + ")";
      }
      var a, iiii;
      a = document.querySelectorAll(".map");
      for (iiii = 0; iiii < a.length; iiii++) {
        x[iiii].style.backgroundColor = "rgb(0, 0, " + darkBackColor + ")";
      }
      break;

    case "LIGHT":
      lightstyles();
      slider.style.display = "none";
      isDark = false;
      isLight = true;
      document.body.style.backgroundColor = "white";
      light.style.marginRight = "10px";
      brightness.style.display = "none";
      break;
  }
}

// Styles for the button

style.innerHTML = `

#light {
  border: solid #4545CC 2px;
  color: #4545CC;
  fill: #4545CC;
  background: white;
  height: 30px;
  border-radius: 5px;
  transition: top 0.2s ease;
  position: relative;
  top: 0;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 40px;
  margin-right: 10px;
}

#dark {
  border: solid white 2px;
  color: white;
  fill: #4545CC;
  background: #4545CC;
  height: 32px;
  border-radius: 5px;
  transition: top 0.2s ease;
  position: relative;
  top: 0;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 40px;
  margin-right: 10px;
}

#settings {
  border: solid white 2px;
  color: white;
  fill: #4545CC;
  background: #4545CC;
  height: 32px;
  border-radius: 5px;
  transition: top 0.2s ease;
  position: relative;
  top: 0;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 40px;
  margin-right: 10px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius: 9px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.slider {
  -webkit-appearance: none;
  width: 40%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: none;
  visibility: hidden;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4545CC;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4545CC;
  cursor: pointer;
}
`;

slider.oninput = function() {
  var rgbValue = this.value;
  console.log(rgbValue);
  if (isDark) {
    document.body.style.backgroundColor = "rgb(0, 0, " + rgbValue + ")";
    localStorage.setItem("rgbvalues", rgbValue);
    var x, i;
    x = document.querySelectorAll("blockquote");
    for (i = 0; i < x.length; i++) {
      x[i].style.backgroundColor = "rgb(0, 0, " + rgbValue + ")";
    }
    var y, ii;
    y = document.querySelectorAll("aside.quote .title");
    for (ii = 0; ii < y.length; ii++) {
      x[ii].style.backgroundColor = "rgb(0, 0, " + rgbValue + ")";
    }
    var z, iii;
    z = document.querySelectorAll(".topic-map");
    for (iii = 0; iii < y.length; iii++) {
      x[iii].style.backgroundColor = "rgb(0, 0, " + rgbValue + ")";
    }
    var a, iiii;
    a = document.querySelectorAll(".map");
    for (iiii = 0; iiii < a.length; iiii++) {
      x[iiii].style.backgroundColor = "rgb(0, 0, " + rgbValue + ")";
    }
  } else {
    document.body.style.backgroundColor = "white";
  }
};

var modalbox = document.getElementById("myModal");
var btn = document.getElementById("settings");
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modalbox.style.display = "block";
};

span.onclick = function() {
  modalbox.style.visiblity = "hidden";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modalbox.style.display = "none";
  }
};

Thanks to all those who helped!

EDIT: The above code is the latest update!

Topic		Replies	Views
Dark Theme Button Glitch Help html , css , javascript , nodejs	8	723	April 28, 2020
[Tutorial] How to use CSS Glitch Tutorials	18	2356	March 29, 2024
How to make a working Settings page Coding Help html , javascript	6	322	May 12, 2022
Another Bug Report + Needing Help Coding Help bug , bugs	4	332	October 24, 2023
VS Code to Glitch css help Coding Help css	1	294	August 8, 2020

To All Community Members, We Need Your Help

Related Topics