Discord Theme that mimics Windows 11's Mica + Fluent-ish(??), sloppily thrown together.

  • By maz
  • Last update: Dec 23, 2022
  • Comments: 3

discord-mica

Discord Theme that mimics Windows 11's Mica + Fluent-ish(??), sloppily thrown together, but pretty much functional.

Four different styles

Slate - A Complete Grey/Black color sceme with normal Branding Colors
Warm - A Red/Orange/Purple Gradient with a Pinkish Accent
Cold - A less Green-ish Blue theme with a Blue Accent
Yard - A Green Gradient with Green Accent

How to Install


- Install BetterDiscord at https://betterdiscord.app/
- Go to Settings, and locate "Themes" tab
- Open Theme Folder
- Extract Themes of choice into Theme Folder
- Enable Theme(s)

Make Your Own

If you'd like to make your own theme, simply follow this.

You should have an Image Editing tool that can:

  • Blur
  • Generate Noise
  • Control Brightness/Contrast

I will be using Paint.NET.

You should also have the MicaCustom theme downloaded through the pack!


  • First, Open your Wallpaper of choice,
    and Gaussian Blur until it resembles a gradient color.
    Touch up the brightness so that nothing is TOO black, and more of a dark gray tone.

Save this as "primary".

  • Next, Blur your "primary" image even further,
    and adjust the bright/contrast so that it's JUST slightly brighter.
    Generate a low-intensity noise (no color!) that's noticeable but not too strong.

When you have it how you think looks nice,
Save this as "secondary".

  • Now, adjust your bright/contrast,
    so that your "secondary" image is only slightly, but noticably darker, than your "primary" image. Don't overdo it!
    If the noise is less noticeable because of this, generate a low-intensity noise.

Save this as "tertiary".


You should now have three different images:
"primary", "secondary", and "tertiary".
Secondary should be the brightest, while Tertiary should be the darkest.

Upload these three images to https://imgur.com/ (or something similar, but imgur works best),
and collect direct image links to each background. (each link should end in a file extension, such as ".png").

Open the MicaCustom.theme.css file you have earlier.

All you should need to do now is replace each link to its corresponding variable!
("--background-primary" gets the imgur link corresponding to "primary.png", etc.)

Save, Import, and Install! That should be it!

Github

https://github.com/mazOnGitHub/discord-mica

Comments(3)

  • 1

    [Request] Tutorial to make custom mica backgrounds?

    I love this theme but none of the mica backgrounds quite match my wallpaper so I'd like to make my own. Could there be a tutorial on how to make our own backgrounds for the theme?

  • 2

    Theme won't import

    Every time I import any theme from the folder (custom ones included) I get the following error:

    Could not be compiled. See console for details.
        at Object.loadAddon (<anonymous>:4:268126)
        at Object.loadAddon (<anonymous>:4:310889)
        at FSWatcher.<anonymous> (<anonymous>:4:266254)
    
  • 3

    I took some time to improve on certain areas...

    With these changes I was able to:

    • change chat bar to better represent that of real Win11 UI
    • added subtle animations to certain hovers to imitate the hover animations in Win11
    • fixed a rough animation
    • added Mica layering to areas that were missing it due to Discord messy coding

    Issues:

    • when launching, the background disappears for a slight second for reason unknown