Current version: v3.0.4 (24/01/2022)
(Previews are subject to be out of date)
** Indicates that it has two values for both the dark and light themes of Discord. Instead of using :root
, use .theme-dark
or .theme-light
.
--app-font
- The font used throughout the entire theme. The font must either be installed or imported. Default:"Google Sans"
--app-bg
- The background for the entire Discord app. Default:var(--main-alt)
--main-color
- The background color for main content areas like in the settings menu. Default:#16171a
-#e8eaeb
**--main-alt
- An alternative background color for main content areas. Default:#0f1012
-#ddd
**--server-color
- The background color for the servers list. Default:#232327
-#eee
**--status-picker-color
- The background color for the status area with the settings button. Default:#181a1d
-#dee0e0
**--sidebar-panel-color
- The background color for the sidebar panels in the channels list. Default:#111114
-#d4d6d6
**--chat-color
- The background color the main chat area. Default:#202225
-#fff
**--avatar-radius
- The border radius of avatars, servers, and change status buttons. Default:50%
--tooltip-color
- The background color for tooltips. Default:rgba(97,97,97,0.9)
--tooltip-text-color
- The text color for tooltips. Default:#ddd
--tooltip-shadow
- The box shadow for tooltips. Default:0px 5px 15px rgba(0,0,0,0.2)
--accent-hue
- The hue value for the accent color of the theme. Default:224
--accent-saturation
- The saturation percentage for the accent color of the theme. Default:71%
--accent-lightness
- The lightness percentage for the accent color of the theme. Default:61%
--accent-button-action
- The color used for the hover and active states for accent buttons. Default:#fff
--accent-text-color
- The text color for buttons and other various elements with the accent background color. Default:#fff
--message-color
- The background color for message bubbles. Default:#292d30
-#edeff0
**--message-color-hover
- The hover background color for message bubbles. Default:#303438
-#e1e2e3
**--message-color-alt
- An alternative background color for message bubbles in areas like pinned messages. Default:#1c1e21
-#e8e8e8
**--message-radius
- The border radius for the message bubbles. Default:19px
--message-padding-top
- The top and bottom padding of message bubbles. Default:8px
--message-padding-side
- The side padding of message bubbles. Default:12px
--media-radius
- The border radius for images, videos, and audio. Default:19px
--attachment-color
- The background color for all attachments. Default:rgb(0,0,0,0.325)
-rgba(0,0,0,0.1)
**--main-textarea-color
- The background color for the main chat text box. Default:#303338
-#fff
**--main-textarea-color-alt
- An alternative background color for the main chat text box. Default:#3b3f42
-#ccc
**--main-textarea-border
- The border color for the main chat text box. Default:#3e434a
-#dadce0
**--main-textarea-radius
- The border radius for the main chat text box. Default:24px
--typing-color
- The background color for the typing indicator. Default:rgba(32,34,37,0.9)
-rgba(255,255,255,0.8)
**
--popout-color
- The background color for popout menus and modals. Default:#2c2f33
-#fff
**--popout-color-alt
- An alternative background color for popout menus and modals. Default:#202225
-#e5e5e5
**--popout-header-border
- The border color for popout menu headers. Default:#444
-#aaa
**--separator-color
- The background color for the separator lines in various popout menus. Default:#444
-#ccc
**--popout-radius
- The border radius for popout menus. Default:5px
--popout-radius-big
- The bigger border radius for modals. Default:10px
--card-color
- The background color for cards. Default:transparent
-transparent
**--card-color-hover
- The background color for hovering over cards. Default:#292b2f
-#eee
**--card-color-alt
- An background color for cards. Default:#2a2c30
-transparent
**--card-color-alt-hover
- An background color for hovering over cards. Default:#35383d
-#d4d4d4
**--card-header-text-color
- The text color for card headers. Default:#dcddde
-#333
**--card-radius
- The border radius for cards. Default:5px
--card-radius-big
- The bigger border radius for cards. Default:10px
--button-radius
- The border radius for buttons. Default:5px
--button-link-color
- The background color for transparent buttons. Default:255,255,255
-0,0,0
**--button-link-text-color
- The text color for transparent buttons. Default:#fff
-#333
**
--slider-color
- The background color for sliders. Default:#4f545c
-#999
**--switch-knob-color
- The background color for the knob on switches. Default:#777
-#fff
**--switch-slider-color
- The background color for the background slider on switches. Default:rgba(65,65,65,0.65)
-rgba(0,0,0,0.2)
**
--input-color
- The background color for text fields that don't have the animated border. Default:rgba(255,255,255,0.075)
-#d2d4d4
**--input-border-color
- The border color for text fields. Default:#444
-#aaa
**
--md-ripple-color
- The color of the ripple effect. Default:255,255,255
-0,0,0
**--emoji-category-header
- The background color for the headers in the emoji panel. Default:rgba(44,47,51,0.95)
-rgba(255,255,255,0.9)
**--scrollbar-color
- The background color for scrollbars. Default:255,255,255
-0,0,0
**
** Indicates that it has two values for both the dark and light themes of Discord. Instead of using :root
, use .theme-dark
or .theme-light
.
- Font changed to Google Sans
- Delete message modal updated