Translucence
A translucent/frosted glass Discord theme
470
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name Translucence3
* @version 2.0.04
* @description A translucent/frosted glass Discord theme5
* @author CapnKitten6
*7
* @website http://github.com/CapnKitten8
* @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Translucence/css/source.css9
* @donate https://paypal.me/capnkitten10
* @invite jzJkA6Z11
*/12
13
@import url(https://capnkitten.github.io/BetterDiscord/Themes/Translucence/css/source.css);14
15
:root {16
/* APP ELEMENTS */17
--app-bg: url(https://i.ibb.co/WNrbr1Yz/Alpine-Amnesia.png);18
--app-blur: 6px;19
--app-margin: 24px;20
--app-radius: 8px;21
22
/* ACCENT HSL AND TEXT COLOR SETTINGS */23
--accent-hue: 260;24
--accent-saturation: 83%;25
--accent-lightness: 72%;26
--accent-opacity: 0.8;27
--accent-text-color: hsl(0,0%,0%);28
29
/* SIDEBARS AND CHAT AREA COLOR SETTINGS */30
--sidebar-color: hsl(0,0%,0%,0.34);31
--main-content-color: hsl(0,0%,0%,0.27);32
33
/* MESSAGE SETTINGS */34
--message-color: hsl(0,0%,0%,0.19);35
--message-color-hover: hsl(0,0%,0%,0.28);36
--message-radius: 18px;37
--message-padding-top: 8px;38
--message-padding-side: 8px;39
40
/* REPLY HSL COLOR SETTINGS */41
--reply-hue: 328;42
--reply-saturation: 79%;43
--reply-lightness: 64%;44
--reply-opacity: 1;45
46
/* TEXTAREA SETTINGS */47
--textarea-color: 255,255,255;48
--textarea-alpha: 0.125;49
--textarea-alpha-focus: 0.165;50
--textarea-text-color: hsl(0,0%,100%);51
--textarea-radius: 28px;52
53
/* CARD SETTINGS */54
--card-color: hsl(0,0%,100%,0.14);55
--card-color-hover: hsl(0,0%,100%,0.18);56
--card-color-select: hsl(0,0%,100%,0.21);57
--card-radius: 18px;58
59
/* BUTTON SETTINGS */60
--button-height: 32px;61
--button-padding: 16px;62
--button-action-color: hsl(0,0%,0%);63
--button-radius: 16px;64
65
/* POPOUT SETTINGS */66
--popout-color: hsl(0,0%,0%,0.46);67
--popout-blur: 6px;68
--popout-radius: 18px;69
--popout-shadow: 0 20px 40px hsl(0,0%,0%,0.44);70
--popout-shadow-border: 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); /* Set this variable to none to remove the popout liquid glass border */71
72
/* LIQUID GLASS SETTINGS */73
--light-angle: 40deg;74
75
/* Remove the opening and closing comment brackets to remove the liquid glass shadow */76
/*--liquid-glass-shadow: none;*/77
}78
79
@supports (color: color-mix(in lch, red, blue)) {80
.theme-dark {81
/* TEXT COLOR SETTINGS */82
--text-primary: hsl(0,0%,100%);83
--text-secondary: hsl(0,0%,77%);84
--text-default: hsl(0,0%,86%);85
--text-muted: hsl(0,0%,72%);86
--channels-default: hsl(0,0%,73%);87
--channel-icon: hsl(0,0%,73%);88
--text-strong: hsl(0,0%,100%);89
90
/* ICON COLOR SETTINGS */91
--icon-primary: hsl(0,0%,96%);92
--icon-secondary: hsl(0,0%,84%);93
--icon-tertiary: hsl(0,0%,71%);94
95
/* INTERACTIVE COLOR SETTINGS */96
--interactive-normal: hsl(0,0%,79%);97
--interactive-hover: hsl(0,0%,91%);98
--interactive-active: hsl(0,0%,100%);99
--interactive-muted: hsl(0,0%,43%);100
101
/* BACKGROUND MODIFIER SETTINGS */102
--background-modifier-hover: hsl(0,0%,100%,0.075);103
--background-modifier-active: hsl(0,0%,100%,0.1);104
--background-modifier-selected: hsl(0,0%,100%,0.125);105
--background-modifier-accent: hsl(0,0%,100%,0.175);106
--background-primary: transparent;107
108
/* ACCENT COLORED TEXT AND LINK SETTINGS */109
--text-brand: hsl(var(--accent-hsl));110
--text-link: hsl(var(--accent-hsl));111
}112
}113