Last active
May 2, 2023 19:23
-
-
Save llsc12/16c7067f97867fafde2d2c6c0dd5cd1d to your computer and use it in GitHub Desktop.
Accent Color, changes discord's blurple accent color.
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
| /* 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