Last active
March 11, 2023 13:48
-
-
Save natyusha/732e4082bad12de2cf29265126d98e1d to your computer and use it in GitHub Desktop.
Discord CSS
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
| /* FONT PREP */ | |
| @font-face { | |
| font-family:"Iosevka NN"; | |
| src: local("Iosevka NN Medium Extended") | |
| } | |
| * { | |
| /* FONT */ | |
| font-family:"Iosevka NN"!important; | |
| /* COLOUR VARIABLES */ | |
| --ui-colour-accent:#ea005e; | |
| --ui-colour-base:#1c1c1c; | |
| --ui-colour-dark:#0f0f0f; | |
| --ui-colour-hover:#2e2e2e; | |
| --ui-colour-text-faded:#646464; | |
| --ui-colour-text-hover:#ffffff; | |
| --ui-colour-text:#dedede; | |
| } | |
| /* COLOUR REASSIGNMENT */ | |
| .theme-dark{ | |
| --header-primary:#fff; | |
| --header-secondary:#b9bbbe; | |
| --text-normal:#dcddde; | |
| --text-muted:#a3a6aa; | |
| --text-link:var(--ui-colour-accent); | |
| --text-link-low-saturation:hsl(197,calc(var(--saturation-factor, 1)*100%),52.9%); | |
| --text-positive:hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%); | |
| --text-warning:hsl(38,calc(var(--saturation-factor, 1)*95.7%),54.1%); | |
| --text-danger:hsl(359,calc(var(--saturation-factor, 1)*82%),73.9%); | |
| --text-brand:hsl(235,calc(var(--saturation-factor, 1)*86.1%),77.5%); | |
| --interactive-normal:#b9bbbe; | |
| --interactive-hover:#dcddde; | |
| --interactive-active:#fff; | |
| --interactive-muted:#4f545c; | |
| --background-primary:var(--ui-colour-base); | |
| --background-secondary:var(--ui-colour-dark); | |
| --background-secondary-alt:var(--ui-colour-dark); | |
| --background-tertiary:var(--ui-colour-dark); | |
| --background-accent:var(--ui-colour-accent); | |
| --background-floating:#18191c; | |
| --background-nested-floating:var(--ui-colour-dark); | |
| --background-mobile-primary:var(--ui-colour-base); | |
| --background-mobile-secondary:var(--ui-colour-dark); | |
| --background-modifier-hover:rgba(79,84,92,0.4); | |
| --background-modifier-active:rgba(79,84,92,0.48); | |
| --background-modifier-selected:rgba(79,84,92,0.32); | |
| --background-modifier-accent:var(--ui-colour-dark); | |
| --info-positive-background:hsla(139,calc(var(--saturation-factor, 1)*47.3%),43.9%,0.1); | |
| --info-positive-foreground:hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%); | |
| --info-positive-text:var(--ui-colour-text); | |
| --info-warning-background:hsla(38,calc(var(--saturation-factor, 1)*95.7%),54.1%,0.1); | |
| --info-warning-foreground:hsl(38,calc(var(--saturation-factor, 1)*95.7%),54.1%); | |
| --info-warning-text:var(--ui-colour-text); | |
| --info-danger-background:hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.1); | |
| --info-danger-foreground:hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%); | |
| --info-danger-text:var(--ui-colour-text); | |
| --info-help-background:hsla(197,calc(var(--saturation-factor, 1)*100%),47.8%,0.1); | |
| --info-help-foreground:hsl(197,calc(var(--saturation-factor, 1)*100%),47.8%); | |
| --info-help-text:var(--ui-colour-text); | |
| --status-positive-background:hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); | |
| --status-positive-text:var(--ui-colour-text); | |
| --status-warning-background:hsl(38,calc(var(--saturation-factor, 1)*95.7%),54.1%); | |
| --status-warning-text:#000; | |
| --status-danger-background:hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%); | |
| --status-danger-text:var(--ui-colour-text); | |
| --status-danger:hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%); | |
| --status-positive:hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%); | |
| --status-warning:hsl(38,calc(var(--saturation-factor, 1)*95.7%),54.1%); | |
| --button-danger-background:hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%); | |
| --button-danger-background-hover:hsl(359,calc(var(--saturation-factor, 1)*56.3%),40.4%); | |
| --button-danger-background-active:hsl(359,calc(var(--saturation-factor, 1)*56.4%),35.1%); | |
| --button-danger-background-disabled:hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%); | |
| --button-positive-background:hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); | |
| --button-positive-background-hover:hsl(138,calc(var(--saturation-factor, 1)*46.8%),24.3%); | |
| --button-positive-background-active:hsl(138,calc(var(--saturation-factor, 1)*46.9%),22.2%); | |
| --button-positive-background-disabled:hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); | |
| --button-secondary-background:#4f545c; | |
| --button-secondary-background-hover:#686d73; | |
| --button-secondary-background-active:#72767d; | |
| --button-secondary-background-disabled:#4f545c; | |
| --button-outline-danger-text:var(--ui-colour-text); | |
| --button-outline-danger-border:hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%); | |
| --button-outline-danger-background:hsla(0,0%,100%,0); | |
| --button-outline-danger-background-hover:hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%); | |
| --button-outline-danger-text-hover:var(--ui-colour-text-hover); | |
| --button-outline-danger-border-hover:hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%); | |
| --button-outline-danger-background-active:hsl(359,calc(var(--saturation-factor, 1)*56.7%),48%); | |
| --button-outline-danger-text-active:var(--ui-colour-text-hover); | |
| --button-outline-danger-border-active:hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%); | |
| --button-outline-positive-text:var(--ui-colour-text-hover); | |
| --button-outline-positive-border:hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%); | |
| --button-outline-positive-background:hsla(0,0%,100%,0); | |
| --button-outline-positive-background-hover:hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); | |
| --button-outline-positive-text-hover:var(--ui-colour-text-hover); | |
| --button-outline-positive-border-hover:hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); | |
| --button-outline-positive-background-active:hsl(138,calc(var(--saturation-factor, 1)*46.8%),24.3%); | |
| --button-outline-positive-text-active:var(--ui-colour-text-hover); | |
| --button-outline-positive-border-active:hsl(138,calc(var(--saturation-factor, 1)*46.8%),24.3%); | |
| --button-outline-brand-text:var(--ui-colour-text-hover); | |
| --button-outline-brand-border:hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); | |
| --button-outline-brand-background:hsla(0,0%,100%,0); | |
| --button-outline-brand-background-hover:hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); | |
| --button-outline-brand-text-hover:var(--ui-colour-text-hover); | |
| --button-outline-brand-border-hover:hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); | |
| --button-outline-brand-background-active:hsl(235,calc(var(--saturation-factor, 1)*51.4%),52.4%); | |
| --button-outline-brand-text-active:var(--ui-colour-text-hover); | |
| --button-outline-brand-border-active:hsl(235,calc(var(--saturation-factor, 1)*51.4%),52.4%); | |
| --button-outline-primary-text:var(--ui-colour-text-hover); | |
| --button-outline-primary-border:#4f545c; | |
| --button-outline-primary-background:hsla(0,0%,100%,0); | |
| --button-outline-primary-background-hover:#4f545c; | |
| --button-outline-primary-text-hover:var(--ui-colour-text-hover); | |
| --button-outline-primary-border-hover:#4f545c; | |
| --button-outline-primary-background-active:#686d73; | |
| --button-outline-primary-text-active:var(--ui-colour-text-hover); | |
| --button-outline-primary-border-active:#686d73; | |
| --modal-background:var(--ui-colour-base); | |
| --modal-footer-background:var(--ui-colour-dark); | |
| --scrollbar-thin-thumb:var(--ui-colour-dark); | |
| --scrollbar-thin-track:transparent; | |
| --scrollbar-auto-thumb:var(--ui-colour-dark); | |
| --scrollbar-auto-track:var(--ui-colour-base); | |
| --scrollbar-auto-scrollbar-color-thumb:var(--ui-colour-dark); | |
| --scrollbar-auto-scrollbar-color-track:var(--ui-colour-dark); | |
| --input-background:var(--ui-colour-dark); | |
| --input-placeholder-text:hsl(216,calc(var(--saturation-factor, 1)*2.1%),53.9%); | |
| --elevation-stroke:0 0 0 1px rgba(4,4,5,0.15); | |
| --elevation-low:0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); | |
| --elevation-medium:0 4px 4px rgba(0,0,0,0.16); | |
| --elevation-high:0 8px 16px rgba(0,0,0,0.24); | |
| --logo-primary:var(--ui-colour-text-hover); | |
| --control-brand-foreground:hsl(235,calc(var(--saturation-factor, 1)*86.1%),77.5%); | |
| --control-brand-foreground-new:hsl(235,calc(var(--saturation-factor, 1)*86.1%),77.5%); | |
| --background-mentioned:hsla(38,calc(var(--saturation-factor, 1)*95.7%),54.1%,0.1); | |
| --background-mentioned-hover:hsla(38,calc(var(--saturation-factor, 1)*95.7%),54.1%,0.08); | |
| --background-message-hover:rgba(4,4,5,0.07); | |
| --background-message-automod:hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.05); | |
| --background-message-automod-hover:hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.1); | |
| --channels-default:#96989d; | |
| --channel-icon:#8e9297; | |
| --channel-text-area-placeholder:#72767d; | |
| --guild-header-text-shadow:0 1px 1px rgba(0,0,0,0.4); | |
| --channeltextarea-background:var(--ui-colour-dark); | |
| --activity-card-background:var(--ui-colour-dark); | |
| --textbox-markdown-syntax:#8e9297; | |
| --spoiler-revealed-background:#292b2f; | |
| --spoiler-hidden-background:var(--ui-colour-dark); | |
| --android-navigation-bar-background:#121315; | |
| --deprecated-card-bg:rgba(32,34,37,0.6); | |
| --deprecated-card-editable-bg:rgba(32,34,37,0.3); | |
| --deprecated-store-bg:var(--ui-colour-base); | |
| --deprecated-quickswitcher-input-background:#72767d; | |
| --deprecated-quickswitcher-input-placeholder:hsla(0,0%,100%,0.3); | |
| --deprecated-text-input-bg:var(--ui-colour-dark); | |
| --deprecated-text-input-border:rgba(0,0,0,0.3); | |
| --deprecated-text-input-border-hover:#040405; | |
| --deprecated-text-input-border-disabled:var(--ui-colour-dark); | |
| --deprecated-text-input-prefix:#dcddde | |
| } | |
| /* WHEN VARIABLES FAIL */ | |
| /* Header, Browse Channels, Forum */ | |
| .theme-dark .themed-Hp1KC_, .theme-dark .container-1um7CU, .container-3wLKDe { | |
| background:var(--ui-colour-base); | |
| } | |
| /* Header Gradient */ | |
| .theme-dark .children-3xh0VB:after { | |
| background:none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment