Last active
September 25, 2024 18:51
-
-
Save NanoAi/355d514f3b0ac8d01980f7764e3cdb8b to your computer and use it in GitHub Desktop.
This file contains 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 */ | |
.content_eed6a8 /* 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_c0f6a6.interactive_c0f6a6:hover, .theme-dark .outer_c0f6a6.active_c0f6a6 /* 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 */, | |
.attachedBars_d0696b /* 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_e44302 /* toolbar button strikethroughs */ { | |
--status-danger: var(--accent-2); | |
} | |
.expandedFolderIconWrapper_bc7085 > svg { | |
color: var(--accent-3) !important; | |
} | |
.divider_fc5f50 /* unread divider */, | |
.mention_c10249 /* 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_e44302 /* 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_d0696b > div.container_dfb455 { | |
display: none; | |
} | |
/* filter login image */ | |
.artwork_bdd070 { | |
filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); | |
} | |
/* hide user game activity */ | |
.membersGroup_cbd271:has(.headerContainer_bc6acb), | |
/* .content_eed6a8[aria-label="Members"]>div:has(.container_c64476), */ | |
.content_eed6a8>div:has(.container_c64476) { | |
display: none; | |
} | |
.theme-dark { | |
--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
@refact0r Ended up using the colours from your theme, and modifying it a bit. Didn't wanna fork the entire repo as I only changed one file.