Skip to content

Instantly share code, notes, and snippets.

@SerStars
Last active May 5, 2024 20:25
Show Gist options
  • Save SerStars/a756a4dd51c96e12ff97fda2e09a858f to your computer and use it in GitHub Desktop.
Save SerStars/a756a4dd51c96e12ff97fda2e09a858f to your computer and use it in GitHub Desktop.
Enable Discords Hidden Darker and/or Midnight Themes

Enable Discords Hidden Darker and/or Midnight Themes

Note

There are 2 methods that allow you to enable these themes.
Options: Enabling the Experiment or using a script.

Experiments

This is one of the easiest methods but you'll need Vencord and install the Experiments Plugin or paste the script below to enable and view the "Experiments" tab.

Vencord
  1. Install Vencord.
  2. Install the Experiments Plugin.
  3. Head over to the "Experiments" tab and search for the "Desktop Visual Refresh" (2024-05_desktop_visual_refresh) experiment
  4. Set your bucket override to "Treatment 1: Refresh Enabled".
  5. Go to the Appearance and select your desired theme!
Script to enable Experiments

Note

Discord might patch this Script at anytime. If this script doesn't work please try one of the other methods.

Note

Refreshing or restarting your client removes the experiments tab and the setting in the Appearance tab, but you will keep the theme.

How to use this script:

  1. Open DevTools by pressing
    CTRL+SHIFT+I (Windows)
    CMD+OPTION+I (MacOS)
  2. Go to the Console tab
  3. Paste the following code and hit enter:
let wreq; webpackChunkdiscord_app.push([[Symbol()],{},(r) => wreq = r]);
webpackChunkdiscord_app.pop();
let module = Object.values(wreq.c).find(x => x?.exports?.default?.getUsers).exports.default;;
nodes = Object.values(module._dispatcher._actionHandlers._dependencyGraph.nodes);
try {
    nodes.find(x => x.name == "ExperimentStore").actionHandler["OVERLAY_INITIALIZE"]({
        user: {
            flags: 1
        }
    });
} catch (e) {}
original = [module.getCurrentUser, module.getNonImpersonatedCurrentUser];
module.getCurrentUser = module.getNonImpersonatedCurrentUser = () => ({
    isStaff: () => true
});
nodes.find(x => x.name == "DeveloperExperimentStore").actionHandler["OVERLAY_INITIALIZE"]();
[module.getCurrentUser, module.getNonImpersonatedCurrentUser] = original;
  1. Head over to the "Experiments" tab and search for the "Desktop Visual Refresh" (2024-05_desktop_visual_refresh) experiment, and set your bucket override to "Treatment 1: Refresh Enabled".
  2. Go to the Appearance and select your desired theme!

Script to enable the themes directly

Note

Discord might patch this Script at anytime. If this script doesn't work please try one of the other methods.

Note

Refreshing or restarting your client removes the theme you selected, if you want to keep it forever use this medhod instead.

How to use this script: 1.Open DevTools by pressing
CTRL+SHIFT+I (Windows)
CMD+OPTION+I (MacOS) 2. Go to the Console tab. 3. Paste one of the following code and hit enter:

Darker Theme
(() => {
    const a = (a = "theme-darker") => (b => b.contains(a) || b.add(a))(document.body.classList);
    a(), new MutationObserver(() => a()).observe(document.body, {
        attributes: true,
        attributeFilter: ["class"]
    })
})();
Midnight Theme
(() => {
    const a = (a = "theme-midnight") => (b => b.contains(a) || b.add(a))(document.body.classList);
    a(), new MutationObserver(() => a()).observe(document.body, {
        attributes: true,
        attributeFilter: ["class"]
    })
})();

Credits to @schlizzawg on twitter for the original code!

FAQ

Q: CTRL+SHIFT+I / CMD+OPTION+I doesn't work

A: Use the PTB Client or Canary Client (links below) or use this to enable DevTools on Windows Stable Client.

On MacOS, open Finder and press SHIFT+CMD+G or click on "Go" in the menubar and select "Go to Folder" in the menu. In the search bar paste ~/Library/Application Support/discord/settings.json Open settings.json and turn DevTools on using by setting "DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING": true

You can still open DevTool on the stable Web Client

Windows
Canary
PTB
MacOS
Canary
PTB
Web
Canary
PTB

Q: Can I use QuickCSS?

A: Yes, but it's pretty complicated. Copy and paste the contents of the .theme-darker class and rename it to .theme-dark in a QuickCSS (I'm not gonna explain how, you can ask other people in this gist if anyone even sees this gist)

There are probably more methods such as editing the theme-dark class in the body tag of the app to theme-darker or theme-midnight but Discord forces you to switch back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment