Liquid-glass Discord theme for Vencord, Equicord, Vesktop, and BetterDiscord.
Deep void, accent chrome, and a full restyle of the
Vencord AI plugin.
Screenshots · Install · Quick start · Wallpapers · Colors · Icons · Settings · Troubleshooting
- Dark liquid-glass surfaces on Discord Dark / Darker / Midnight
- Settings live in one file:
Futuristic.theme.css - Five space wallpapers in
assets/ - Optional Phosphor duotone icon pack in
assets/icons/ - Restyle of the AI plugin windows (
vc-grokai-*) - Live blur off by default so chat stays smooth
The theme file is knobs only (colors, wallpaper, fonts, icons). Glass, motion, and AI chrome load from engine/.
Enable only this theme. Another full theme on top will clash.
Default
Wallpaper
AI plugin
AI conversation
Put Futuristic.theme.css in the themes folder. Do not copy the whole repo unless you want it.
| Client | Folder |
|---|---|
| Vencord (Windows) | %appdata%\Vencord\themes |
| Equicord (Windows) | %appdata%\Equicord\themes |
| Vesktop (Windows) | %appdata%\vesktop\themes |
| Vencord / Equicord (macOS) | ~/Library/Application Support/Vencord/themes |
| Vesktop (macOS) | ~/Library/Application Support/vesktop/themes |
| BetterDiscord (Windows) | %appdata%\BetterDiscord\themes |
| BetterDiscord (macOS) | ~/Library/Application Support/BetterDiscord/themes |
Discord → Settings → Themes → Local Themes → enable Futuristic.
Turn off every other full theme.
Save the file, then disable and enable the theme (or restart the client). CSS @import is cached; a toggle is enough most of the time.
@import url("https://github.com/TheRealMagyar/Futuristic/raw/main/Futuristic.theme.css");The first load needs internet. Engine CSS comes from this GitHub repo. Wallpaper and icon url()s go through jsDelivr because Discord blocks raw.githubusercontent.com inside CSS url(). The files are still the ones in this repository.
Open Futuristic.theme.css and uncomment at most one block in each section:
- Colors — Cyan / Emerald / Rose / Amber / Pure black
- Wallpapers — Void / Nebula / Ice / Orbit / Aurora
- Icons — the Phosphor pack (optional; default is Discord’s own marks)
Example: Nebula wallpaper + default violet accent.
:root {
--background-image: url("https://cdn.jsdelivr.net/gh/TheRealMagyar/Futuristic@main/assets/nebula.jpg");
--background-shading-percent: 40%;
}Leave extra CSS at the bottom of the file if you want local overrides.
Default is an accent-tinted void gradient (no photo fetch).
Uncomment one wallpaper block at the bottom of Futuristic.theme.css.
Void · Nebula
Ice · Orbit · Aurora
| Name | File | Look | Suggested shading |
|---|---|---|---|
| Void | assets/futuristic-void.jpg |
Abstract purple bokeh | 40% |
| Nebula | assets/nebula.jpg |
Violet dust, dark center | 40% |
| Ice | assets/ice.jpg |
Cyan / teal nebula | 42% |
| Orbit | assets/orbit.jpg |
Ringed planet and moon | 38% |
| Aurora | assets/aurora.jpg |
Glass shards and ribbons | 40% |
Your own photo (HTTPS only):
--background-image: url("https://example.com/your-image.jpg");
--background-shading-percent: 40%;--background-shading-percent (default 64%): lower shows more of the photo. Wallpaper blocks already drop this to about 40%.
If the photo is missing, you will only see the dark void fill. Toggle the theme once after a new push — jsDelivr can lag a minute or two on brand-new files.
Uncomment one accent block, or edit --main-color and --hover-color in :root.
| Variant | Accent | Hover |
|---|---|---|
| Violet (default) | #7c5cff |
#9b82ff |
| Cyan | #22d3ee |
#67e8f9 |
| Emerald | #34d399 |
#6ee7b7 |
| Rose | #fb7185 |
#fda4af |
| Amber | #f59e0b |
#fbbf24 |
| Pure black | #e5e7eb |
#ffffff |
Status colors live in the same :root: --online-color, --idle-color, --dnd-color, --streaming-color, --offline-color.
Use Discord Dark, Darker, or Midnight. Light is supported but not the intended look.
Discord’s icons stay on until you uncomment the Icons block. Nothing is fetched until then.
The pack is Phosphor duotone (MIT), white on transparent so it masks to the current UI color. The Vencord AI plugin mark is not replaced.
| File | Replaces |
|---|---|
home.svg |
Direct Messages / home |
discover.svg |
Discover |
add.svg |
Add a server |
settings.svg |
User / server / channel settings |
inbox.svg |
Inbox |
help.svg |
Help |
nitro.svg |
Nitro |
shop.svg |
Shop |
gift.svg |
Gift |
emoji.svg |
Emoji picker |
gif.svg |
GIF picker |
sticker.svg |
Sticker picker |
search.svg |
Search |
pins.svg |
Pinned messages |
threads.svg |
Threads |
members.svg |
Member list |
call.svg |
Voice call |
video.svg |
Video call |
mute.svg |
Mute mic |
deaf.svg |
Deafen |
send.svg |
Send message |
notifications.svg |
Notification settings / mute channel |
notifications-off.svg |
Unmute channel |
attach.svg |
Upload / attach file |
apps.svg |
Apps launcher |
disconnect.svg |
Leave voice |
screenshare.svg |
Share screen |
soundboard.svg |
Soundboard |
activity.svg |
Activities |
invite.svg |
Invite people / add friend |
events.svg |
Events |
reply.svg |
Reply |
forward.svg |
Forward |
more.svg |
More / overflow |
edit.svg |
Edit |
bookmark.svg |
Bookmark / save |
friends.svg |
Friends / new group DM |
download.svg |
Download apps |
mention.svg |
Mention |
copy.svg |
Copy text / message |
delete.svg |
Delete |
create.svg |
Create channel / category |
info.svg |
Channel info |
link.svg |
Copy link |
boost.svg |
Server boost |
react.svg |
Add reaction |
One icon only (example: home):
:root {
--home-native: none;
--home-icon: url("https://cdn.jsdelivr.net/gh/TheRealMagyar/Futuristic@main/assets/icons/home.svg");
}Do not set --icon-native: none unless you enable the full pack. That flag hides native paths on every swapped control.
Everything a user is meant to change is in Futuristic.theme.css.
| Token | Default | What it does |
|---|---|---|
--main-color / --hover-color |
#7c5cff / #9b82ff |
Accent |
--success-color / --danger-color |
#3ecf8e / #ff5c7a |
Positive / danger |
--background-image |
Void gradient | Gradient or url(...) |
--background-shading-percent |
64% |
How much glass sits on the wallpaper |
--background-position / --background-size |
center / cover |
Photo layout |
--background-attachment |
scroll |
Keep scroll — fixed repaints the window |
--background-filter |
none |
Extra saturate/brightness (costs FPS) |
--user-popout-filter / --user-modal-filter |
none |
Profile frost |
--home-icon |
none |
Custom DMs mark |
--main-font / --code-font |
gg sans / JetBrains Mono | Must be installed, except Orbitron |
--futuristic-overlay-filter |
none |
Menu frost |
Engine internals (engine/futuristic.css) hold glass tokens, Discord token overrides, AI chrome, and motion. You do not need to edit those for normal use.
Keep another Discord theme and only restyle the AI windows: paste overrides/Futuristic-AI.override.css into Vencord → Settings → QuickCSS.
Live backdrop-filter is off on chat, menus, and profiles. The wallpaper paints on #app-mount (and Discord’s bg layer when it exists). No background-attachment: fixed and no photo filter in the stock wallpaper blocks.
To turn frost back on:
--futuristic-overlay-filter: blur(14px) saturate(1.18);
--user-popout-filter: blur(16px) saturate(1.2) brightness(0.82);
--user-modal-filter: blur(18px) saturate(1.15) brightness(0.8);If Discord still stutters, keep those at none and stay on the default gradient (no photo).
| Symptom | What to do |
|---|---|
| Wallpaper does not show | Uncomment one wallpaper block. Toggle the theme. Wait a minute if the file was just pushed (jsDelivr cache). Confirm the URL is cdn.jsdelivr.net/gh/TheRealMagyar/Futuristic@main/.... |
Wallpaper URL from raw.githubusercontent.com |
Discord’s CSS url() often blocks that host. Use the jsDelivr URL from the settings file. |
| Icons look like Discord’s | The pack is commented out on purpose. Uncomment the Icons block. |
| Icons vanished | You set --icon-native: none without loading the full pack. Remove that line or enable the whole Icons block. |
| Theme looks like ClearVision / another skin | Another full theme is still enabled. Disable it. |
| First load is unstyled | No internet — engine @imports fail. |
| Stutter on scroll | You still have background-attachment: fixed or a filter on the photo. Remove them. |
| Titlebar says Futuristic | Expected on Windows. macOS uses the native titlebar. |
Futuristic.theme.css settings you edit
engine/main.css ClearVision engine
engine/vencord.css Vencord / Equicord bits
engine/betterdiscord.css BetterDiscord bits
engine/futuristic.css Futuristic glass, AI, motion, icon hooks
assets/ wallpapers
assets/icons/ Phosphor duotone SVGs
assets/screenshots/ README shots (01-chat, 02-server, 03-ai)
overrides/ AI-only QuickCSS
MIT. See LICENSE.
Third-party bits are listed in NOTICE: ClearVision engine (Apache 2.0) and Phosphor Icons (MIT).