-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathBetterDarkzX.theme.css
259 lines (211 loc) · 9.61 KB
/
BetterDarkzX.theme.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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
/**
* @name BetterDarkzX
* @description Discord Theme on the Dark mode with multi addons
* @author JN03
* @version 1.4.x
* @authorId 2354831939099688962
* @source https://github.com/JNDEV03/BetterDarkzX
* @website https://jndev03.github.io/BetterDarkzX/
* @invite xJczTNHM3F
*/
/* DONT TOUCH THIS!!! */
@import url("https://jndev03.github.io/BetterDarkzX/main.css");
/*Fuction BetterDarkzX 2.0 ( Enable by default - Version 1.4.x+ Only ) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/TestNets.css");
/* Read this before editing stuff!!!
*
* > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments.
* (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments
*
* > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS.
*
* > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com
*/
/* ====== Optional Addons ====== */
@import url("https://jndev03.github.io/BetterDarkzX/addons/revert-rebrand.css");
/* VSCode User Area, get Visual Studio like user area (Enabled by default)
note: this addons doesn't works well with Compact Mode addon,
please disable this when using Compact Mode addon */
@import url("https://jndev03.github.io/BetterDarkzX//addons/vscode-user-area.css");
/* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/syntax-highlight.css");
/* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/username-background.css");
/* Mac Like Titlebar (windows only), get mac style titlebar on windows client (Enabled by default) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/mac-titlebar.css");
/* Compact Mode, hide some UI part on specific windows size,
<920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/compact-mode.css");
/* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */
@import url("https://jndev03.github.io/BetterDarkzX/addons/monospace-fonts.css");
/* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */
/* @import url("https://jndev03.github.io/BetterDarkzX/addons/square-avatar.css"); */
/* Radialstatus theme addons - change status ( online idle dnd ofline ) to an proflle icon color (Disabled by default) */
/*@import url("https://jndev03.github.io/BetterDarkzX/addons/RadialStatus.css"); */
/* ServerColumns theme addons - change the server & folder in to the columns (Disabled by default) */
/*@import url(https://jndev03.github.io/BetterDarkzX/addons/ServerColumns.css); */
/* Emoji - windows 11 (Enable by default) */
@import url(https://jndev03.github.io/BetterDarkzX/addons/windown11-emoji.css);
@import url(https://jndev03.github.io/BetterDarkzX/addons/bdAddonMini.css);
/* opotion theme */
/*Background*/
/* ==== Discord Variables ==== */
:root {
--rs-small-spacing: 2px; /* Gap between avatar and status for members list/dms | MUST end in px */
--rs-medium-spacing: 3px; /* Gap between avatar and status for User popout | MUST end in px */
--rs-large-spacing: 4px; /* Gap between avatar and status for User profiles | MUST end in px */
--rs-small-width: 2px; /* Thickness of status border for members list/dms | MUST end in px */
--rs-medium-width: 3px; /* Thickness of status border for User popout | MUST end in px */
--rs-large-width: 4px; /* Thickness of status border for User profile | MUST end in px */
--rs-avatar-shape: 50%; /* 50% for round - 0% for square */
--rs-online-color: #43b581; /* Colour for online status */
--rs-idle-color: #faa61a; /* Colour for idle status */
--rs-dnd-color: #f04747; /* Colour for dnd status */
--rs-offline-color: #636b75; /* Colour for offline status */
--rs-streaming-color: #643da7; /* Colour for streaming status */
--rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */
--rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone | */
--rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */
--columns: 3; /* default: 3 (amount of servercolumns) */
--guildsize: 50; /* default: 50 (serversize in pixel) */
--guildgap: 3; /* default: 3 (top/bottom gap between servers in pixel) */
--aligndms: 0; /* default: 0 (should DMs be aligned in columns: 0 = no, 1 = yes) */
--accent-hue: 213;
--accent-saturation: 100%;
--accent-brightness: 50%;
--background-accent-hue: 213;
--background-accent-saturation: 0%;
--background-accent-brightness: 0%;
/* window */
--window-background-image: initial;
--window-background-image-position: center;
--window-background-image-attachment: fixed;
--window-opacity: 100%;
--window-blur: 0;
--window-friends-blur: 0;
--window-margin: 24;
--window-margin-left: 0;
--window-border-radius: 10px;
--window-background-lightness: 0;
--window-accent-tint-strength: 5%;
/* chat */
--chat-bubble: 0;
--chat-bubble-background-color: var(--background-primary);
--chat-bubble-border-color: var(--background-primary-border-color);
--text-link-hue: 212;
--chat-text-brightness: 0;
/* sidebar */
--sidebar-width: 240px;
--members-width: 240px;
--sidebar-text-brightness: 0;
/* floating */
--background-floating-blur: 20px;
--floating-background-lightness: 0;
--background-floating-opacity: 1;
--enable-floating-transparency: 1;
/* other */
--enable-blur: 1;
}
}
.theme-dark { /* Dark Mode */
/* Header Color */
--header-primary: var(--text-normal);
--header-secondary: var(--text-muted);
/* Text Color */
--text-normal: #b1bae6;
--text-muted: #565f89;
--interactive-normal: #5f647e;
--interactive-hover: #a2a6c2;
--interactive-active: #b5bad1;
--interactive-muted: #55576b;
/* Background Color */
--background-primary: #1a1b26;
--background-secondary: #171722;
--background-secondary-alt: #13131a;
--background-tertiary: #16161e;
--background-tertiary-alt: var(--background-secondary-alt);
--background-accent: #434461;
--background-floating: #161620;
--background-modifier-hover: #212331c0;
--background-modifier-active: #282a3680;
--background-modifier-selected: #24263171;
--background-modifier-accent: #1e1e29;
--background-mentioned: #252836;
--border-mentioned: #474c64;
--background-mentioned-hover: #2f3344;
--accent-color: #7aa2f7;
/* Folder Color */
--folder-color: #202332d0;
--folder-color-light: #2f3342d0;
/* Scrollbars Color */
--scrollbar-thin-thumb: transparent;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #2b2b46af;
--scrollbar-auto-thumb-hover: #27273d85;
--scrollba-auto-track: transparent;
--scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
--scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);
/* Chat Box Color */
--channeltextarea-background: var(--background-secondary);
--channeltextarea-background-hover: var(--background-tertiary);
/* Square avatar addons */
--avatar-roundess: 5px;
/* Mac Titlebar addons */
--close-button-color: #e92a2ade;
--maximize-button-color: #f7bc1bde;
--minimize-button-color: #12db33de;
--button-position: row;
}
.theme-light { /* Light Mode */
/* Header Color */
--header-primary: var(--text-normal);
--header-secondary: var(--text-muted);
/* Text Color */
--text-normal: #2e3338;
--text-muted: #747f8d;
--interactive-normal: #4c505e;
--interactive-hover: #404350;
--interactive-active: #373a44;
--interactive-muted: #77797c;
/* Background Color */
--background-primary: #d5d6db;
--background-secondary: #cecfd4;
--background-secondary-alt: #b6b7bd;
--background-tertiary: #c5c6cc;
--background-tertiary-alt: #bbbbc2;
--background-accent: #9ca3bb;
--background-floating: #c2c2c9;
--background-mentioned: #c4c7da;
--background-modifier-hover: #2c2a2a25;
--background-modifier-active: #5a525229;
--background-modifier-selected: #555e693d;
--background-modifier-accent: #06060714;
--border-mentioned: #a9afcf;
--background-mentioned-hover: #cfd2e9;
--accent-color: #365aaa;
/* Folder Color */
--folder-color: #a7a6a6d0;
--folder-color-light: #afafafd0;
/* Input Box Color */
--input-box-bg: #c2c2c7;
--input-box-border: #b3b4b8;
--input-box-border-focus: #959699;
/* Scrollbars Color */
--scrollbar-thin-thumb: transparent;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #a0a0a0af;
--scrollbar-auto-thumb-hover: #77777785;
--scrollbar-auto-track: transparent;
--scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
--scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);
/* Chat Box Color */
--channeltextarea-background: var(--background-secondary);
--channeltextarea-background-hover: var(--background-tertiary);
/* Square avatar addons */
--avatar-roundess: 5px;
/* Mac Titlebar addons */
--close-button-color: #e92a2ade;
--maximize-button-color: #f7bc1bde;
--minimize-button-color: #12db33de;
--button-position: row;
}