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…
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!
@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
easrng
January 26, 2020, 10:32pm
29
try body{ background-color:white; filter:invert(1); } body img{ filter:invert(1); }
. it works for me!
easrng
January 26, 2020, 11:33pm
30
using stylus and the css i posted