BetterDiscord

Translucence Theme -

Current version: v2.0.0 (07/06/2026)

Vencord link

https://capnkitten.github.io/BetterDiscord/Themes/Translucence/css/source.css

--app-bg - The background image for the entire Discord app. Default: url("https://i.ibb.co/WNrbr1Yz/Alpine-Amnesia.png")
--app-blur - The strength of the blur for every element that has one. Default: 6px
--app-margin - The margin surrounding the content area. Default: 24px
--app-radius - The border radius of the app and every element that has a border radius. Default: 18px
--sidebar-color - The background color of the sidebars. Default: hsl(0,0%,0%, 0.34)
--main-content-color - The background color of the main content areas. Default: hsl(0,0%,0%, 0.27)

--accent-hue - The hue value for the accent color of the theme. Default: 260
--accent-saturation - The saturation value for the accent color of the theme. Default: 83%
--accent-lightness - The lightness value for the accent color of the theme. Default: 72%
--accent-opacity - The opacity of everything, excluding text, that uses the accent color. Default: 0.8
--accent-text-color - The text color for buttons and other various elements with the accent background color. Default: hsl(0,0%,0%)

--message-color - The background color for messages. Default: hsl(0,0%,0%,0.19)
--message-color-hover - The background color for hovering over messages. Default: hsl(0,0%,0%,0.28)
--message-radius - The border radius for messages. Default: 18px
--message-padding-top - The top and bottom padding for messages. Default: 8px
--message-padding-side - The left and right padding for messages. Default: 8px
--mention-hue - The hue value for the message mention color. Default: 260
--mention-saturation - The saturation value for the message mention color. Default: 83%
--mention-lightness - The lightness value for the message mention color. Default: 72%
--mention-opacity - The opacity of the message mention color. Default: 1
--reply-hue - The hue value for the reply message color. Default: 328
--reply-saturation - The saturation value for the reply message color. Default: 79%
--reply-lightness - The lightness value for the reply message color. Default: 64%
--reply-opacity - The opacity of the reply message color. Default: 1

--textarea-color - The background color for any textareas and inputs. Default: 0,0,0
--textarea-alpha - The opacity for any textareas and inputs. Default: 0.15
--textarea-text-color - The text color for textareas and inputs. Default: #fff
--textarea-radius - The border radius for textareas (not inputs). Default: 22px
--input-height - The height for inputs. Default: 36px
--input-radius - The border radius for inputs (not textareas). Default: 18px

--card-color - The background color for cards. Default: hsl(0,0%,100%,0.14)
--card-color-hover - The background color for hovering over cards (if there is a hover animation). Default: hsl(0,0%,100%,0.18)
--card-color-select - The background color for selected/active cards. Default: hsl(0,0%,100%,0.21)
--card-radius - The border radius for cards. Default: 18px

--button-height - The height for buttons. Default: 32px
--button-padding - The padding for buttons. Default: 0 16px
--button-color - The background color for most buttons. Default: #d73d3d
--button-action-color - The background color for hovering and clicking on buttons (has a lowered opacity). Default: #000
--button-text-color - The text color for any buttons that use --button-color. Default: #000
--button-radius - The border radius for buttons. Default: 8px

--popout-color - The background color for modals/popouts. Default: hsl(0,0%,0%,0.46)
--popout-blur - The blur strength for modals/popouts. Default: 6px
--popout-header-shadow- The shadow for headers in modals/popouts. Default: 0px 3px 9px 0px hsl(0,0%,0%,0.25)
--popout-radius - The border radius for modals/popouts. Default: 18px
--popout-shadow - The shadow for modals/popouts. Default: 0 20px 40px hsl(0,0%,0%,0.44)
--popout-shadow-border The border for modals/popouts. Default: inset 0 1px 1px hsl(0,100%,100%,0.35), inset 0 -1px 2px hsl(0,0%,0%,0.25), inset 0 0 0 1px hsl(0,100%,100%,0.04)

--light-angle - The angle of which the liquid glass effect is applied. Default: 40deg