Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Discord: Split Theme Userscript (Dark Sidebar, Light Chat)
// ==UserScript==
// @name Discord Split Dark+Light Theme
// @version 1
// @match https://discordapp.com/*
// @grant none
// ==/UserScript==
// NOTE: Set Discord to the Light theme. This will override the sidebar and
// "guilds" sections to force them to the dark theme.
function classnamesMatch(node, partialClassnames) {
if (!node || !node.className) {
return false;
}
const partialClassnamesMatch = partialClassnames.some(pc =>
node.className.includes(pc)
);
return partialClassnamesMatch;
}
function observeForChanges(
isAdded,
partialClassnames = [],
onChangedCallback = () => {}
) {
const observer = new MutationObserver(mutations => {
//console.log("Checking nodes...");
let numNodesChecked = 0;
const fieldName = isAdded ? "addedNodes" : "removedNodes";
const partialClassnameSelectors = partialClassnames
.map(pc => `[class*=${pc}]`)
.join(", ");
console.log("Classname selectors: ", partialClassnameSelectors);
for (let mutation of mutations) {
for (let addedNode of mutation[fieldName]) {
numNodesChecked++;
if (classnamesMatch(addedNode, partialClassnames)) {
//console.log("Found matching classname node: ", { addedNode });
onChangedCallback(addedNode);
} else {
const matchingDescendants = addedNode.querySelectorAll(
partialClassnameSelectors
);
matchingDescendants.forEach(onChangedCallback);
}
}
}
//console.log("Total nodes checked: ", numNodesChecked);
});
observer.observe(document.documentElement, {
childList: true,
subtree: true
});
}
function watchForAddedNodes() {
//console.log("Starting to watch for elements...");
observeForChanges(true, ["guilds-", "sidebar-"], node => {
//console.log("Node added: ", { node });
node.classList.add("theme-dark");
});
}
watchForAddedNodes();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment