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
Callum
December 8, 2019, 10:30pm
11
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