Last active
January 30, 2025 00:10
-
-
Save NanoAi/355d514f3b0ac8d01980f7764e3cdb8b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* customize things here */ | |
| :root { | |
| /* font, change to 'gg sans' for default discord font*/ | |
| --font: 'FiraMono Nerd Font'; | |
| /* color of online status dot, change to #23a55a for default green */ | |
| /* --online-indicator: var(--accent-2); */ | |
| --online-indicator: hsl(145, 65%, 39%); | |
| /* top left text */ | |
| --corner-text: 'Duskify'; | |
| /* amount of spacing and padding */ | |
| --spacing: 0px; | |
| /* animations */ | |
| --hover-push: 0.2s ease; | |
| /* corner roundness (border-radius) */ | |
| --roundness-xl: 0px; /* roundness of big panel outer corners */ | |
| --roundness-l: 20px; /* popout panels */ | |
| --roundness-m: 16px; /* smaller panels, images, embeds */ | |
| --roundness-s: 12px; /* members, settings inputs */ | |
| --roundness-xs: 10px; /* channels, buttons */ | |
| --roundness-xxs: 0px; /* searchbar, small elements */ | |
| /* accent colors */ | |
| --accent-1: hsl(320, 62%, 50%); /* links */ | |
| --accent-2: hsl(320, 62%, 38%); /* general unread/mention elements */ | |
| --accent-3: hsl(320, 62%, 32%); /* accent buttons */ | |
| --accent-4: hsl(320, 62%, 26%); /* accent buttons when hovered */ | |
| --accent-5: hsl(320, 62%, 20%); /* accent buttons when clicked */ | |
| --mention: hsla(320, 62%, 42%, 0.1); /* mentions & mention messages */ | |
| --mention-hover: hsla(320, 62%, 42%, 0.05); /* mentions & mention messages when hovered */ | |
| /* text colors */ | |
| --text-1: hsl(0, 40%, 90%); /* bright text on colored elements */ | |
| --text-2: hsl(0, 25%, 70%); /* headings and important text */ | |
| --text-3: hsl(0, 15%, 60%); /* normal text */ | |
| --text-4: hsl(0, 15%, 40%); /* icon buttons and channels */ | |
| --text-5: hsl(0, 15%, 25%); /* muted channels/chats and timestamps */ | |
| /* background and dark colors */ | |
| --bg-1: hsl(0, 0%, 20%); /* dark buttons when clicked */ | |
| --bg-2: hsl(0, 0%, 16%); /* dark buttons */ | |
| --bg-3: hsl(0, 0%, 13%); /* spacing, secondary elements */ | |
| --bg-4: hsl(0, 0%, 10%); /* main background color */ | |
| --bg-5: hsl(0, 0%, 9%); /* offset background color */ | |
| --hover: hsla(0, 0%, 40%, 0.1); /* channels and buttons when hovered */ | |
| --active: hsla(0, 0%, 40%, 0.2); /* channels and buttons when clicked or selected */ | |
| --message-hover: hsla(0, 0%, 0%, 0.1); /* messages when hovered */ | |
| } | |
| /* Custom font, uncomment to apply. */ | |
| /* | |
| :root { | |
| --font-primary: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| --font-display: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| } | |
| */ | |
| .container_ee69e0, /* channel list */ | |
| .container_adcaac, /* voice indicator */ | |
| [data-list-id^="private-channels"], /* private channels list */ | |
| [class^="searchBar_"], /* search bar */ | |
| [class^="searchBar_"] > button, /* search bar secondary */ | |
| .container__2637a /* user list */ | |
| { | |
| background-color: var(--bg-5)!important; | |
| } | |
| /* Profile Overflow Fix */ | |
| /* - Profile Height Limit */ | |
| [class*=userPopoutOverlayBackground] { | |
| max-height: 60vh; | |
| } | |
| /* - Roles Scroller */ | |
| .roles_fa2f72 { | |
| max-height: 5em; | |
| overflow: hidden scroll; | |
| width: 110%; | |
| } | |
| .section_d7a21f:has(.roles_fa2f72) { | |
| max-width: 90%; | |
| overflow: hidden; | |
| } | |
| /* END */ | |
| .animatedContainer_fd6364 { | |
| z-index: 2; | |
| } | |
| [class^="sidebarRegionScroller"] { | |
| background: hsl(0deg 0% 8.81%); | |
| } | |
| [class^="headerText_"] { | |
| color: var(--text-5); | |
| } | |
| /* friend */ | |
| [class^="content"] > [class^="chatContent"] > [class^="messagesWrapper"]::before { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| width: 12em; | |
| height: 12em; | |
| pointer-events: none; | |
| background: url('./img/midnight/discord.png') center / contain no-repeat; | |
| animation: MoveUpDown 5s linear infinite; | |
| opacity: 0.25; | |
| right: 10px; | |
| bottom: 30px; | |
| } | |
| @keyframes MoveUpDown { | |
| 0%, 100% { | |
| bottom: 30px; | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| bottom: 60px; | |
| transform: rotate(7deg); | |
| } | |
| } | |
| /* Hide Gift Icon. */ | |
| button[aria-label="Send a gift"] { | |
| display: none; | |
| } | |
| /* Change icon sizes. */ | |
| [class^="icon"] > svg { | |
| transform: scale(0.8); | |
| } | |
| [role="menu"] [class^="icon"] > svg { | |
| transform: scale(1); | |
| } | |
| .theme-dark div.messagelogger-edited { | |
| color: orange; | |
| opacity: 0.5; | |
| filter: none!important; | |
| } | |
| .theme-dark div.messagelogger-edited span[class^="edited"] { | |
| display: none; | |
| } | |
| .theme-dark div.messagelogger-edited span[class^="timestamp"] > time::after { | |
| content: '#'; | |
| display: block; | |
| } | |
| .theme-dark div.messagelogger-edited::after { | |
| content: '↴'; | |
| position: relative; | |
| top: 0.15em; | |
| } | |
| .theme-dark .messagelogger-deleted [class*="contents"] > :is(div, h1, h2, h3, p){ | |
| color: red; | |
| opacity: 0.45; | |
| } | |
| .theme-dark .messagelogger-deleted [class*="contents"] > img { | |
| opacity: 0.5; | |
| filter: grayscale(1); | |
| } | |
| /* patch mask background */ | |
| #app-mount .panels_a4d4d9 > [class^="mask"] { | |
| background: none !important; | |
| } | |
| /* modify colors */ | |
| #app-mount .container_ee69e0 /* channel list */, | |
| .privateChannels_f0963d /* dms list */, | |
| #app-mount .container_b2ca13 /* user panel inner */, | |
| .members_cbd271 /* member list inner */, | |
| .member_a31c43 /* member list members */, | |
| .searchResultsWrap_c2b47d /* search results */, | |
| .searchHeader_b7c924 /* search results header */, | |
| .chat_a7d72e.container_f3abf4 /* message requests */, | |
| #app-mount .panels_a4d4d9 > div /* user panel children */, | |
| .container_adcaac /* vc panel */, | |
| .sidebarRegionScroller_c25c6d /* settings left */, | |
| .theme-dark .container_f1fd9c /* browse channels container */, | |
| .theme-dark .header_f1fd9c /* browse channels header */, | |
| .theme-dark .container_c2efea /* browse channels inner */, | |
| .chat_a7d72e.background_e85cee /* server guide body */, | |
| .shop_e77fa3 /* shop */, | |
| .wrapper_d880dc.minimum_d880dc /* private call */ { | |
| background: var(--bg-5); | |
| } | |
| .theme-dark .scrollerContainer_c6b11b /* channels and roles customize */ { | |
| background: var(--bg-4); | |
| } | |
| .mainCard_a6d69a /* forum post */ { | |
| background: var(--bg-3); | |
| } | |
| .folderIconWrapper_bc7085 /* closed folder */ { | |
| background: var(--bg-3) !important; | |
| } | |
| .theme-dark .outer_ac5d22.interactive_ac5d22:hover, .theme-dark .outer_ac5d22.active_ac5d22 /* friend activity cards on hover */ { | |
| background: var(--bg-2); | |
| } | |
| #app-mount .searchAnswer_b0fa94, /* search filter answer */ | |
| #app-mount .searchFilter_b0fa94 /* search filter */ { | |
| background: var(--bg-1); | |
| } | |
| .container_cebd1c /* settings checkbuttons default */ { | |
| background: var(--bg-1) !important; | |
| } | |
| .chat_a7d72e /* chat + member list */, | |
| .sidebar_a4d4d9 /* channel sidebar */, | |
| .privateChannels_f0963d .scroller_c47fa9 /* dms list inner */, | |
| .theme-dark .innerHeader_f1fd9c:after /* channels and roles header shadow */, | |
| .stackedBars_bdf0de /* reply bar underneath */ { | |
| background: none; | |
| } | |
| .selected_fd6364 .header_fd6364, .clickable_fd6364 .header_fd6364:hover /* server name hover */ { | |
| background: var(--message-hover); | |
| } | |
| .message_d5deea.replying_d5deea.selected_d5deea, .mouse-mode.full-motion .replying_d5deea:hover /* fix reply message hover */ { | |
| background: var(--background-message-highlight-hover); | |
| } | |
| div.message_d5deea.replying_d5deea::before /* change reply message bar to neutral */ { | |
| background: var(--text-2); | |
| } | |
| .activeButtonChild_a06035 /* send button */ { | |
| color: var(--accent-2); | |
| } | |
| .container_b2ca13 /* user panel button strikethroughs */, | |
| .numberBadge__40d6f /* unread number badge */, | |
| .toolbar_fc4f04 /* toolbar button strikethroughs */ { | |
| --status-danger: var(--accent-2); | |
| } | |
| .expandedFolderIconWrapper_bc7085 > svg { | |
| color: var(--accent-3) !important; | |
| } | |
| .divider_c2654d /* unread divider */, | |
| .mention_edf32f /* NEW unread pill */ { | |
| --status-danger: var(--accent-3); | |
| } | |
| .message_d5deea.mentioned_d5deea:before /* mention message left edge */ { | |
| background: var(--accent-3); | |
| } | |
| .container_cebd1c.checked_cebd1c /* settings checkbuttons */ { | |
| background: var(--accent-3) !important; | |
| } | |
| path[fill='rgba(35, 165, 90, 1)'] { | |
| fill: var(--accent-3); | |
| } | |
| .container_aef5fd:last-child .icon_aef5fd /* explore discoverable servers icon color */ { | |
| background-color: #3ba55c; | |
| filter: hue-rotate(56deg) saturate(1.43); | |
| } | |
| .container_aef5fd:first-child .icon_aef5fd { | |
| filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); | |
| } | |
| .lookFilled_dd4f85.colorBrand_dd4f85 .defaultColor__77578 /* vc choose an activity button */ { | |
| color: var(--white-500); | |
| } | |
| ::selection { | |
| background: var(--accent-4); | |
| color: white; | |
| } | |
| /* change online indicator color */ | |
| rect[fill='#23a55a'] { | |
| fill: var(--online-indicator) !important; | |
| } | |
| .status_c7d26b[style='background-color: var(--green-360);'], | |
| .status_c7d26b[style='background-color: currentcolor;'] { | |
| background-color: var(--online-indicator) !important; | |
| } | |
| /* separate header bar */ | |
| .title_a7d72e.themed_fc4f04 /* remove bg */ { | |
| background: none; | |
| } | |
| /* separate guilds panel background */ | |
| .guilds_a4d4d9 { | |
| background: var(--bg-4); | |
| } | |
| .guilds_a4d4d9::after /* add bottom scroll shadow */, | |
| .membersWrap_cbd271::after { | |
| content: ''; | |
| position: absolute; | |
| background: linear-gradient(transparent 85%, var(--bg-4) 100%); | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100px; | |
| pointer-events: none; | |
| border-radius: 0 0 var(--roundness-xl) var(--roundness-xl); | |
| } | |
| .guilds_a4d4d9::before /* add top scroll shadow */ { | |
| content: ''; | |
| position: absolute; | |
| background: linear-gradient(var(--bg-4) 0%, transparent 15%); | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100px; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .childWrapper_a6ce15 { | |
| background: var(--bg-3); | |
| } | |
| /* home icon */ | |
| [class^='tutorialContainer'] svg [class^="wrapper"] > [class^="childWrapper"] img, | |
| [class^='tutorialContainer'] svg [class^="wrapper"] > [class^="childWrapper"] svg { | |
| display: none; | |
| } | |
| [class^='tutorialContainer'] svg [class^="wrapper"] > [class^="childWrapper"]::after { | |
| content: ' '; | |
| display: block; | |
| position: relative; | |
| width: 42px; | |
| height: 42px; | |
| line-height: 32px; | |
| opacity: 0.8; | |
| transition: all 50ms linear; | |
| background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFF" d="m23 11.5l-3.05-1.13c-.26-1.15-.91-1.81-.91-1.81a4.189 4.189 0 0 0-5.93 0l-1.48 1.48L5 3c-1 4 0 8 2.45 11.22L2 19.5s8.89 2 14.07-2.05c2.76-2.16 3.38-3.42 3.77-4.75L23 11.5m-5.29.22c-.39.39-1.03.39-1.42 0a.996.996 0 0 1 0-1.41c.39-.39 1.03-.39 1.42 0c.39.39.39 1.02 0 1.41Z"%2F%3E%3C%2Fsvg%3E') center / contain no-repeat; | |
| } | |
| [class^='tutorialContainer'] svg [class^="wrapper"] > [class^="childWrapper"]:hover::after { | |
| opacity: 1; | |
| transform: scale(1.1) rotateZ(-10deg); | |
| } | |
| /* hide gift button */ | |
| .buttons_bdf0de > div.container_dfb455 { | |
| display: none; | |
| } | |
| /* filter login image */ | |
| .artwork_bdd070 { | |
| filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); | |
| } | |
| /* hide user game activity */ | |
| h3.text__13cf1:has(.headerContainer__095fe), | |
| .content__99f8c>div>div[role="listitem"], | |
| .membersGroup_cbd271:has(.headerContainer_bc6acb), | |
| /* .container__2637a[aria-label="Members"]>div:has(.container_c64476), */ | |
| .container__2637a>div:has(.container_c64476) { | |
| display: none; | |
| } | |
| .theme-dark { | |
| /* --bg-overlay-chat: var(); */ | |
| --custom-channel-members-bg: var(--bg-5); | |
| --activity-card-background: var(--primary-700); | |
| --android-navigation-bar-background: var(--primary-830); | |
| --android-navigation-scrim-background: hsl(var(--primary-830-hsl) / 0.5); | |
| --android-ripple: hsl(var(--white-500-hsl) / 0.07); | |
| --background-accent: var(--bg-2); | |
| --background-floating: var(--bg-3); | |
| --background-mentioned: var(--mention); | |
| --background-mentioned-hover: var(--mention-hover); | |
| --background-message-automod: hsl(var(--red-400-hsl) / 0.05); | |
| --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1); | |
| --background-message-highlight: var(--active); | |
| --background-message-highlight-hover: var(--hover); | |
| --background-message-hover: var(--message-hover); | |
| --background-mobile-primary: var(--bg-4); | |
| --background-mobile-secondary: var(--primary-630); | |
| --background-modifier-accent: var(--hover); | |
| --background-modifier-accent-2: red; | |
| --background-modifier-active: var(--active); | |
| --background-modifier-hover: var(--hover); | |
| --background-modifier-selected: var(--active); | |
| --background-nested-floating: var(--primary-630); | |
| --background-primary: var(--bg-4); | |
| --background-secondary: var(--bg-3); | |
| --background-secondary-alt: var(--bg-3); | |
| --background-tertiary: var(--bg-3); | |
| --bg-backdrop: hsl(var(--black-500-hsl) / 0.7); | |
| --bg-backdrop-no-opacity: var(--black-500); | |
| --bg-base-primary: var(--primary-600); | |
| --bg-base-secondary: var(--primary-630); | |
| --bg-base-tertiary: var(--primary-660); | |
| --bg-mod-faint: hsl(var(--primary-500-hsl) / 0.3); | |
| --bg-mod-strong: hsl(var(--primary-500-hsl) / 0.54); | |
| --bg-mod-subtle: hsl(var(--primary-500-hsl) / 0.48); | |
| --bg-surface-overlay: var(--primary-800); | |
| --bg-surface-overlay-tmp: var(--primary-800); | |
| --bg-surface-raised: var(--primary-600); | |
| --black: var(--black-500); | |
| --blur-fallback: hsl(var(--primary-700-hsl) / 0.96); | |
| --blur-fallback-pressed: hsl(var(--primary-730-hsl) / 0.96); | |
| --border-faint: hsl(var(--white-500-hsl) / 0.03); | |
| --border-strong: hsl(var(--white-500-hsl) / 0.16); | |
| --border-subtle: hsl(var(--white-500-hsl) / 0.08); | |
| --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl) / 0.6); | |
| --button-creator-revenue-background: var(--teal-430); | |
| --button-danger-background: var(--red-430); | |
| --button-danger-background-active: var(--red-530); | |
| --button-danger-background-disabled: var(--red-430); | |
| --button-danger-background-hover: var(--red-500); | |
| --button-outline-brand-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-brand-background-active: var(--brand-560); | |
| --button-outline-brand-background-hover: var(--brand-500); | |
| --button-outline-brand-border: var(--brand-500); | |
| --button-outline-brand-border-active: var(--brand-560); | |
| --button-outline-brand-border-hover: var(--brand-500); | |
| --button-outline-brand-text: var(--white-500); | |
| --button-outline-brand-text-active: var(--white-500); | |
| --button-outline-brand-text-hover: var(--white-500); | |
| --button-outline-danger-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-danger-background-active: var(--red-460); | |
| --button-outline-danger-background-hover: var(--red-430); | |
| --button-outline-danger-border: var(--red-400); | |
| --button-outline-danger-border-active: var(--red-430); | |
| --button-outline-danger-border-hover: var(--red-430); | |
| --button-outline-danger-text: var(--white-500); | |
| --button-outline-danger-text-active: var(--white-500); | |
| --button-outline-danger-text-hover: var(--white-500); | |
| --button-outline-positive-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-positive-background-active: var(--green-530); | |
| --button-outline-positive-background-hover: var(--green-430); | |
| --button-outline-positive-border: var(--green-360); | |
| --button-outline-positive-border-active: var(--green-530); | |
| --button-outline-positive-border-hover: var(--green-430); | |
| --button-outline-positive-text: var(--white-500); | |
| --button-outline-positive-text-active: var(--white-500); | |
| --button-outline-positive-text-hover: var(--white-500); | |
| --button-outline-primary-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-primary-background-active: var(--primary-430); | |
| --button-outline-primary-background-hover: var(--primary-500); | |
| --button-outline-primary-border: var(--primary-500); | |
| --button-outline-primary-border-active: var(--primary-430); | |
| --button-outline-primary-border-hover: var(--primary-500); | |
| --button-outline-primary-text: var(--white-500); | |
| --button-outline-primary-text-active: var(--white-500); | |
| --button-outline-primary-text-hover: var(--white-500); | |
| --button-positive-background: var(--green-430); | |
| --button-positive-background-active: var(--green-530); | |
| --button-positive-background-disabled: var(--green-430); | |
| --button-positive-background-hover: var(--green-500); | |
| --button-secondary-background: var(--bg-2); | |
| --button-secondary-background-active: var(--text-5); | |
| --button-secondary-background-disabled: var(--bg-2); | |
| --button-secondary-background-hover: var(--bg-1); | |
| --card-gradient-bg: hsl(var(--black-500-hsl) / 0.4); | |
| --card-gradient-pressed-bg: hsl(var(--black-500-hsl) / 0.5); | |
| --card-primary-bg: var(--bg-5); /* <-- Polls and stuff. */ | |
| --card-primary-pressed-bg: var(--primary-645); | |
| --card-secondary-bg: var(--bg-5); | |
| --card-secondary-pressed-bg: var(--primary-645); | |
| --channel-icon: var(--text-4); | |
| --channel-text-area-placeholder: var(--text-5); | |
| --channels-default: var(--text-4); | |
| --channeltextarea-background: var(--bg-3); | |
| --chat-background: var(--primary-600); | |
| --chat-border: var(--primary-700); | |
| --chat-input-container-background: var(--primary-600); | |
| --chat-swipe-to-reply-background: var(--primary-660); | |
| --control-brand-foreground: var(--accent-2); | |
| --control-brand-foreground-new: var(--brand-360); | |
| --creator-revenue-icon-gradient-end: var(--teal-430); | |
| --creator-revenue-icon-gradient-start: var(--teal-360); | |
| --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1); | |
| --creator-revenue-info-box-border: var(--teal-400); | |
| --creator-revenue-locked-channel-icon: var(--teal-345); | |
| --creator-revenue-progress-bar: var(--teal-400); | |
| --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6); | |
| --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3); | |
| --deprecated-quickswitcher-input-background: var(--primary-400); | |
| --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl) / 0.3); | |
| --deprecated-store-bg: var(--primary-600); | |
| --deprecated-text-input-bg: var(--bg-3); | |
| --deprecated-text-input-border: hsl(var(--black-500-hsl) / 0.3); | |
| --deprecated-text-input-border-disabled: var(--primary-700); | |
| --deprecated-text-input-border-hover: var(--primary-900); | |
| --deprecated-text-input-prefix: var(--primary-200); | |
| --display-banner-overflow-background: hsl(var(--primary-700-hsl) / 0.5); | |
| --divider-strong: hsl(var(--white-500-hsl) / 0.16); | |
| --divider-subtle: hsl(var(--white-500-hsl) / 0.08); | |
| --focus-primary: var(--blue-345); | |
| --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl) / 0.8); | |
| --forum-post-tag-background: hsl(var(--primary-660-hsl) / 0.9); | |
| --guild-notifications-bottom-sheet-pill-background: var(--primary-700); | |
| --header-muted: red; | |
| --header-primary: var(--text-2); | |
| --header-secondary: var(--text-4); | |
| --home-background: var(--bg-4); | |
| --home-card-resting-border: hsl(var(--transparent-hsl) / 0); | |
| --icon-muted: var(--primary-400); | |
| --icon-primary: var(--primary-130); | |
| --icon-secondary: var(--primary-330); | |
| --info-box-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-danger-background: hsl(var(--red-400-hsl) / 0.1); | |
| --info-danger-foreground: var(--red-400); | |
| --info-danger-text: var(--white-500); | |
| --info-help-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-help-foreground: var(--blue-345); | |
| --info-help-text: var(--white-500); | |
| --info-positive-background: hsl(var(--green-360-hsl) / 0.1); | |
| --info-positive-foreground: var(--green-360); | |
| --info-positive-text: var(--white-500); | |
| --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1); | |
| --info-warning-foreground: var(--yellow-300); | |
| --info-warning-text: var(--white-500); | |
| --input-background: var(--bg-3); | |
| --input-placeholder-text: var(--text-5); | |
| --interactive-active: var(--text-3); | |
| --interactive-hover: var(--text-3); | |
| --interactive-muted: var(--text-5); | |
| --interactive-normal: var(--text-4); | |
| --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5); | |
| --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-500-hsl) / 0.025); | |
| --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975); | |
| --legacy-blur-fallback-ultra-thin: hsl(var(--black-500-hsl) / 0.95); | |
| --live-stage-tile-border: hsl(var(--primary-500-hsl) / 0.6); | |
| --logo-primary: var(--white-500); | |
| --mention-background: var(--mention); | |
| --mention-foreground: var(--accent-1); | |
| --modal-background: var(--bg-4); | |
| --modal-footer-background: var(--bg-4); | |
| --navigator-header-tint: var(--white-500); | |
| --polls-image-normal-border: hsl(var(--black-430-hsl) / 0.9); | |
| --polls-victor-border: var(--yellow-300); | |
| --polls-victor-fill: var(--yellow-200); | |
| --polls-victor-label: var(--primary-600); | |
| --polls-voted-border: var(--green-330); | |
| --polls-voted-fill: var(--green-160); | |
| --polls-voted-label: var(--primary-600); | |
| --profile-gradient-card-background: hsl(var(--black-500-hsl) / 0.7); | |
| --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48); | |
| --profile-gradient-note-background: hsl(var(--black-500-hsl) / 0.3); | |
| --profile-gradient-overlay: hsl(var(--black-500-hsl) / 0.6); | |
| --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl) / 0.8); | |
| --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl) / 0.16); | |
| --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5); | |
| --profile-gradient-role-pill-border: hsl(var(--white-500-hsl) / 0.2); | |
| --profile-role-pill-background-color: var(--bg-4); /* Default role pill colour. */ | |
| --profile-gradient-section-box: hsl(var(--black-500-hsl) / 0.45); | |
| --redesign-activity-card-background: var(--primary-560); | |
| --redesign-activity-card-background-pressed: var(--primary-630); | |
| --redesign-activity-card-badge-icon: var(--primary-360); | |
| --redesign-activity-card-border: hsl(var(--white-500-hsl) / 0.02); | |
| --redesign-activity-card-overflow-background: var(--primary-630); | |
| --redesign-button-danger-background: var(--red-430); | |
| --redesign-button-danger-pressed-background: var(--red-460); | |
| --redesign-button-danger-text: var(--white-500); | |
| --redesign-button-overlay-alpha-background: hsl(var(--black-500-hsl) / 0.54); | |
| --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-500-hsl) / 0.64); | |
| --redesign-button-overlay-alpha-text: var(--white-500); | |
| --redesign-button-overlay-background: var(--white-500); | |
| --redesign-button-overlay-pressed-background: var(--primary-230); | |
| --redesign-button-overlay-text: var(--primary-860); | |
| --redesign-button-positive-background: var(--green-430); | |
| --redesign-button-positive-pressed-background: var(--green-460); | |
| --redesign-button-positive-text: var(--white-500); | |
| --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0); | |
| --redesign-button-primary-alt-border: var(--brand-360); | |
| --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0); | |
| --redesign-button-primary-alt-on-blurple-border: var(--white-500); | |
| --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530); | |
| --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360); | |
| --redesign-button-primary-alt-on-blurple-text: var(--white-500); | |
| --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16); | |
| --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5); | |
| --redesign-button-primary-alt-pressed-text: var(--brand-360); | |
| --redesign-button-primary-alt-text: var(--brand-360); | |
| --redesign-button-primary-background: var(--brand-500); | |
| --redesign-button-primary-on-blurple-background: var(--white-500); | |
| --redesign-button-primary-on-blurple-pressed-background: var(--brand-200); | |
| --redesign-button-primary-on-blurple-pressed-text: var(--brand-530); | |
| --redesign-button-primary-on-blurple-text: var(--brand-500); | |
| --redesign-button-primary-pressed-background: var(--brand-560); | |
| --redesign-button-primary-text: var(--white-500); | |
| --redesign-button-secondary-alt-background: var(--primary-660); | |
| --redesign-button-secondary-alt-pressed-background: var(--primary-560); | |
| --redesign-button-secondary-alt-pressed-text: var(--primary-330); | |
| --redesign-button-secondary-alt-text: var(--primary-230); | |
| --redesign-button-secondary-background: var(--primary-460); | |
| --redesign-button-secondary-border: hsl(var(--white-500-hsl) / 0.08); | |
| --redesign-button-secondary-pressed-background: var(--primary-500); | |
| --redesign-button-secondary-pressed-border: hsl(var(--transparent-hsl) / 0); | |
| --redesign-button-secondary-text: var(--primary-230); | |
| --redesign-channel-category-name-text: var(--primary-330); | |
| --redesign-channel-message-preview-text: var(--primary-360); | |
| --redesign-channel-name-muted-text: var(--primary-360); | |
| --redesign-channel-name-text: var(--primary-130); | |
| --redesign-chat-input-background: var(--primary-700); | |
| --redesign-input-control-active-bg: var(--primary-645); | |
| --redesign-input-control-selected: var(--brand-500); | |
| --redesign-only-background-active: var(--primary-530); | |
| --redesign-only-background-default: var(--primary-600); | |
| --redesign-only-background-overlay: var(--primary-645); | |
| --redesign-only-background-raised: var(--primary-630); | |
| --redesign-only-background-sunken: var(--primary-660); | |
| --scrollbar-auto-scrollbar-color-thumb: var(--primary-730); | |
| --scrollbar-auto-scrollbar-color-track: var(--primary-630); | |
| --scrollbar-auto-thumb: var(--bg-3); | |
| --scrollbar-auto-track: transparent; | |
| --scrollbar-thin-thumb: var(--bg-3); | |
| --scrollbar-thin-track: transparent; | |
| --spoiler-hidden-background: var(--primary-700); | |
| --spoiler-revealed-background: var(--primary-660); | |
| --status-danger: var(--red-400); | |
| --status-danger-background: var(--red-400); | |
| --status-danger-text: var(--white-500); | |
| --status-dnd: var(--red-400); | |
| --status-idle: var(--yellow-300); | |
| --status-offline: var(--primary-360); | |
| --status-online: var(--green-360); | |
| --status-positive: var(--green-360); | |
| --status-positive-background: var(--green-430); | |
| --status-positive-text: var(--white-500); | |
| --status-speaking: var(--green-360); | |
| --status-warning: var(--yellow-300); | |
| --status-warning-background: var(--yellow-300); | |
| --status-warning-text: var(--black-500); | |
| --text-brand: var(--accent-1); | |
| --text-danger: var(--red-345); | |
| --text-link: var(--accent-1); | |
| --text-link-low-saturation: var(--blue-330); | |
| --text-low-contrast: var(--primary-360); | |
| --text-message-preview-low-sat: var(--primary-360); | |
| --text-muted: var(--text-5); | |
| --text-muted-on-default: red; | |
| --text-normal: var(--text-3); | |
| --text-positive: var(--green-330); | |
| --text-primary: var(--primary-230); | |
| --text-secondary: var(--text-5); /* secondary-text */ | |
| --text-warning: var(--yellow-300); | |
| --textbox-markdown-syntax: var(--primary-360); | |
| --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96); | |
| --user-profile-header-overflow-background: hsl(var(--primary-700-hsl) / 0.5); | |
| --voice-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); | |
| --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); | |
| --white: var(--white-500); | |
| --profile-gradient-primary-color: var(--bg-4); | |
| --profile-gradient-secondary-color: var(--bg-4); | |
| --elevation-low: none; | |
| --search-popout-option-fade: none; | |
| --search-popout-option-fade-hover: none; | |
| --brand-430: var(--accent-3); | |
| --brand-500: var(--accent-3); | |
| --brand-560: var(--accent-4); | |
| --brand-600: var(--accent-5); | |
| --green-330: var(--accent-1); | |
| --green-360: var(--accent-2); /* hsl(145, 65%, 39%) | --accent-3 */ | |
| --green-430: var(--accent-4); | |
| --green-500: var(--accent-4); | |
| --green-530: var(--accent-5); | |
| --brand-experiment-15a: var(--mention); /* background of reacted reactions */ | |
| --primary-500: var(--bg-2); /* progress bars */ | |
| --primary-600: var(--bg-3); /* delete message preview */ | |
| --primary-630: var(--bg-3); /* billing transaction history */ | |
| --primary-660: var(--bg-3); /* search popout "enter" bar */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👍