Skip to content

Instantly share code, notes, and snippets.

@natyusha

natyusha/discord.css

Last active March 11, 2023 13:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save natyusha/732e4082bad12de2cf29265126d98e1d to your computer and use it in GitHub Desktop.
Save natyusha/732e4082bad12de2cf29265126d98e1d to your computer and use it in GitHub Desktop.
Download ZIP
Discord CSS
Raw
discord.css
/* 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