saltssaumure/synthesis-discord-theme

A vibrant neon synthwave Discord theme.

Synthesis Discord Theme

A vibrant neon synthwave Discord theme.

Without background	With background

Installation

BetterDiscord

Click to expand

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

Replugged

Click to expand

Automatic

1. Click to install:
   • Replugged store

Manual

1. Download net.saltssaumure.Synthesis.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.

Vencord

Click to expand

Local

1. Download Synthesis.theme.css:
   • BetterDiscord store
   • 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://saltssaumure.github.io/synthesis-discord-theme/Synthesis.theme.css

Customisation

Variable name	Description	Valid values	Default value
--synth-background-image	Background image	Image link encased in url() or none. Suggested images.	url(https://saltssaumure.github.io/synthesis-discord-theme/backgrounds/default.avif)
--synth-backdrop-opacity	Backdrop opacity	A number 0-1.	0.3
--synth-overlay-color	Overlay tint colour	Space-separated RGB value.	255 165 0
--synth-crt-light, --synth-crt-dark	CRT scanline colour	Space-separated RGB value.	255 255 255, 0 0 0
--synth-crt-flicker	⚠ CRT flicker effect	flicker (on) or none (off)	none
--synth-color-background	Background colour	Space-separated RGB value.	20 6 36
--synth-color-foreground	Foreground colour	Space-separated RGB value.	255 165 0
--synth-color-shadow	Shadow colour	Space-separated RGB value.	0 0 128
--synth-color-button	Button colour	Space-separated RGB value.	84 63 251
--synth-color-pop	Highlight colour	Space-separated RGB value.	206 63 251
--synth-color-blurple	Discord colour	Space-separated RGB value.	88 101 242
--synth-color-text	Text colour	Space-separated RGB value.	255 255 255
--synth-color-red	DND colour	Space-separated RGB value.	243 67 131
--synth-color-yellow	Idle colour	Space-separated RGB value.	255 165 0
--synth-color-green	Online colour	Space-separated RGB value.	52 172 140
--synth-color-twitch	Streaming colour	Space-separated RGB value.	89 54 149

⚠ This is a fast flickering effect and may not be suitable for those with photosensitive epilepsy.

BetterDiscord

Click to expand

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

Replugged

Click to expand

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

Vencord

Click to expand

Local

2. Open Themes Folder in Settings > Vencord > Themes > Local Themes
3. Open Synthesis.theme.css with your favourite text editor.
4. 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-36 of Synthesis.theme.css.
3. Edit the variable values.

License

Copyright (c) 2022-2024 Saltssaumure

This theme is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This theme is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

Credits

Themes

• RadialStatus by DiscordStyles (Gibbu) - MIT license

Fonts

• Inter by Rasmus Andersson - OFL-1.1
• Fira Code by Nikita Prokopov - OFL-1.1

Questions or suggestions?

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

synthesis-discord-theme's Issues

Status box not appearing

From #theme-support:

On synthesis when i try to change my status (online/away) the box doesn't pop up is there a fix for this?

Enabling display servers as channel

Plugin: https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/DisplayServersAsChannels
I got bug when enabling this channel and full screen in voice chat

Server/channel list frame not hidden when in fullscreen mode

Whenever I go into fullscreen (Voice chat or screen share) this layout doesn't hide. I'm using the desktop Discord client with Vencord

Text not readable unless Nitro profile is dark

If the Discord profile is set to a dark profile theme manually or through the "sync to theme" setting set to true, then the text is readable, but if the setting is turned off (for whatever reason), text becomes unreadable.

With theme, light profile theme:

Without theme, light profile theme:

With theme, profile synced to dark mode:

If at all possible, maybe some form of check to see if the background passes a certain brightness threshold to swap text over to black would fix this?

Image not downloading to betterdiscord themes folder

When i click download image usign better discord store it sends the download strait to my downlaod folder and not my themes folder

Put photosensitivity warning before install instructions

Hi as someone who is photosensitive I appreciate the warning about the flickering effect, but the fact that it's below the customization options meant in my case it came too late. Fortunately, since my photosensitivity does not come from epilepsy, I will be fine (with a minor headache that will pass soon), but it would be quite helpful, especially to those with epilepsy for whom it can be quite dangerous, to make the warning visible in the readme prior to the install instructions, as many times people won't read to the end before installing something.

Discord broke all your themes

Now they all look like this
https://i.gyazo.com/8df0e3ad73b11eeda6e6e8daf1dc904e.png

Misaligned unread indicator on channels/threads

See title. Unread indicator is for the #posting channel, but appears a bit below it, nearly aligned with the channel below it. Especially janky on threads at the bottom of the channel's... threads. yeah.

Main part of theme broke

oof ouch owie my eyes.

'What's New' screen improperly cropped

See title.
As much as I don't actually care all that much for what Discord yeets out, I don't think it being nigh-unreadable is intentional.

Black squares cover chat when editing a message

this only happens when using the theme i checked

Channel Border Not Wide Enough

The border for the channels in a server cuts through that part of the window.