-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdiscord-pywal.css
164 lines (132 loc) · 7.3 KB
/
discord-pywal.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/**
* @name Wal Theme
* @author Gremious (and You! (and pywal))
* @version 1.0.0
* @description Generated by pywal.
* @source https://github.com/Gremious/discord-wal-theme-template
*/
:root {{
/* Colors are written this way so that you can do e.g. */
/* rgba(var(--wal-color-5-purple), 0.75); for opaticy */
/* Background is defined later, with various luminosities. */
--wal-foreground: {foreground.rgb};
--wal-cursor: {cursor.rgb};
--wal-color-0-black: {color0.rgb};
--wal-color-1-red: {color1.rgb};
--wal-color-2-green: {color2.rgb};
--wal-color-3-yellow: {color3.rgb};
--wal-color-4-blue: {color4.rgb};
--wal-color-5-purple: {color5.rgb};
--wal-color-6-cyan: {color6.rgb};
--wal-color-7-white: {color7.rgb};
--wal-color-8-bright-black: {color8.rgb};
--wal-color-9-bright-red: {color9.rgb};
--wal-color-10-bright-green: {color10.rgb};
--wal-color-11-bright-yellow: {color11.rgb};
--wal-color-12-bright-blue: {color12.rgb};
--wal-color-13-bright-purple: {color13.rgb};
--wal-color-14-bright-cyan: {color14.rgb};
--wal-color-15-bright-white: {color15.rgb};
/*
https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/
feat.
https://github.com/Frewacom/walfox/blob/master/src/utils/colors.ts#L21C50-L21C50
(which itself refers to)
https://www.sitepoint.com/javascript-generate-lighter-darker-color/
*/
/* pywalfox values, so that it's nice and matching */
--background-light-luminance: 1.25;
--background-extra-light-luminance: 1.85;
--wal-bg-red: calc({background.red} * 255);
--wal-bg-green: calc({background.green} * 255);
--wal-bg-blue: calc({background.blue} * 255);
--wal-red-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-light-luminance)))), 255);
--wal-green-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-light-luminance)))), 255);
--wal-blue-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-light-luminance)))), 255);
--wal-red-extra-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-extra-light-luminance)))), 255);
--wal-green-extra-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-extra-light-luminance)))), 255);
--wal-blue-extra-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-extra-light-luminance)))), 255);
--wal-background: var(--wal-bg-red), var(--wal-bg-green), var(--wal-bg-blue);
--wal-background-light: var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light);
--wal-background-extra-light: var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light);
}}
/* Text selection color, I just think it's cool. */
::selection {{
color: rgb(var(--wal-foreground));
background: rgb(var(--wal-background-extra-light));
}}
/* There is a weird shadow on the top buttons buttons. */
/* You can't actually see it in vanilla but it's there on colored. */
/* Can't seem to set --__header-bar-background which it uses, so selector it is. */
/* This feels like a generated name, hopefully it persists through updates. */
.theme-dark .children-3xh0VB:after {{
background: none;
}}
.theme-dark {{
/* This is nice, but I find it a bit harder to read text if it's any darker. */
/* --text-normal: rgb(var(--wal-foreground)); */
/* channel/dm names in sidebar */
--channels-default: rgb(var(--wal-foreground));
--background-primary: rgb(var(--wal-background));
/* forums/members page bg, maybe others */
--home-background: rgb(var(--wal-background));
/* Don't see it used much, but it's at least the bg in the app directory page in the server settings */
--primary-600: rgb(var(--wal-background));
/* Interactive buttons - pins, emote, channel settings cog, etc. */
--interactive-normal: rgb(var(--wal-foreground));
/* Interactable things with more attention - undread channel names,
* and text that you can click (thread message) */
--interactive-active: rgb(var(--wal-foreground));
/* Mostly default username color,
* and some little dots like the unread server indicator */
--header-primary: rgb(var(--wal-foreground));
/* Alternative gradient background, but you need to fix the top overlay too. */
/* --background-primary: linear-gradient(to top, rgb(var(--wal-background)), rgb(var(--wal-background-light))); */
/* --bg-overlay-2: rgb(var(--wal-foreground)); */
/* Lighter top bar also looks nice. Normally the same color as background primary. */
/* But you may need to disable overlay-3 below and color the searchbox. */
/* --bg-overlay-2: rgb(var(--wal-background-light)); */
/* The "Discord blue" color - main setting buttons, "x unread messages" tooltip, etc. */
/* pywalfox uses color 10 and 13 (as primary and secondary) on default settings, if you want parity. */
--brand-experiment: rgb(var(--wal-color-10-bright-green));
--button-secondary-background: rgb(var(--wal-background));
/* This guy just kinda overrides a bunch of stuff consistently, for free. */
/* Sidebar, search box, text box, etc. */
/* However, it makes the searchbox blend in if --bg-overlay-2 is set to the same light color. */
--bg-overlay-3: rgb(var(--wal-background-light));
/* Chat text box, overriden by the guy above if you use em. */
/* --channeltextarea-background: rgb(var(--wal-background-light)); */
/* Used for at least the searchbox, also overriden. */
/* --background-tertiary: rgb(var(--wal-background)); */
/* Still used for e.g. video embed/server folder background */
--background-secondary: rgb(var(--wal-background-light));
--background-secondary-alt: rgb(var(--wal-background-extra-light));
--background-floating: rgb(var(--wal-background));
--background-modifier-hover: rgba(0, 0, 0, 0.20);
--background-modifier-active: rgba(0, 0, 0, 0.25);
--background-modifier-selected: rgba(0, 0, 0, 0.30);
/* The scrollbar thumb may also looks good if you set it to e.g. pruple or blue. */
/* --scrollbar-auto-thumb: rgb(var(--wal-color-2-green)); */
--scrollbar-auto-thumb: rgb(var(--wal-background-extra-light));
/* The scrollbar track may also looks good if you set it to e.g. pruple or blue. */
/* --scrollbar-auto-track: rgba(var(--wal-color-2-green), 0.75); */
--scrollbar-auto-track: rgba(var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light), 0.75);
/* Used in settings, left side */
--scrollbar-thin-thumb: rgb(var(--wal-foreground));
/* Little dark side-bit when you click the search bar.*/
/* You can't actually see it in the default Discord theme? */
/* So we hide it cause you can deffo see it on any other color theme and it looks bad.*/
--search-popout-option-fade: 0;
/* Original noted here, cause it was a paint to get. */
/* --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),hsl(var(--primary-800-hsl)/1) 80%); */
--search-popout-option-fade-hover: linear-gradient(90deg, rgba(var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light), 0), var(--wal-background-extra-light) 50%);
/* original */
/* --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-600-hsl)/0),var(--primary-600) 50%); */
/* Idk anything abt these */
--background-mobile-primary: rgb(var(--wal-background));
--background-mobile-secondary: rgb(var(--wal-background-light));
}}
/* idk i don't use light theme sorry */
.theme-light {{
--text-normal: rgb(var(--wal-foreground));
}}