├── README.md ├── themes ├── dusk.theme.css ├── mars.theme.css ├── sunset.theme.css ├── memory_lane.theme.css ├── crimson_moon.theme.css ├── cotton_candy.theme.css ├── citrus_sherbert.theme.css ├── midnight_blurple.theme.css ├── retro_raincloud.theme.css ├── hanami.theme.css ├── sunrise.theme.css ├── mint_apple.theme.css ├── desert_khaki.theme.css ├── under_the_sea.theme.css ├── lofi_vibes.theme.css ├── forest.theme.css └── chroma_glow.theme.css └── discord_premium_theme.theme.css /README.md: -------------------------------------------------------------------------------- 1 | # discord_premium_themes 2 | 3 | ## How to install 4 | 5 | 1. A CSS injector extension is required. BetterDiscord can also be used. 6 | 2. You must install the `discord_premium_theme.theme.css` file first. 7 | 3. Install the theme you want. -------------------------------------------------------------------------------- /themes/dusk.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Dusk 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-dusk-1: hsl(var(--bg-gradient-dusk-1-hsl)/1); 9 | --bg-gradient-dusk-1-hsl: 293 calc(var(--saturation-factor, 1)*13.5%) 36.3%; 10 | --bg-gradient-dusk-2: hsl(var(--bg-gradient-dusk-2-hsl)/1); 11 | --bg-gradient-dusk-2-hsl: 223 calc(var(--saturation-factor, 1)*41%) 69.4%; 12 | 13 | --custom-theme-background: linear-gradient(180deg, var(--bg-gradient-dusk-1) 12.84%, var(--bg-gradient-dusk-2) 85.99%); 14 | } -------------------------------------------------------------------------------- /themes/mars.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Mars 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-mars-1: hsl(var(--bg-gradient-mars-1-hsl)/1); 9 | --bg-gradient-mars-1-hsl: 15 calc(var(--saturation-factor, 1)*36.3%) 39.4%; 10 | --bg-gradient-mars-2: hsl(var(--bg-gradient-mars-2-hsl)/1); 11 | --bg-gradient-mars-2-hsl: 0 calc(var(--saturation-factor, 1)*36.2%) 41.2%; 12 | 13 | --custom-theme-background: linear-gradient(170.82deg, var(--bg-gradient-mars-1) 14.61%, var(--bg-gradient-mars-2) 74.62%); 14 | } -------------------------------------------------------------------------------- /themes/sunset.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Sunset 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-sunset-1: hsl(var(--bg-gradient-sunset-1-hsl)/1); 9 | --bg-gradient-sunset-1-hsl: 259 calc(var(--saturation-factor, 1)*55.6%) 35.3%; 10 | --bg-gradient-sunset-2: hsl(var(--bg-gradient-sunset-2-hsl)/1); 11 | --bg-gradient-sunset-2-hsl: 22 calc(var(--saturation-factor, 1)*66.7%) 57.6%; 12 | 13 | --custom-theme-background: linear-gradient(141.68deg, var(--bg-gradient-sunset-1) 27.57%, var(--bg-gradient-sunset-2) 71.25%); 14 | } -------------------------------------------------------------------------------- /themes/memory_lane.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Memory Lane 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-easter-egg-1: hsl(var(--bg-gradient-easter-egg-1-hsl)/1); 9 | --bg-gradient-easter-egg-1-hsl: 227 calc(var(--saturation-factor, 1)*58.4%) 65.1%; 10 | --bg-gradient-easter-egg-2: hsl(var(--bg-gradient-easter-egg-2-hsl)/1); 11 | --bg-gradient-easter-egg-2-hsl: 227 calc(var(--saturation-factor, 1)*31%) 44.3%; 12 | 13 | --custom-theme-background: linear-gradient(180deg, var(--bg-gradient-easter-egg-1) 4%, var(--bg-gradient-easter-egg-2) 96%); 14 | } -------------------------------------------------------------------------------- /themes/crimson_moon.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Crimson Moon 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-crimson-moon-1: hsl(var(--bg-gradient-crimson-moon-1-hsl)/1); 9 | --bg-gradient-crimson-moon-1-hsl: 0 calc(var(--saturation-factor, 1)*88.6%) 31%; 10 | --bg-gradient-crimson-moon-2: hsl(var(--bg-gradient-crimson-moon-2-hsl)/1); 11 | --bg-gradient-crimson-moon-2-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%; 12 | 13 | --custom-theme-background: linear-gradient(64.92deg, var(--bg-gradient-crimson-moon-1) 16.17%, var(--bg-gradient-crimson-moon-2) 72%); 14 | } -------------------------------------------------------------------------------- /themes/cotton_candy.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Cotton Candy 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-cotton-candy-1: hsl(var(--bg-gradient-cotton-candy-1-hsl)/1); 9 | --bg-gradient-cotton-candy-1-hsl: 349 calc(var(--saturation-factor, 1)*76.8%) 81.4%; 10 | --bg-gradient-cotton-candy-2: hsl(var(--bg-gradient-cotton-candy-2-hsl)/1); 11 | --bg-gradient-cotton-candy-2-hsl: 226 calc(var(--saturation-factor, 1)*92.6%) 84.1%; 12 | 13 | --custom-theme-background: linear-gradient(180.14deg, var(--bg-gradient-cotton-candy-1) 8.5%, var(--bg-gradient-cotton-candy-2) 94.28%); 14 | } -------------------------------------------------------------------------------- /themes/citrus_sherbert.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Citrus Sherbert 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-citrus-sherbert-1: hsl(var(--bg-gradient-citrus-sherbert-1-hsl)/1); 9 | --bg-gradient-citrus-sherbert-1-hsl: 40 calc(var(--saturation-factor, 1)*88.7%) 58.2%; 10 | --bg-gradient-citrus-sherbert-2: hsl(var(--bg-gradient-citrus-sherbert-2-hsl)/1); 11 | --bg-gradient-citrus-sherbert-2-hsl: 18 calc(var(--saturation-factor, 1)*81.5%) 63.9%; 12 | 13 | --custom-theme-background: linear-gradient(180deg, var(--bg-gradient-citrus-sherbert-1) 31.1%, var(--bg-gradient-citrus-sherbert-2) 67.09%); 14 | } -------------------------------------------------------------------------------- /themes/midnight_blurple.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Midnight Blurple 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-midnight-blurple-1: hsl(var(--bg-gradient-midnight-blurple-1-hsl)/1); 9 | --bg-gradient-midnight-blurple-1-hsl: 245 calc(var(--saturation-factor, 1)*55.1%) 53.7%; 10 | --bg-gradient-midnight-blurple-2: hsl(var(--bg-gradient-midnight-blurple-2-hsl)/1); 11 | --bg-gradient-midnight-blurple-2-hsl: 259 calc(var(--saturation-factor, 1)*74.5%) 10.8%; 12 | 13 | --custom-theme-background: linear-gradient(48.17deg, var(--bg-gradient-midnight-blurple-1) 11.21%, var(--bg-gradient-midnight-blurple-2) 61.92%); 14 | } -------------------------------------------------------------------------------- /themes/retro_raincloud.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Retro Raincloud 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-retro-raincloud-1: hsl(var(--bg-gradient-retro-raincloud-1-hsl)/1); 9 | --bg-gradient-retro-raincloud-1-hsl: 202 calc(var(--saturation-factor, 1)*47%) 42.9%; 10 | --bg-gradient-retro-raincloud-2: hsl(var(--bg-gradient-retro-raincloud-2-hsl)/1); 11 | --bg-gradient-retro-raincloud-2-hsl: 241 calc(var(--saturation-factor, 1)*29.6%) 61%; 12 | 13 | --custom-theme-background: linear-gradient(148.71deg, var(--bg-gradient-retro-raincloud-1) 5.64%, var(--bg-gradient-retro-raincloud-2) 26.38%, var(--bg-gradient-retro-raincloud-2) 49.92%, var(--bg-gradient-retro-raincloud-1) 73.12%); 14 | } -------------------------------------------------------------------------------- /themes/hanami.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Hanami 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-hanami-1: hsl(var(--bg-gradient-hanami-1-hsl)/1); 9 | --bg-gradient-hanami-1-hsl: 352 calc(var(--saturation-factor, 1)*68.3%) 80.2%; 10 | --bg-gradient-hanami-2: hsl(var(--bg-gradient-hanami-2-hsl)/1); 11 | --bg-gradient-hanami-2-hsl: 43 calc(var(--saturation-factor, 1)*73.6%) 76.3%; 12 | --bg-gradient-hanami-3: hsl(var(--bg-gradient-hanami-3-hsl)/1); 13 | --bg-gradient-hanami-3-hsl: 116 calc(var(--saturation-factor, 1)*43.1%) 74.5%; 14 | 15 | --custom-theme-background: linear-gradient(38.08deg, var(--bg-gradient-hanami-1) 3.56%, var(--bg-gradient-hanami-2) 35.49%, var(--bg-gradient-hanami-3) 68.78%); 16 | } -------------------------------------------------------------------------------- /themes/sunrise.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Sunrise 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-sunrise-1: hsl(var(--bg-gradient-sunrise-1-hsl)/1); 9 | --bg-gradient-sunrise-1-hsl: 327 calc(var(--saturation-factor, 1)*42%) 43.9%; 10 | --bg-gradient-sunrise-2: hsl(var(--bg-gradient-sunrise-2-hsl)/1); 11 | --bg-gradient-sunrise-2-hsl: 27 calc(var(--saturation-factor, 1)*44.9%) 58%; 12 | --bg-gradient-sunrise-3: hsl(var(--bg-gradient-sunrise-3-hsl)/1); 13 | --bg-gradient-sunrise-3-hsl: 50 calc(var(--saturation-factor, 1)*46.3%) 44.5%; 14 | 15 | --custom-theme-background: linear-gradient(154.19deg, var(--bg-gradient-sunrise-1) 8.62%, var(--bg-gradient-sunrise-2) 48.07%, var(--bg-gradient-sunrise-3) 76.04%); 16 | } -------------------------------------------------------------------------------- /themes/mint_apple.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Mint Apple 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-mint-apple-1: hsl(var(--bg-gradient-mint-apple-1-hsl)/1); 9 | --bg-gradient-mint-apple-1-hsl: 166 calc(var(--saturation-factor, 1)*39.7%) 52.5%; 10 | --bg-gradient-mint-apple-2: hsl(var(--bg-gradient-mint-apple-2-hsl)/1); 11 | --bg-gradient-mint-apple-2-hsl: 119 calc(var(--saturation-factor, 1)*40.4%) 55.9%; 12 | --bg-gradient-mint-apple-3: hsl(var(--bg-gradient-mint-apple-3-hsl)/1); 13 | --bg-gradient-mint-apple-3-hsl: 87 calc(var(--saturation-factor, 1)*48.3%) 59.8%; 14 | 15 | --custom-theme-background: linear-gradient(180deg, var(--bg-gradient-mint-apple-1) 6.15%, var(--bg-gradient-mint-apple-2) 48.7%, var(--bg-gradient-mint-apple-3) 93.07%); 16 | } -------------------------------------------------------------------------------- /themes/desert_khaki.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Desert Khaki 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-desert-khaki-1: hsl(var(--bg-gradient-desert-khaki-1-hsl)/1); 9 | --bg-gradient-desert-khaki-1-hsl: 29 calc(var(--saturation-factor, 1)*32.4%) 86.1%; 10 | --bg-gradient-desert-khaki-2: hsl(var(--bg-gradient-desert-khaki-2-hsl)/1); 11 | --bg-gradient-desert-khaki-2-hsl: 40 calc(var(--saturation-factor, 1)*41.3%) 78.6%; 12 | --bg-gradient-desert-khaki-3: hsl(var(--bg-gradient-desert-khaki-3-hsl)/1); 13 | --bg-gradient-desert-khaki-3-hsl: 50 calc(var(--saturation-factor, 1)*49.6%) 75.9%; 14 | 15 | --custom-theme-background: linear-gradient(38.99deg, var(--bg-gradient-desert-khaki-1) 12.92%, var(--bg-gradient-desert-khaki-2) 32.92%, var(--bg-gradient-desert-khaki-3) 52.11%); 16 | } -------------------------------------------------------------------------------- /themes/under_the_sea.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Under the Sea 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-under-the-sea-1: hsl(var(--bg-gradient-under-the-sea-1-hsl)/1); 9 | --bg-gradient-under-the-sea-1-hsl: 115 calc(var(--saturation-factor, 1)*10.5%) 42.9%; 10 | --bg-gradient-under-the-sea-2: hsl(var(--bg-gradient-under-the-sea-2-hsl)/1); 11 | --bg-gradient-under-the-sea-2-hsl: 159 calc(var(--saturation-factor, 1)*20.4%) 43.3%; 12 | --bg-gradient-under-the-sea-3: hsl(var(--bg-gradient-under-the-sea-3-hsl)/1); 13 | --bg-gradient-under-the-sea-3-hsl: 175 calc(var(--saturation-factor, 1)*10.9%) 46.7%; 14 | 15 | --custom-theme-background: linear-gradient(179.14deg, var(--bg-gradient-under-the-sea-1) 1.91%, var(--bg-gradient-under-the-sea-2) 48.99%, var(--bg-gradient-under-the-sea-3) 96.35%); 16 | } -------------------------------------------------------------------------------- /themes/lofi_vibes.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name LoFi Vibes 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-lofi-vibes-1: hsl(var(--bg-gradient-lofi-vibes-1-hsl)/1); 9 | --bg-gradient-lofi-vibes-1-hsl: 220 calc(var(--saturation-factor, 1)*83.8%) 80.6%; 10 | --bg-gradient-lofi-vibes-2: hsl(var(--bg-gradient-lofi-vibes-2-hsl)/1); 11 | --bg-gradient-lofi-vibes-2-hsl: 184 calc(var(--saturation-factor, 1)*57.8%) 78.6%; 12 | --bg-gradient-lofi-vibes-3: hsl(var(--bg-gradient-lofi-vibes-3-hsl)/1); 13 | --bg-gradient-lofi-vibes-3-hsl: 130 calc(var(--saturation-factor, 1)*46.3%) 78.8%; 14 | --bg-gradient-lofi-vibes-4: hsl(var(--bg-gradient-lofi-vibes-4-hsl)/1); 15 | --bg-gradient-lofi-vibes-4-hsl: 76 calc(var(--saturation-factor, 1)*48.8%) 75.5%; 16 | 17 | --custom-theme-background: linear-gradient(179.52deg, var(--bg-gradient-lofi-vibes-1) 7.08%, var(--bg-gradient-lofi-vibes-2) 34.94%, var(--bg-gradient-lofi-vibes-3) 65.12%, var(--bg-gradient-lofi-vibes-4) 96.23%); 18 | } -------------------------------------------------------------------------------- /themes/forest.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Forest 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-forest-1: hsl(var(--bg-gradient-forest-1-hsl)/1); 9 | --bg-gradient-forest-1-hsl: 124 calc(var(--saturation-factor, 1)*25.9%) 10.6%; 10 | --bg-gradient-forest-2: hsl(var(--bg-gradient-forest-2-hsl)/1); 11 | --bg-gradient-forest-2-hsl: 143 calc(var(--saturation-factor, 1)*26.2%) 23.9%; 12 | --bg-gradient-forest-3: hsl(var(--bg-gradient-forest-3-hsl)/1); 13 | --bg-gradient-forest-3-hsl: 76 calc(var(--saturation-factor, 1)*20.6%) 24.7%; 14 | --bg-gradient-forest-4: hsl(var(--bg-gradient-forest-4-hsl)/1); 15 | --bg-gradient-forest-4-hsl: 117 calc(var(--saturation-factor, 1)*17%) 41.6%; 16 | --bg-gradient-forest-5: hsl(var(--bg-gradient-forest-5-hsl)/1); 17 | --bg-gradient-forest-5-hsl: 43 calc(var(--saturation-factor, 1)*38.5%) 47.8%; 18 | 19 | --custom-theme-background: linear-gradient(162.27deg, var(--bg-gradient-forest-1) 11.2%, var(--bg-gradient-forest-2) 29.93%, var(--bg-gradient-forest-3) 48.64%, var(--bg-gradient-forest-4) 67.85%, var(--bg-gradient-forest-5) 83.54%); 20 | } -------------------------------------------------------------------------------- /themes/chroma_glow.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Chroma Glow 3 | * @author Discord 4 | * @version 0.0.1 5 | */ 6 | 7 | html { 8 | --bg-gradient-chroma-glow-1: hsl(var(--bg-gradient-chroma-glow-1-hsl)/1); 9 | --bg-gradient-chroma-glow-1-hsl: 183 calc(var(--saturation-factor, 1)*86.3%) 40.2%; 10 | --bg-gradient-chroma-glow-2: hsl(var(--bg-gradient-chroma-glow-2-hsl)/1); 11 | --bg-gradient-chroma-glow-2-hsl: 258 calc(var(--saturation-factor, 1)*89.8%) 46.3%; 12 | --bg-gradient-chroma-glow-3: hsl(var(--bg-gradient-chroma-glow-3-hsl)/1); 13 | --bg-gradient-chroma-glow-3-hsl: 298 calc(var(--saturation-factor, 1)*90.9%) 34.3%; 14 | --bg-gradient-chroma-glow-4: hsl(var(--bg-gradient-chroma-glow-4-hsl)/1); 15 | --bg-gradient-chroma-glow-4-hsl: 265 calc(var(--saturation-factor, 1)*100%) 66.3%; 16 | --bg-gradient-chroma-glow-5: hsl(var(--bg-gradient-chroma-glow-5-hsl)/1); 17 | --bg-gradient-chroma-glow-5-hsl: 207 calc(var(--saturation-factor, 1)*75.5%) 50.4%; 18 | 19 | --custom-theme-background: linear-gradient(128.92deg, var(--bg-gradient-chroma-glow-1) 3.94%, var(--bg-gradient-chroma-glow-2) 26.1%, var(--bg-gradient-chroma-glow-3) 39.82%, var(--bg-gradient-chroma-glow-4) 56.89%, var(--bg-gradient-chroma-glow-5) 76.45%); 20 | } -------------------------------------------------------------------------------- /discord_premium_theme.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Discord Premium Theme 3 | * @description Shared CSS for all Discord Premium themes. 4 | * @author Discord 5 | * @version 0.0.1 6 | */ 7 | 8 | .theme-dark .customTheme-3QAYZq.auto-2TJ1RH::-webkit-scrollbar-track { 9 | background-size: 200vh; 10 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--bg-overlay-color)/.4)), to(rgb(var(--bg-overlay-color)/.4))), var(-); 11 | background-image: linear-gradient(rgb(var(--bg-overlay-color)/.4), rgb(var(--bg-overlay-color)/.4)), var(-) 12 | } 13 | 14 | .theme-dark .customTheme-3QAYZq.auto-2TJ1RH::-webkit-scrollbar-thumb, 15 | .theme-dark .customTheme-3QAYZq.thin-RnSY0a::-webkit-scrollbar-thumb { 16 | background-size: 200vh; 17 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))), to(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)))), var(-); 18 | background-image: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)), rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))), var(-) 19 | } 20 | 21 | .theme-light .customTheme-3QAYZq.auto-2TJ1RH::-webkit-scrollbar-track { 22 | background-size: 200vh; 23 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))), to(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)))), var(-); 24 | background-image: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)), rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))), var(-) 25 | } 26 | 27 | .theme-light .customTheme-3QAYZq.auto-2TJ1RH::-webkit-scrollbar-thumb, 28 | .theme-light .customTheme-3QAYZq.thin-RnSY0a::-webkit-scrollbar-thumb { 29 | background-size: 100vh; 30 | background-image: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)), rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)) 31 | } 32 | 33 | .withBackgroundOverride-gzmZco { 34 | background: var(--bg-overlay-app-frame, var(--background-tertiary)) 35 | } 36 | 37 | .withBackgroundOverride-gzmZco.typeWindows-2-g3UY { 38 | margin-top: 0; 39 | padding-top: 4px 40 | } 41 | 42 | .theme-dark .spoilerText-2G40u0 { 43 | background-color: hsl(var(--white-500-hsl)/.1) 44 | } 45 | 46 | .theme-dark .spoilerText-2G40u0.hidden-2lQZ5q { 47 | background-color: var(--primary-630) 48 | } 49 | 50 | .theme-dark .spoilerText-2G40u0.hidden-2lQZ5q:hover { 51 | background-color: hsl(var(--primary-630-hsl)/.8) 52 | } 53 | 54 | .theme-dark { 55 | --bg-overlay-color: 0 0 0; 56 | --bg-overlay-color-inverse: 255 255 255; 57 | --bg-overlay-opacity-1: 0.85; 58 | --bg-overlay-opacity-2: 0.8; 59 | --bg-overlay-opacity-3: 0.7; 60 | --bg-overlay-opacity-4: 0.5; 61 | --bg-overlay-opacity-5: 0.4; 62 | --bg-overlay-opacity-6: 0.1; 63 | --bg-overlay-opacity-hover: 0.5; 64 | --bg-overlay-opacity-hover-inverse: 0.08; 65 | --bg-overlay-opacity-active: 0.45; 66 | --bg-overlay-opacity-active-inverse: 0.1; 67 | --bg-overlay-opacity-selected: 0.4; 68 | --bg-overlay-opacity-selected-inverse: 0.15; 69 | --bg-overlay-opacity-chat: 0.8; 70 | --bg-overlay-opacity-home: 0.85; 71 | --bg-overlay-opacity-home-card: 0.8; 72 | --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4) 73 | } 74 | 75 | .theme-light { 76 | --bg-overlay-color: 255 255 255; 77 | --bg-overlay-color-inverse: 0 0 0; 78 | --bg-overlay-opacity-1: 0.9; 79 | --bg-overlay-opacity-2: 0.8; 80 | --bg-overlay-opacity-3: 0.7; 81 | --bg-overlay-opacity-4: 0.6; 82 | --bg-overlay-opacity-5: 0.3; 83 | --bg-overlay-opacity-6: 0.15; 84 | --bg-overlay-opacity-hover: 0.7; 85 | --bg-overlay-opacity-hover-inverse: 0.02; 86 | --bg-overlay-opacity-active: 0.65; 87 | --bg-overlay-opacity-active-inverse: 0.03; 88 | --bg-overlay-opacity-selected: 0.6; 89 | --bg-overlay-opacity-selected-inverse: 0.04; 90 | --bg-overlay-opacity-chat: 0.9; 91 | --bg-overlay-opacity-home: 0.7; 92 | --bg-overlay-opacity-home-card: 0.9; 93 | --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5) 94 | } 95 | 96 | :root { 97 | --bg-overlay-1: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 98 | --bg-overlay-2: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 99 | --bg-overlay-3: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 100 | --bg-overlay-4: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 101 | --bg-overlay-5: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 102 | --bg-overlay-6: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 103 | --bg-overlay-hover: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 104 | --bg-overlay-active: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 105 | --bg-overlay-selected: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 106 | --bg-overlay-chat: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 107 | --bg-overlay-home: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 108 | --bg-overlay-home-card: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 109 | --bg-overlay-app-frame: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover; 110 | } 111 | 112 | .theme-light .reaction-3vwAF2 { 113 | border: 1px solid var(--background-modifier-accent) 114 | } 115 | 116 | .theme-dark .attachedBars-2BCP3l { 117 | background: var(--bg-overlay-1, var(--background-secondary)); 118 | background: var(--bg-overlay-2, var(--background-secondary)) 119 | } 120 | 121 | .divider-2rZFJK { 122 | border-top: thin solid rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)) 123 | } 124 | 125 | .isUnread-3Lojb-, 126 | .isUnread-3Lojb- { 127 | border-color: var(--divider-color) 128 | } 129 | 130 | .theme-dark .replyBar-1oi75v, 131 | .theme-dark .threadSuggestionBar-3ExSyc { 132 | background: var(--bg-overlay-1, var(--background-secondary)) 133 | } 134 | 135 | .theme-light .replyBar-1oi75v, 136 | .theme-light .threadSuggestionBar-3ExSyc { 137 | background: var(--bg-overlay-2, var(--background-secondary)) 138 | } 139 | 140 | .children-3xh0VB:after { 141 | content: unset !important 142 | } 143 | 144 | .theme-dark .preview-QJ3OG3 { 145 | background: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))), to(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)))), var(-); 146 | background: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)), rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))), var(-) 147 | } 148 | 149 | .theme-light .preview-QJ3OG3 { 150 | background: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))), to(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)))), var(-); 151 | background: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)), rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))), var(-) 152 | } 153 | 154 | .form-3gdLxP:before { 155 | content: unset !important 156 | } 157 | 158 | .theme-light .modeMuted-2T4MDZ .icon-2W8DHg, 159 | .theme-light .modeMuted-2T4MDZ .name-28HaxV { 160 | color: var(--primary-330) 161 | } 162 | 163 | .theme-dark .wrapper-3kah-n:not(:hover):not(.selected-1Drb7Z) .childWrapper-1j_1ub { 164 | background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)) 165 | } 166 | 167 | .theme-light .wrapper-3kah-n:not(:hover):not(.selected-1Drb7Z) .childWrapper-1j_1ub { 168 | background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)) 169 | } 170 | 171 | .theme-dark .circleIconButton-1VxDrg:not(.selected-2r1Hvo) { 172 | background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)) 173 | } 174 | 175 | .theme-light .circleIconButton-1VxDrg:not(.selected-2r1Hvo) { 176 | background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)) 177 | } 178 | 179 | .theme-dark .expandedFolderBackground-1kSAf6 { 180 | background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)) 181 | } 182 | 183 | .theme-dark .folder-241Joy { 184 | background: var(--bg-overlay-6, var(--background-secondary)) 185 | } 186 | 187 | .theme-light .expandedFolderBackground-1kSAf6 { 188 | background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5)) 189 | } 190 | 191 | .theme-light .folder-241Joy { 192 | background: var(--bg-overlay-3, var(--background-secondary)) 193 | } 194 | 195 | .scroller-3X7KbA { 196 | background: var(--bg-overlay-app-frame, var(--background-tertiary)) 197 | } 198 | 199 | .theme-dark .container-1zzFcN { 200 | background: var(--bg-overlay-1, var(--background-secondary-alt)) 201 | } 202 | 203 | .theme-dark .button-1EGGcP.buttonColor-3bP3fX, 204 | .theme-dark .button-1EGGcP .buttonColor-3bP3fX { 205 | background: var(--bg-overlay-4, var(--background-primary)) 206 | } 207 | 208 | .theme-dark .button-1EGGcP.buttonColor-3bP3fX:hover, 209 | .theme-dark .button-1EGGcP .buttonColor-3bP3fX:hover { 210 | background: var(--bg-overlay-5, var(--background-secondary)) 211 | } 212 | 213 | .theme-dark .button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx, 214 | .theme-dark .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx { 215 | background: var(--green-360); 216 | color: var(--white-500) 217 | } 218 | 219 | .theme-dark .button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, 220 | .theme-dark .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx:hover { 221 | background: var(--green-330) 222 | } 223 | 224 | .theme-light .container-1zzFcN { 225 | background: var(--bg-overlay-3, var(--background-secondary-alt)) 226 | } 227 | 228 | .theme-light .button-1EGGcP.buttonColor-3bP3fX, 229 | .theme-light .button-1EGGcP .buttonColor-3bP3fX { 230 | background: var(--bg-overlay-1, var(--background-primary)) 231 | } 232 | 233 | .theme-light .button-1EGGcP.buttonColor-3bP3fX:hover, 234 | .theme-light .button-1EGGcP .buttonColor-3bP3fX:hover { 235 | background: var(--bg-overlay-2, var(--background-secondary)) 236 | } 237 | 238 | .theme-light .button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx, 239 | .theme-light .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx { 240 | background: var(--green-360); 241 | color: var(--white-500) 242 | } 243 | 244 | .theme-light .button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, 245 | .theme-light .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx:hover { 246 | background: var(--green-330) 247 | } --------------------------------------------------------------------------------