Discord: Split Theme Userscript (Dark Sidebar, Light Chat)

discord-split-theme-userscript.js

// ==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();