SystemColor Discord Theme

Recolours Discord based on your system colour.

Dark mode	Light mode

Installation

Vencord (recommended)

Local

1. Download SystemColor.theme.css:
   • GitHub
2. Place the file in the themes folder:
   • Settings > Vencord > Themes > Local Themes > Open Themes Folder
3. Click Load missing Themes and toggle on the theme card.

Online

1. Paste the link in Settings > Vencord > Themes > Online Themes:
   • https://minidiscordthemes.github.io/SystemColor/SystemColor.theme.css

BetterDiscord

BetterDiscord does not currently detect your system color, however this theme can still be used and customised with a manually set color.

1. Download SystemColor.theme.css:
   • GitHub
2. Place the file in the themes folder:
   • Settings > BetterDiscord > Themes > Open Themes Folder
3. Toggle on the theme card.

Replugged

BetterDiscord does not currently detect your system color, however this theme can still be used and customised with a manually set color.

Automatic

1. Click to install:
   • Replugged store

Manual

1. Download net.saltssaumure.SystemColor.asar:
   • GitHub
2. Place the file in the themes folder:
   • Settings > Replugged > Themes > Open Themes Folder
3. Click Load Missing Themes and toggle on the theme card.

Customisation

Customised screenshot snippet

.theme-dark {
    --systemcolor-base: #f4f0f8a8;
    --systemcolor-bg-image: url(https://discord.com/assets/68691bc51a5e2da8e8cf.svg);
}

Variable name	Description	Valid values	Default value (Vencord)	Default value (Other)
--systemcolor-base	Base colour	Any colour.	var(--os-accent-color)	cyan
--systemcolor-bg-image	Background image	Any image or none.	linear-gradient(...)	linear-gradient(...)
--systemcolor-bg-blur	Background blur	Any length.	0px	0px

Vencord

Local

1. Open Themes Folder in Settings > Vencord > Themes > Local Themes
2. Open SystemColor.theme.css with your favourite text editor.
3. Edit the variable values and save.

Online

1. Enable Custom CSS in Settings > Vencord > Vencord and click Open QuickCSS File.
2. Copy and paste lines 15-27 of SystemColor.theme.css.
3. Edit the variable values.

BetterDiscord

1. Open Settings > BetterDiscord > Themes.
2. Click the pencil icon on this theme.
3. Edit the variable values and save changes.

Replugged

1. Enable Automatically Apply Quick CSS in Settings > Replugged > General.
2. Open Settings > Replugged > Quick CSS.
3. Copy and paste lines 15-27 of SystemColor.theme.css.
4. Edit the variable values and save.

License

MIT License

• TL;DR;NAL: Do whatever you want with this theme, just include the original license.

Questions or suggestions?

• Post an issue on GitHub.
• Post in #theme-support on my support server.