Skip to content

Commit aedcffa

Browse files
CovkieToxicAven
Covkie
and
ToxicAven
authored
Overhaul for visual refresh (#383)
* Overhaul for visual refresh Almost entirely powered by vars * more fixes, reactions * conflicts * Unified shared variables/split out contrast files Unified the variables lightfix uses Split out accent on text contrast fixes for dark themes Added missing variables * theme icons move recolour mixin * move to stop log spam * Vencord custom switches * Drag & Drop upload area * missing vars & tweaks fixed a missing comma changed thread icon colour codeblock background feedback vars * make lightfix more dynamic fixes some edge cases with specificity & some selectors in details not included under .light-theme * various fixes more dark contrast selectors online indicator settings quest page and forum gradients notice variables * mentions/channel links hovered contrast --------- Co-authored-by: Jade Herd <[email protected]>
1 parent f3acfe0 commit aedcffa

15 files changed

+645
-913
lines changed

‎build.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,16 @@ async function generateAccents(sourceFilePath) {
3838
});
3939
return Promise.all(
4040
accents.map((accent) =>
41-
generateAccent(sourceFileData, sourceFilePath, accent)
42-
)
41+
generateAccent(sourceFileData, sourceFilePath, accent),
42+
),
4343
);
4444
}
4545

4646
// replace brand and write to separate file
4747
async function generateAccent(sourceFileData, sourceFilePath, accent) {
4848
const modifiedFileContent = sourceFileData.replace(
4949
/\$brand: .*;/gm,
50-
`$brand: \$${accent};`
50+
`$brand: \$${accent};`,
5151
);
5252
const outputFileName = sourceFilePath
5353
.split(".")

‎src/_theme.scss‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
1+
// modified from https://stackoverflow.com/a/62880368
2+
@mixin recolor($color: #000) {
3+
filter: url('data:image/svg+xml;utf8,\
4+
<svg xmlns="http://www.w3.org/2000/svg">\
5+
<filter id="ctp-recolor" color-interpolation-filters="sRGB">\
6+
<feColorMatrix type="matrix" values="\
7+
0 0 0 0 #{math.div(red($color), 255)}\
8+
0 0 0 0 #{math.div(green($color), 255)}\
9+
0 0 0 0 #{math.div(blue($color), 255)}\
10+
0 0 0 1 0\
11+
"/>\
12+
</filter>\
13+
</svg>\
14+
#ctp-recolor');
15+
}
16+
117
@import "components/variables";
218

319
@import "components/icons-bgImg";
420
@import "components/icons-imgContent";
521
@import "components/icons-svgBg";
622
@import "components/icons-svgColor";
723

8-
@import "components/buttons";
24+
// @import "components/buttons";
925

10-
@import "components/pages";
26+
// @import "components/pages";
1127

12-
@import "components/navbar";
13-
@import "components/sidebar";
28+
// @import "components/navbar";
29+
// @import "components/sidebar";
1430

15-
@import "components/chat";
31+
// @import "components/chat";
1632

17-
@import "components/popouts";
33+
// @import "components/popouts";
1834

1935
@import "components/details";

‎src/catppuccin-frappe.theme.scss‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,23 @@
1212
@use "@catppuccin/palette/scss/frappe" as *;
1313
@use "@catppuccin/highlightjs/sass/theme";
1414

15-
$brand: $blue;
15+
.theme-dark,
16+
.visual-refresh.theme-dark,
17+
.visual-refresh .theme-dark {
18+
$brand: $blue;
1619

17-
:root .theme-light {
18-
@import "@catppuccin/palette/scss/latte";
19-
@import "components/lightfix";
20-
}
20+
@import "components/contrast-dark";
21+
@import "theme";
2122

22-
@import "theme";
23-
.theme-dark {
2423
@include theme.highlights("frappe");
2524
}
25+
26+
.theme-light,
27+
.visual-refresh.theme-light,
28+
.visual-refresh .theme-light {
29+
@import "@catppuccin/palette/scss/latte";
30+
$brand: $blue;
31+
32+
@import "components/tweak-light";
33+
@import "theme";
34+
}

‎src/catppuccin-latte.theme.scss‎

Lines changed: 13 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,63 +12,23 @@
1212
@use "@catppuccin/palette/scss/latte" as *;
1313
@use "@catppuccin/highlightjs/sass/theme";
1414

15-
$brand: $blue;
16-
17-
:root .theme-dark {
15+
.theme-dark,
16+
.visual-refresh.theme-dark,
17+
.visual-refresh .theme-dark {
1818
@import "@catppuccin/palette/scss/mocha";
19-
@import "components/lightfix";
20-
21-
nav[class*="guilds-"].theme-dark {
22-
@import "@catppuccin/palette/scss/mocha";
23-
24-
// server icons
25-
foreignObject > div[data-list-item-id^="guildsnav_"] {
26-
background-color: lighten($base, 2%);
27-
28-
&:hover,
29-
&[class*="selected"] {
30-
> div[class^="childWrapper"] {
31-
color: $crust;
32-
font-weight: 600;
33-
}
34-
}
35-
}
19+
$brand: $blue;
3620

37-
// lightens home nav bg
38-
div[data-list-item-id="guildsnav___home"] {
39-
--background-primary: #{lighten($base, 3%)};
40-
}
41-
42-
// lightens folder wrapper bg
43-
span[class^="expandedFolderBackground"] {
44-
background-color: lighten($base, 3%);
45-
}
46-
div[class^="folder"][class*="hover-"] {
47-
background-color: lighten($base, 8%);
48-
}
49-
50-
// create server/discovery
51-
div[data-list-item-id="guildsnav___create-join-button"] svg > path,
52-
div[data-list-item-id="guildsnav___guild-discover-button"] svg > path {
53-
fill: $green;
54-
}
21+
@import "components/contrast-dark";
22+
@import "theme";
23+
}
5524

56-
// server list icons
57-
div[class^="upperBadge"] {
58-
> div[class^="iconBadge"] {
59-
path {
60-
color: $base;
61-
}
62-
}
25+
.theme-light,
26+
.visual-refresh.theme-light,
27+
.visual-refresh .theme-light {
28+
$brand: $blue;
6329

64-
div[class*="participating-"] {
65-
background: $green;
66-
}
67-
}
68-
}
69-
}
30+
@import "components/tweak-light";
31+
@import "theme";
7032

71-
@import "theme";
72-
.theme-dark {
7333
@include theme.highlights("latte");
7434
}

‎src/catppuccin-macchiato.theme.scss‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,23 @@
1212
@use "@catppuccin/palette/scss/macchiato" as *;
1313
@use "@catppuccin/highlightjs/sass/theme";
1414

15-
$brand: $blue;
15+
.theme-dark,
16+
.visual-refresh.theme-dark,
17+
.visual-refresh .theme-dark {
18+
$brand: $blue;
1619

17-
:root .theme-light {
18-
@import "@catppuccin/palette/scss/latte";
19-
@import "components/lightfix";
20-
}
20+
@import "components/contrast-dark";
21+
@import "theme";
2122

22-
@import "theme";
23-
.theme-dark {
2423
@include theme.highlights("macchiato");
2524
}
25+
26+
.theme-light,
27+
.visual-refresh.theme-light,
28+
.visual-refresh .theme-light {
29+
@import "@catppuccin/palette/scss/latte";
30+
$brand: $blue;
31+
32+
@import "components/tweak-light";
33+
@import "theme";
34+
}

‎src/catppuccin-mocha.theme.scss‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,23 @@
1212
@use "@catppuccin/palette/scss/mocha" as *;
1313
@use "@catppuccin/highlightjs/sass/theme";
1414

15-
$brand: $blue;
15+
.theme-dark,
16+
.visual-refresh.theme-dark,
17+
.visual-refresh .theme-dark {
18+
$brand: $blue;
1619

17-
:root .theme-light {
18-
@import "@catppuccin/palette/scss/latte";
19-
@import "components/lightfix";
20-
}
20+
@import "components/contrast-dark";
21+
@import "theme";
2122

22-
@import "theme";
23-
.theme-dark {
2423
@include theme.highlights("mocha");
2524
}
25+
26+
.theme-light,
27+
.visual-refresh.theme-light,
28+
.visual-refresh .theme-light {
29+
@import "@catppuccin/palette/scss/latte";
30+
$brand: $blue;
31+
32+
@import "components/tweak-light";
33+
@import "theme";
34+
}

‎src/components/_chat.scss‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -694,23 +694,3 @@ div[class^="upperContainer"] div[class^="akaBadge"] {
694694
background-color: $brand;
695695
color: $crust;
696696
}
697-
698-
// system message icons
699-
div[class^="message"][class*="isSystemMessage"] div[class^="icon"] {
700-
// User Joined icon
701-
&[style*="/assets/b754caa743f8c49fbbf0.svg"],
702-
// Answered call icon
703-
&[style*="/assets/d750b80048af0194841b.svg"] {
704-
@include recolor($green);
705-
}
706-
707-
// Missed call icon
708-
&[style*="/assets/27552340cbc7f06073e6.svg"] {
709-
@include recolor($subtext0);
710-
}
711-
712-
// User left icon
713-
&[style*="/assets/27552340cbc7f06073e6.svg"] {
714-
@include recolor($red);
715-
}
716-
}

‎src/components/_contrast-dark.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Catppuccin's dark flavour's accents have bad contrast with $text so swap to $crust
2+
// Light accents contrast is ok! (rare latte win)
3+
4+
div[class^="item_"][class*="addFriend_"],
5+
div[class*="numberBadge_"],
6+
div[class^="bar_"][class*="unreadMentionsBar_"],
7+
span[class*="botTag_"],
8+
div[class^="iconBadge_"],
9+
span[class^="unreadPill_"],
10+
div[class^="listItem_"] div[class^="wrapper_"] [class*="selected_"], // Server list entries with no icons (Home/Add server/Discover etc)
11+
button[class^="container_"]>div[class^="icon_"]>svg, // Add Friend Page Discoverable Servers svg
12+
div[class^="newBadge_"],
13+
div[class^="premiumTab_"][class*="selected_"], // Nitro tab selected in settings
14+
label[class^="checkboxWrapper_"], label[class^="checkboxWrapperDisabled_"], div[class^="checkbox_"][class*="box_"],
15+
svg[class^="checkmarkCircle"],
16+
button[class*="button_"][class*="lookFilled_"][class*="colorRed_"],
17+
button[class*="button_"][class*="lookFilled_"][class*="colorGreen_"],
18+
button[class*="button_"][class*="lookFilled_"][class*="colorLink_"],
19+
button[class*="colorable_"][class*="join_"], // Vc join buttons
20+
svg[class^="status_"], // Vc status (mute/deafen)
21+
svg[class^="dots_"], // typing indicator
22+
div[class*="textBadge_"][class*="base_"],
23+
svg[class^="descriptionIcon_"],
24+
div[class*="winButtonClose_"]:hover,
25+
div[class^="uploadArea_"],
26+
svg[class^="stepIcon_"],
27+
svg[class^="activeIcon_"], // Account switcher
28+
div[class*="tooltipBrand_"],
29+
[class*="colorBrand_"], [class*="colorStreamerMode_"], [class*="colorSpotify_"], [class*="colorPremium_"], [class*="colorPlayStation_"],
30+
.interactive:hover {
31+
--white: #{$crust};
32+
--white-500: #{$crust};
33+
}
34+
35+
svg[class^="radioIndicator_"] [class*="refreshIcon_"] {
36+
fill: #{$crust};
37+
}
38+
div[class^="automodText_"] {
39+
color: #{$crust};
40+
}
41+
42+
// Forum pin icon
43+
div[class^="pinIcon_"] > svg > path {
44+
fill: #{$crust};
45+
}
46+
47+
// Server settings Members banner
48+
div[class^="bannerContainer_"] {
49+
[style*="color: white"] {
50+
color: #{$crust} !important;
51+
}
52+
}

0 commit comments

Comments
 (0)