Themes

Variables in *[class*="theme"] can be moved into a respective *.theme- selector to have their setting applied per-theme and vice versa. All variables present under *[class*="theme"] are applied regardless of the current theme. Nitro themes aren't supported at the current moment.

Things to note:

• All background images must be in the format of url("link-to-image"). Ideally you should encode images in base64 to avoid unneeded reloading and network usage. A tool to do so can be found here. Choose CSS background image as the output and use the url(); portion.

• Blur will not render/appear unless you have a transparent color or a background image.

• Background images can be used at the same time as colors in this theme. If your color has alpha (transparency), or if you set a color and image at the same time it will tint the background image to that color (aka multiplying the values).

• Borders will not be visible if you don't have a color set. Borders can have transparency as well.

• If you would like a transparent color, I suggest using rgba(). The format is rgba(red,green,blue,alpha), where red, green and blue can be from 0-255 and alpha can be from 0-1 or a percentage. (alpha is how opaque the color should be)

• Setting border widths to 0 is the same as disabling them.

• Comment out variables in the theme.css file or use unset if you want to use the default value.

• To save time, you can reuse a value of a variable across the theme by using var(--variable-name).

• Gradients are valid values for background image variables (not colors). these can't be combined with a typical image unfortunately.

• For Main app transparency to be visible, Unity's main background (--unity-background-color) must be set to a color that isn't fully opaque, nor can you have a background image (at the moment).

• ex. --sidebar-border-color: var(--guilds-border-color);

• The current accent color can be reused as a single color. its variable is var(--brand-experiment)

"guilds" refers to the server list.
"sidebar" refers to the channel/chats list.
NEW IN v.1.0.0 | "base" is the container that groups the sidebar, panels and chat elements
"panels" refers to the area where your username and VC controls appear.
"chat" is either the chat area or whatever exists to the right of the sidebar.
"threads" refer to open forum posts and open threads.
NEW IN v.1.0.0 | "header" is for the area where tabs, tools and the channel description reside.

---

Unity

Colors

--unity-accent-hue
--unity-accent-saturation
--unity-accent-lightness

These three variables control the accent color of the theme. Convert your desired color to HSL and replace the respective values.

--unity-background-primary
--unity-background-primary-rgb
--unity-background-secondary
--unity-background-secondary-alt
--unity-background-secondary-rgb
--unity-background-tertiary
--unity-background-tertiary-rgb

These background colors override discord's stock ones. Ideally you should set these based on the theme unless you want both light and dark to have the same colors. Primary should be the darkest color, while secondary is brighter and tertiary is the brightest. Secondary-alt should be somewhere in between secondary and tertiary. RGB values should be in the format of r,g,b, meaning you shouldn't wrap your color in rgb(). The RGB version of colors are used across the theme when an alpha is needed. secondary-alt should have a brightness between secondary and tertiary.

General

--unity-background-image
--unity-background-color

Background for area behind the interface. This will only be visible if you're using --unity-opacity, transparent colors for elements or gaps.

--unity-background-floating

Background color for floating objects (menus, dropdowns, tooltips, popouts)

--unity-floating-blur-radius

How much to blur backgrounds of menus, dropdowns and other floating items.

--unity-opacity

How transparent the main UI should be. Note: this changes the opacity of all main elements, meaning this applies to text and not just backgrounds. Values should be a percentage or a value between 0 to 1.

--unity-border-radius

How much to round (most) ui elements. A few are currently set to be circular. (value should be in px)

--unity-custom-font

Custom font for the theme if you have the font installed or imported in CSS. Theme uses Samsung One by default.

Gaps

--unity-gaps

Toggle for gaps between UI elements (guilds, sidebar, panels, notices, chat). Set to 0 to disable, else set to 1 or greater to enable. All margin/inset variables (that aren't for settings modal) will do nothing while this is set to 0. Setting this to 0 will also disable all borders.

--unity-inset

Width of gaps between Chat/Sidebar/Guild List as well as the edges of the window.

Guild List

--guilds-margin-left

How far to push the guilds list from the left edge.

--guilds-top-bottom-inset

Set this if you want the guild list to have a margin on the top and bottom that's independent from --unity-inset. value in px preferred. While this is unset, the guild list will have the same top/bottom margin as --unity-inset. macOS users will have a specific margin at the top when unset to avoid having guild list content appearing below window buttons.

--guilds-border-width

Width of border for guild list (use a value in px).

--guilds-border-color

Color of border for guild list.

--guilds-background-color
--guilds-background-image

Backgrounds for area behind guild list.

--guilds-background-blur

How much to blur the background of the guild list (in px).

Sidebar

--sidebar-border-width

Width of border for sidebar (use a value in px).

--sidebar-border-color

Color of border for sidebar.

--sidebar-background-color
--sidebar-background-image

Backgrounds for area behind sidebar.

--sidebar-background-blur

How much to blur the background of the sidebar (in px).

Base

--base-border-width

Width of border for base group (use a value in px).

--base-border-color

Color of border for base group.

--base-background-color
--base-background-image

Backgrounds for area behind base group.

--base-background-blur

How much to blur the background of the base group (in px).

Panels

--panels-border-width

Width of border for panels (use a value in px).

--panels-border-color

Color of border for panels.

--panels-background-color
--panels-background-image

Backgrounds for area behind panels.

--panels-background-blur

How much to blur the background of panels (in px).

Chat

--chat-border-width

Width of border for chat (use a value in px).

--chat-border-color

Color of border for chat.

--chat-background-color
--chat-background-image

Backgrounds for area behind chat.

--chat-background-blur

How much to blur the background of chat (in px).

Threads

--threads-border-color

Color of border for threads.

--threads-border-width

Width of border for threads (use a value in px).

Headers

--header-background-color

Background color for area behind headers.

--header-background-blur

How much to blur the background of the header (in px).

Chat Bubbles

--unity-chat-bubble

Set to 1 to enable chat bubbles, set to 0 to disable.

--unity-chat-bubble-background-color
--unity-chat-bubble-border-color
--unity-chat-bubble-code-background-color

Self-explanatory. Code background is the background for codeblocks.

--unity-chat-bubble-max-width

Maximum width of a chat bubble (use a percentage to be relative to chat width)

--unity-chat-bubble-border-radius

How much to round chat bubbles (px or percentage).

--unity-chat-bubble-box-shadow-h-offset
--unity-chat-bubble-box-shadow-v-offset
--unity-chat-bubble-box-shadow-blur

--unity-chat-bubble-box-shadow-color-h
--unity-chat-bubble-box-shadow-color-s
--unity-chat-bubble-box-shadow-color-l
--unity-chat-bubble-box-shadow-color-a

Shadow adjustments for chat bubbles. Shadow color should ideally be set based on your theme.

Settings Modals

All options for settings including icons and the modal option has been removed in v1. Due to changes within Discord, settings icons have been broken and i have not yet fixed them. The modal option only worked properly up to a certain viewport with and better implementations exist.