Skip to content

Commit 0fcfe2e

Browse files
cxnteredcxntered
authored
fix: update styles for discord update (#427)
* 🚧 wip: initial pass on updated styles * 🐛 fix: mark as read button background * 🐛 fix: critical button background * 🐛 fix: brand button styles * 🐛 fix: vc action buttons color (#425) don't know how performant this is, but it works ig * 🐛 fix: toast icons * 🐛 fix: chat bar icons * 🐛 fix: connect button text * 🐛 fix: channel list colors * ♻️ refactor: optimize some selectors * 🐛 fix: vc controls * 🐛 fix: radio buttons * 🐛 fix: flower star icon contrast changes boosted discoverable/community icons (contrast was already fine), but oh well * ✨ feature: change platform indicator colors fixes #429 dislike that we have to do it this way (they recently refactored to use img tags) but it is what it is. only works for vencord, and requires >=v1.13.10 * 🐛 fix: remove unused variables * 🐛 fix: legacy settings items * 🐛 fix: vencord styles * 🐛 fix: badge colors * 🐛 fix: misc fixes * 🐛 fix: file icons colors slightly changed to avoid color clipping with different accents, but contrast may not be the best * ♻️ refactor: overhaul file icons recolor all file types, better colors (works with light mode), recolors icon in uploading message * 🐛 fix: modal footer * 🐛 fix: online indicator colors * 🐛 fix: mention bar contrast * 🐛 fix: update platform indicators vencord reverted changes, requires >=v1.13.12 * ♻️ refactor: increase class selector specificity * 🐛 fix: checkbox contrast * 🐛 fix: connect button colors * ♻️ refactor: update removed variables * 🐛 fix: rainbow thread colors
1 parent 1b2dffb commit 0fcfe2e

File tree

9 files changed

+257
-285
lines changed

9 files changed

+257
-285
lines changed

‎src/components/_details.scss‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
$svg-platform-colors: (
2-
//online indicators (not var based)
3-
$yellow: #ca9654,
4-
$red: #d83a42,
5-
$green: #43a25a,
6-
$overlay1: #82838b,
7-
"var(--twitch)": #9147ff
1+
// online indicators (not var based)
2+
$online-indicators: (
3+
#45a366: $green,
4+
#ffc04e: $yellow,
5+
#da3e44: $red,
6+
#84858d: $overlay1,
7+
#9147ff: var(--twitch),
88
);
9-
@each $var, $color in $svg-platform-colors {
9+
@each $color, $var in $online-indicators {
1010
svg [fill="#{$color}"],
1111
svg[fill="#{$color}"] {
1212
fill: #{$var};
@@ -17,20 +17,18 @@ $svg-platform-colors: (
1717
}
1818
}
1919

20-
div[class^="newMessagesBar_"] {
20+
div[class*="-newMessagesBar"] {
2121
--white: #{$crust};
22-
--button-secondary-background: var(--brand);
23-
--button-secondary-background-hover: var(--brand-530);
22+
--control-secondary-background-default: var(--brand-500);
23+
--control-secondary-background-hover: var(--brand-530);
2424
}
2525

26-
div[class^="expandedFolderBackground_"] {
26+
span[class$="-folderGroupBackground"] {
2727
--background-mod-subtle: #{$mantle} !important;
2828
}
2929

3030
// Switches
31-
// Literally a single switch doesnt have the parent control_ class... so annoying
32-
// div[class^="container_"][style*="opacity: 1; background-color:"]
33-
div[class^="control_"] > div[class^="container_"] {
31+
div[class$="-control"] > div[data-toggleable-component="switch"] {
3432
background-color: #{$surface2} !important;
3533
transition: background-color 0.2s;
3634

@@ -45,7 +43,7 @@ div[class^="control_"] > div[class^="container_"] {
4543
}
4644
}
4745

48-
&[class*="checked_"] {
46+
&[class*="-checked"] {
4947
background-color: var(--brand-500) !important;
5048

5149
> svg {
@@ -60,21 +58,21 @@ div[class^="control_"] > div[class^="container_"] {
6058
}
6159

6260
// Vencord custom switches
63-
div[class^="vc-addon-card"] > div div[class^="container_"] {
61+
div.vc-switch-container {
6462
--primary-400: #{$surface2};
65-
transition: background-color 0.2s;
66-
> svg > rect {
63+
64+
svg.vc-switch-slider > rect {
6765
fill: var(--white);
6866
transition: fill 0.2s;
6967
}
7068

71-
&[class*="checked_"] > svg > rect {
69+
&.vc-switch-checked > svg.vc-switch-slider > rect {
7270
fill: #{$crust};
7371
}
7472
}
7573

7674
// system message icons
77-
div[class^="message"][class*="isSystemMessage"] div[class^="icon"] {
75+
div[class*="-message"][class$="-isSystemMessage"] div[class*="-icon"] {
7876
// User Joined icon
7977
&[style*="/assets/61ccab047dad737a.svg"] {
8078
@include recolor($green);
@@ -95,16 +93,16 @@ div[class^="message"][class*="isSystemMessage"] div[class^="icon"] {
9593
}
9694
}
9795

98-
img[class*="maskIcon"][src*="/assets/c8ae30e56eb87fdf.svg"] {
96+
img[class*="-maskIcon"][src*="/assets/c8ae30e56eb87fdf.svg"] {
9997
@include recolor($crust);
10098
}
10199

102-
i[class^="check_"] {
100+
i[class*="-check"] {
103101
@include recolor($brand);
104102
}
105103

106104
// Quests page gradient
107-
div[class^="overlay_"][class*="darkThemeGradient_"] {
105+
div[class*="-overlay"][class*="-darkThemeGradient"] {
108106
background: linear-gradient(
109107
0deg,
110108
#{$base} 0,
@@ -114,41 +112,42 @@ div[class^="overlay_"][class*="darkThemeGradient_"] {
114112
}
115113

116114
// Forum tags and gallery gradient
117-
div[class^="textContentFooter_"] {
115+
div[class$="-textContentFooter"] {
118116
background: linear-gradient(
119117
0deg,
120118
$base,
121119
rgba($surface0, 0.97) 36px,
122120
rgba($surface1, 0.4)
123121
) !important;
124-
[class*="tagPill_"] {
122+
[class$="-tagPill"] {
125123
background-color: #{rgba($surface1, 0.9)};
126124
}
127125
}
128126
// Forum new badge / OP tag
129-
div[class^="newBadge_"][class*="textBadge_"][style="background-color: var(--brand-260);"],
130-
span[class*="botTagOP_"] {
131-
color: var(--badge-brand-text);
127+
div[class*="-newBadge"][class*="-textBadge"][style="background-color: var(--brand-260);"],
128+
span[class*="-botTagOP"] {
129+
background-color: var(--brand-500) !important;
130+
color: var(--white);
132131
}
133132

134-
div[class^="quickSelectPopoutOption_"]:hover[role="option"] {
135-
background-color: var(--background-modifier-hover);
133+
div[class*="-quickSelectPopoutOption"]:hover[role="option"] {
134+
background-color: var(--interactive-background-hover);
136135
}
137136

138137
// VC controls
139-
[class*="greenGlow_"] {
138+
[class*="-greenGlow"] {
140139
background: #{adjust-color($green, $alpha: -0.9)};
141140
&:hover {
142141
background: #{adjust-color($green, $alpha: -0.8)};
143142
}
144143
}
145-
[class*="redGlow_"] {
144+
[class*="-redGlow"] {
146145
background: #{adjust-color($red, $alpha: -0.9)};
147146
&:hover {
148147
background: #{adjust-color($red, $alpha: -0.8)} !important;
149148
}
150149
}
151-
button[class^="experimentButton_"][class*="buttonColor_"][class*="buttonActive_"] {
150+
button[class*="-experimentButton"][class*="-buttonColor"][class*="-buttonActive"] {
152151
background-color: #{adjust-color($green, $alpha: -0.9)};
153152
border: 1px solid #{adjust-color($green, $alpha: -0.9)};
154153
&:hover {
@@ -162,8 +161,16 @@ button[class^="experimentButton_"][class*="buttonColor_"][class*="buttonActive_"
162161
}
163162

164163
// Search bar and text input borders follow accent
165-
div[class*="container_"]:focus-within:has(> div[class^="inner_"] > input),
166-
[class*="input_"][type="text"]:not([readOnly]):focus,
167-
[class*="input_"][type="text"]:not([readOnly]):focus:hover {
164+
div[class*="-container"]:focus-within:has(> div[class*="-inner"] > input),
165+
[class*="-input"][type="text"]:not([readOnly]):focus,
166+
[class*="-input"][type="text"]:not([readOnly]):focus:hover {
168167
--text-link: var(--brand-500);
169168
}
169+
170+
// Toast icons
171+
div[class$="-toast"][data-type="success"] {
172+
--status-positive: #{$base};
173+
}
174+
div[class$="-toast"][data-type="failure"] {
175+
--status-danger: #{$base};
176+
}

‎src/components/_sidebar.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@
66
// }
77
& {
88
--thread-default: var(--ctp-rainbow-thread-disabled) var(--channels-default);
9-
--thread-core: var(--ctp-rainbow-thread-disabled) var(--text-primary);
9+
--thread-core: var(--ctp-rainbow-thread-disabled) var(--text-default);
1010
--thread-muted: var(--ctp-rainbow-thread-disabled) var(--interactive-muted);
1111
}
1212

1313
@mixin rainbow-vars($colour) {
1414
--channels-default: var(--thread-default, #{fade-out($colour, 0.3)});
15-
--text-primary: var(--thread-core, #{$colour});
16-
--interactive-hover: var(--thread-core, #{$colour});
17-
--interactive-active: var(--thread-core, #{$colour});
15+
--interactive-text-hover: var(--thread-default, #{$colour});
16+
--interactive-text-active: var(--thread-default, #{$colour});
17+
--text-strong: var(--thread-default, #{$colour});
18+
--text-default: var(--thread-core, #{$colour});
1819
--interactive-muted: var(--thread-muted, #{mix($colour, $crust, 50%)});
1920
}
2021

@@ -38,8 +39,8 @@
3839
@return $output;
3940
}
4041

41-
ul[class^="content_"] > li[class^="container_"] > ul[role="group"] {
42-
& > div[class^="spineBorder"] {
42+
ul[class*="-content"] > li[class*="-container"] > ul[role="group"] {
43+
& > div[class$="-spineBorder"] {
4344
// Account for UI Density setting
4445
// 30px is the size of each spline section
4546
// density padding is either 20px, 24px or 28px. get the padding px count

0 commit comments

Comments
 (0)