To All Community Members, We Need Your Help

Coding Help
1

As most of you have seen by now, there is now a user script for the support forums, but we need help improving it as seen on the main thread here. we need as much help as possible, and as soon as possible, to Improve this project beyond first sought standards, we plan to add ALL suggested, but we need the help. thank you for reading this, and thank you for your time.

You can help by

  • providing us with hex colors not yet added
  • suggestions to replace with certain parts of the script
  • suggestions for the slider
  • and a bit more!
1 Like
2

Also, toggling between dark and light mode works perfectly, currently working on adding a slider for adjusting black-iness level. Anyone who knows, about using a slider to change level of blackness in CSS using JS, please HELP! Please feel free to view this project at glitch.com/edit/#!/dark-support-forum and remixing it and showing us what you did with it!

3

http://jsfiddle.net/j08691/muauc18w/ I would try to do something cleaner with this code later, after remixing the project.

1 Like
4

Oh, Nice job so far!
-Happy Glitching tech_dude1

1 Like
5

Hello @zeis974! thank you for the suggestion, but… we need something that is dom only, it will NOT use jQuery as it could cause errors and glitches in a lot of cases, we would love to use this! but only if it is transferred to dom. not to only mention that, but we want hex because it is easier for css parsing in all elements for the glitch forums, so we need something that would most likely be hex related, with rgb following behind hex.

if you do not understand, hex is the top priority for color specification, and rgb can cause glitches and errors.

2 Likes
6

thank you @Techy!

7

Hum OK no worries I’ll try to do that

2 Likes
8

update: we need a bit more help yet again, we need as many styles and their contents using dev tools here to extract their data, we have some of these styles already, but we are not full time workers, so we need some help to make this project possible

2 Likes
9

That’s right! Inspecting elements and getting their classes is getting tedious, because many elements have multiple classes and separate styles need to be declared, and I’ve already covered normal text, post descriptions, and grey text. But still more elements need to be covered, including the user cards, menu backgrounds, some popups and not to mention other pages, such as FAQ and About.

@J-Tech-Foundation, it would be better for rgb values, although hex is easier for CSS parsing, rgb values are easy to control, especially when using sliders. See hsla.glitch.me and try setting the rgb values to 0 and moving the slider of L values of HSL.

Thanks to @zeis974, for the JS Fiddle slider code, that has given me a basic idea!

And thank you, @Techy!

UPDATE: jQuery could be possible in userscripts, but implementing jQuery userscripts violates the Content Security Policy, and even if we were to add our own policy through the <meta> tags, that would not be safe (due to safety reasons!)

2 Likes
10

Hello Everyone, i would like to announce that we will be Adding rgb colors now

11

Dude, I’ve just added a slider. Right now, it’s just the background color changing, I need to update the styles!

12

ok …
:+1:
:+1:

13

the project may take longer than expected to finish…

14

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!

2 Likes
15

hello everyone!

we currently have the dark mode system fully working aside from a few bugs like manually having to use the slider in order for the dark mode to work, we should be done by friday!

1 Like
16

It’s been long, I know but I’m officially stuck! :smile: But I’ll let you know that the sliders have been beautified and now there’s a whole new beautiful (I don’t think so) popup that let’s you change the brightness value as per your wish and it hides when you’re in light mode. I’ll update the code in the above post so you can use it. But here’s the problem:

The elements in this Disourse forum has may classes. I really mean it. Just try Inspect Element on the category name element and you’ll see in the stylesheet that it has multiple classes and for some reasons that I do not know, only one of them changes the value. So far so good, but the error happens when I use the slider to change the values of the blockquote and the small bar in the post that has all the statistics of that post and this is the error:

Uncaught TypeError: Cannot read property 'style' of undefined
    at __a (userscript.html?id=2d2e74de-2f73-4ca1-9bc3-57d9428170ac:494)
    at HTMLButtonElement.<anonymous> (userscript.html?id=2d2e74de-2f73-4ca1-9bc3-57d9428170ac:96)

I double-checked and the class (.map) does exist but it gives me this error. You can view the whole script code either in the post above or check it out in Glitch :･ﾟ✧ and feel free to remix it and tell me what’s wrong. In case you’re wondering, since it’s a class and multiple elements exist under the same class, I use this piece of code to set the style for all the elements in that particular class:

var x, i;
x = document.querySelectorAll("blockquote");
for (i = 0; i < x.length; i++) {
   x[i].style.backgroundColor = "rgb(0, 0, " + darkBackColor + ")";
}

BTW, does anyone know any ways I can easily update my Tampermonkey code from my Glitch project because copy-pasting the code each time there’s a small addition to the code is really a big task. :sweat_smile:

17

one, 689 lines… when did it get that long. 2
do

x = document.getElementsByTagName("blockqoute");
x = x.querySelectorAll();

and then everything below

18

With automatically updating the code executed by the Tampermonkey script you could make an endpoint in your Glitch project which returns the code. Then, write a UserScript which uses XMLHttpRequest to fetch that data and execute it using eval. Note that eval is extremely dangerous if used to execute malicious JavaScript code.

Thus meaning that you just need to reload/relaunch/whateveryoudotoreexecuteit the user script and it’ll load the new version. Saving you from copy & pasting!

1 Like
19

Uh-oh, any idea on how to do it, like can you be more specific? I’m already baffled about what’s causing the error in the dark mode script.

20

Yes. I’ll make a script later today.

1 Like