Skip to content

Instantly share code, notes, and snippets.

@llsc12
Last active May 2, 2023 19:23
Show Gist options
  • Select an option

  • Save llsc12/16c7067f97867fafde2d2c6c0dd5cd1d to your computer and use it in GitHub Desktop.

Select an option

Save llsc12/16c7067f97867fafde2d2c6c0dd5cd1d to your computer and use it in GitHub Desktop.
Accent Color, changes discord's blurple accent color.
/* Change Discord accent color */
:root {
/* Change these two colors to the same value */
/* take a hsl color like 177°, 94%, 51% */
/* it becomes 177 calc(var(--saturation-factor, 1)*94%) 94% */
/* then put that color in both the variables below! */
--brand-500-hsl: 354 calc(var(--saturation-factor, 1)*70%) 74%;
--brand-360-hsl: 354 calc(var(--saturation-factor, 1)*70%) 74%;
/* Don't mess with these */
/* some extra overrides */
--brand-experiment-560: var(--brand-experiment-85a);
--brand-experiment-600: var(--brand-experiment-70a);
/* override ping colors */
--mention-background: var(--brand-experiment-20a);
--mention-foreground: var(--brand-experiment-95a);
}
/* edits reaction colors based on branding colors */
div[class*="reactionInner"][aria-pressed="false"] {
background-color: var(--brand-experiment-20a);
border-radius: 0.5rem;
}
div[class*="reactionInner"][aria-pressed="true"] {
background-color: var(--brand-experiment-600);
border-radius: 0.4rem;
}
.channelMention > .channelWithIcon {
color: var(--brand-experiment-600);
}
div[class*="messagesPopoutWrap"] .mention {
color: var(--brand-experiment-360);
}
/* end of accent color change */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment