Hey, free darkmode!

It Is a userscript in development,so please, suggest what you would like!

the Project: glitch.com/~dark-support-forum
Greasy Fork: https://greasyfork.org/en/scripts/393547-glitch-support-dark-mode

our github is J-Tech-Foundation/glitch-darkmode

it includes license, and the script.

2 Likes

Dude, I like the idea, but the user script doesn’t work! Try using Vanilla JS (normal JavaScript) instead of jQuery, as userscripts can be a bit complicated! Also, it’s better to use addEventListener() for the dark mode button, instead of the onclick method, for some reasons in user scripts.

1 Like

… ok then, lemme change that a bit…

still new to user script…

You had forgotten to append the buttons, so here’s my updated version:

// ==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==

//our friendly Definitions...

var Dark = document.createElement("button");
var Light = document.createElement("button");

// Append the buttons
document.body.appendChild(Dark);
document.body.appendChild(Light);

//event Listeners
Dark.addEventListener("click", function(){
  __a("LIGHT")
  Dark.style.visibility = "hidden";
  Light.style.visibility = "visible";
});
Light.addEventListener("click", function(){
  __a("DARK");
  Light.style.visibility = "hidden";
  Dark.style.visibility = "visible";
});

Dark.innerHTML = "Light Mode"
Light.innerHTML = "Dark Mode"

//our glorious function
function __a (mode) {
  switch (mode){
    case "DARK":
      document.getElementsByTagName("body")[0].style.backgroundColor = "black"
      break;
    case "LIGHT":
      document.getElementsByTagName("body")[0].style.backgroundColor = "white"
      break;
    default:
      document.getElementsByTagName("body")[0].style.backgroundColor = "white"
      break;//just for formality
  }
}

Update it like this and it will work! Now, you only need to update the colors, because right now, the dark mode is so DARK!

EDIT: Let’s create a new Glitch project and invite me, so that we can improve it and later export it to your GitHub repo.

1 Like

that is dark… holy cow, a color reverse would be a nice addition to this thing aswell…

i send link in dms .

Hey folks,

The improved version of the userscript can be found at glitch.com/~dark-support-forum. Credit to @J-Tech-Foundation for the base code! IT’S STILL UNDER DEVELOPMENT!

adding it to the top of post

Maybe add an option, so it’s not just dark mode, but you could have bar to change the level of darkness/brightness

1 Like

Thanks for the suggestion! Will be adding it as soon as possible!

hmmm… yes, this will be added for sure!

update: we are adding more contrast, and maybe (maybe not) trying to add a color reverser…

1 Like

So right now, 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!

Here’s how it looks right now:




Still trying to find more classes and invert the colours!

BTW, in css:

filter:invert(1);
1 Like

@easrng, I already tried this but for some reason, it doesn’t work!

1 Like

where did 18 messages come from?

I have started to test out a chrome extension i recently found, i am testing wilcards aswell with it, to see if i can make jquery work without all the extra issues

try body{ background-color:white; filter:invert(1); } body img{ filter:invert(1); }. it works for me!


using stylus and the css i posted