Glass.theme.css (5379B)
1 /** 2 * @name Glass 3 * @author ganten7 4 * @version 1.0.0 5 * @description Default Discord, made transparent — macOS frosted glass via Vesktop's 6 * vibrancy. Opacity only; no recoloring. Tune with one number. 7 * @source https://github.com/ganten7/vesktop-glass 8 * 9 * REQUIRES (Vesktop can't set these from a theme): 10 * Settings → Transparent Window = ON 11 * Settings → macOS Vibrancy Style = under-window 12 * …then fully quit & reopen Vesktop. 13 */ 14 15 :root { 16 /* ── THE KNOBS ───────────────────────────────────────────────────────────── 17 * Edit these two numbers, save, done. 18 * --glass surfaces. 0 = fully see-through, 1 = solid (normal Discord). 19 * --glass-menus menus / popouts / modals. Keep high so they stay readable. 20 * ────────────────────────────────────────────────────────────────────────── */ 21 --glass: 0.55; 22 --glass-menus: 0.90; 23 } 24 25 /* Apply the opacity to Discord's surfaces, keeping its default dark tones. 26 * Targets the 2025 "visual refresh" tokens AND the legacy ones, with !important 27 * so they win regardless of which token a given build paints with. */ 28 :root, 29 .theme-dark, 30 .theme-midnight, 31 .visual-refresh, 32 .visual-refresh.theme-dark, 33 .visual-refresh.theme-midnight { 34 35 /* visual-refresh base surfaces (rail → chat → elevated), Discord's own dark ramp */ 36 --background-base-lowest: rgba(18, 19, 22, var(--glass)) !important; 37 --background-base-lower: rgba(24, 25, 28, var(--glass)) !important; 38 --background-base-low: rgba(30, 31, 34, var(--glass)) !important; 39 --background-base-high: rgba(43, 45, 49, var(--glass)) !important; 40 --background-base-higher: rgba(49, 51, 56, var(--glass)) !important; 41 --background-base-highest: rgba(56, 58, 64, var(--glass)) !important; 42 43 --bg-overlay-app-frame: transparent !important; /* frame → pure vibrancy */ 44 --bg-overlay-chat: rgba(30, 31, 34, var(--glass)) !important; 45 --bg-overlay-1: rgba(43, 45, 49, var(--glass-menus)) !important; 46 --bg-overlay-2: rgba(37, 39, 43, var(--glass-menus)) !important; 47 --bg-overlay-3: rgba(30, 31, 34, var(--glass-menus)) !important; 48 --bg-overlay-floating: rgba(43, 45, 49, var(--glass-menus)) !important; 49 --bg-surface-overlay: rgba(43, 45, 49, var(--glass-menus)) !important; 50 --bg-surface-raised: rgba(43, 45, 49, var(--glass)) !important; 51 --bg-surface-high: rgba(43, 45, 49, var(--glass-menus)) !important; 52 --bg-surface-highest: rgba(49, 51, 56, var(--glass-menus)) !important; 53 54 /* legacy surfaces (older views / popouts) */ 55 --background-primary: rgba(30, 31, 34, var(--glass)) !important; 56 --background-secondary: rgba(24, 25, 28, var(--glass)) !important; 57 --background-secondary-alt: rgba(24, 25, 28, var(--glass)) !important; 58 --background-tertiary: rgba(18, 19, 22, var(--glass)) !important; 59 --background-floating: rgba(43, 45, 49, var(--glass-menus)) !important; 60 --modal-background: rgba(43, 45, 49, var(--glass-menus)) !important; 61 --modal-footer-background: rgba(37, 39, 43, var(--glass-menus)) !important; 62 --channeltextarea-background: rgba(43, 45, 49, var(--glass)) !important; 63 64 /* If you've set a custom Discord background, it paints an OPAQUE gradient image 65 * over these surfaces — flatten it to the same tint so transparency still shows. */ 66 --background-gradient-app-frame: linear-gradient(rgba(18,19,22,var(--glass)), rgba(18,19,22,var(--glass))) !important; 67 --background-gradient-lowest: linear-gradient(rgba(18,19,22,var(--glass)), rgba(18,19,22,var(--glass))) !important; 68 --background-gradient-lower: linear-gradient(rgba(24,25,28,var(--glass)), rgba(24,25,28,var(--glass))) !important; 69 --background-gradient-low: linear-gradient(rgba(30,31,34,var(--glass)), rgba(30,31,34,var(--glass))) !important; 70 --background-gradient-chat: linear-gradient(rgba(30,31,34,var(--glass)), rgba(30,31,34,var(--glass))) !important; 71 --background-gradient-high: linear-gradient(rgba(43,45,49,var(--glass)), rgba(43,45,49,var(--glass))) !important; 72 --background-gradient-higher: linear-gradient(rgba(49,51,56,var(--glass)), rgba(49,51,56,var(--glass))) !important; 73 --background-gradient-highest: linear-gradient(rgba(56,58,64,var(--glass)), rgba(56,58,64,var(--glass))) !important; 74 --chat-background: rgba(30, 31, 34, var(--glass)) !important; 75 --app-frame-background: rgba(18, 19, 22, var(--glass)) !important; 76 } 77 78 /* Strip the opaque backing off the window frame so the macOS vibrancy shows through. */ 79 html, 80 body, 81 #app-mount, 82 [class*="appMount_"], 83 [class*="appAsideContainer_"], 84 [class*="base_"], 85 [class*="content_"] { 86 background-color: transparent !important; 87 background-image: none !important; 88 } 89 90 /* The user-settings page renders as a full-screen modal and otherwise inherits a 91 * near-transparent surface tier — keep modals readable (uses --glass-menus). */ 92 [class*="modal_"] { 93 background-color: rgba(30, 31, 34, var(--glass-menus)) !important; 94 }