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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
|
{
config,
lib,
...
}:
{
config =
lib.mkIf (config.programs.vesktop.enable && config.beeMods.windowManagers.beeConfig.enable)
{
xdg.configFile = {
"matugen/templates/discord-system24.css" = {
text = ''
/**
* @name system24-matugen
* @description a tui-style discord theme. Matugen Material UI + Original Base Colors.
* @author refact0r
* @version 2.0.0
* @invite nz87hXyvcy
* @website https://github.com/refact0r/system24
* @source https://github.com/refact0r/system24/blob/master/theme/system24.theme.css
*/
/* import theme modules */
@import url("https://refact0r.github.io/system24/build/system24.css");
body {
/* font options */
--font: "monospace";
--code-font: "monospace";
font-weight: 300;
letter-spacing: -0.05ch;
/* sizes */
--gap: 12px;
--divider-thickness: 4px;
--border-thickness: 2px;
--border-hover-transition: 0.2s ease;
/* animation/transition options */
--animations: off;
--list-item-transition: 0.2s ease;
--dms-icon-svg-transition: 0.4s ease;
/* top bar options */
--top-bar-height: var(--gap);
--top-bar-button-position: titlebar;
--top-bar-title-position: off;
--subtle-top-bar-title: off;
/* window controls */
--custom-window-controls: off;
--window-control-size: 14px;
/* dms button options */
--custom-dms-icon: off;
--dms-icon-svg-url: url("");
--dms-icon-svg-size: 90%;
--dms-icon-color-before: var(--icon-subtle);
--dms-icon-color-after: var(--white);
--custom-dms-background: off;
--dms-background-image-url: url("");
--dms-background-image-size: cover;
--dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2));
/* background image options */
--background-image: off;
--background-image-url: url("");
/* transparency/blur options */
--transparency-tweaks: off;
--remove-bg-layer: off;
--panel-blur: off;
--blur-amount: 12px;
--bg-floating: var(--bg-3);
/* other options */
--small-user-panel: on;
/* unrounding options */
--unrounding: on;
/* styling options */
--custom-spotify-bar: on;
--ascii-titles: on;
--ascii-loader: system24;
/* panel labels */
--panel-labels: on;
--label-color: var(--text-muted);
--label-font-weight: 500;
}
/* color options */
:root {
--colors: on;
/* text colors - mapped to matugen safe hex */
--text-0: var(--bg-4);
--text-1: {{colors.on_surface.default.hex}};
--text-2: {{colors.on_surface.default.hex}};
--text-3: {{colors.on_surface_variant.default.hex}};
--text-4: {{colors.outline.default.hex}};
--text-5: {{colors.outline_variant.default.hex}};
/* background colors - mapped to matugen safe hex */
--bg-1: {{colors.surface_variant.default.hex}};
--bg-2: {{colors.surface_container_high.default.hex}};
--bg-3: {{colors.surface_container_low.default.hex}};
<* if {{ is_dark_mode }} *>
--bg-4: {{colors.surface.default.hex}};
<* else *>
--bg-4: {{colors.surface_container_low.default.hex}};
<* endif *>
/* hovers - using on_surface hex + CSS hex opacity (1a=10%, 33=20%, 4d=30%) */
--hover: {{colors.on_surface.default.hex}}1a;
--active: {{colors.on_surface.default.hex}}33;
--active-2: {{colors.on_surface.default.hex}}4d;
--message-hover: var(--hover);
/* accent colors - Replaced with Matugen Colors */
--accent-1: {{colors.tertiary.default.hex}};
--accent-2: {{colors.primary.default.hex}};
--accent-3: {{colors.primary.default.hex}};
--accent-4: {{colors.primary_container.default.hex}};
--accent-5: {{colors.primary_fixed_dim.default.hex}};
--accent-new: {{colors.error.default.hex}};
/* Math kept identical, only source colors swapped to Matugen */
--mention: linear-gradient(to right, color-mix(in hsl, {{colors.primary.default.hex}}, transparent 90%) 40%, transparent);
--mention-hover: linear-gradient(to right, color-mix(in hsl, {{colors.primary.default.hex}}, transparent 95%) 40%, transparent);
--reply: linear-gradient(to right, color-mix(in hsl, {{colors.on_surface_variant.default.hex}}, transparent 90%) 40%, transparent);
--reply-hover: linear-gradient(to right, color-mix(in hsl, {{colors.on_surface_variant.default.hex}}, transparent 95%) 40%, transparent);
/* status indicator colors - Kept original as requested, updated offline */
--online: var(--green-2);
--dnd: var(--red-2);
--idle: var(--yellow-2);
--streaming: var(--purple-2);
--offline: {{colors.outline.default.hex}};
/* border colors */
--border-light: var(--hover);
--border: var(--active);
--border-hover: {{colors.primary.default.hex}};
--button-border: {{colors.on_surface.default.hex}}1a;
/* base colors - UNTOUCHED OKLCH FROM ORIGINAL */
--red-1: oklch(75% 0.13 0);
--red-2: oklch(70% 0.13 0);
--red-3: oklch(65% 0.13 0);
--red-4: oklch(60% 0.13 0);
--red-5: oklch(55% 0.13 0);
--green-1: oklch(75% 0.12 170);
--green-2: oklch(70% 0.12 170);
--green-3: oklch(65% 0.12 170);
--green-4: oklch(60% 0.12 170);
--green-5: oklch(55% 0.12 160);
--blue-1: oklch(75% 0.11 215);
--blue-2: oklch(70% 0.11 215);
--blue-3: oklch(65% 0.11 215);
--blue-4: oklch(60% 0.11 215);
--blue-5: oklch(55% 0.11 215);
--yellow-1: oklch(80% 0.12 90);
--yellow-2: oklch(75% 0.12 90);
--yellow-3: oklch(70% 0.12 90);
--yellow-4: oklch(65% 0.12 90);
--yellow-5: oklch(60% 0.12 90);
--purple-1: oklch(75% 0.12 310);
--purple-2: oklch(70% 0.12 310);
--purple-3: oklch(65% 0.12 310);
--purple-4: oklch(60% 0.12 310);
--purple-5: oklch(55% 0.12 310);
}
'';
};
"matugen/templates/discord-midnight.css" = {
text = ''
/**
* @name midnight-matugen
* @description midnight-discord, generated by matugen
* @author refact0r
* @version 1.6.2
* @invite nz87hXyvcy
* @website https://github.com/refact0r/midnight-discord
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
* @authorId 508863359777505290
* @authorLink https://www.refact0r.dev
*/
/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */
@import url('https://refact0r.github.io/midnight-discord/build/midnight.css');
/* customize things here */
:root {
/* font, change to 'gg sans' for default discord font*/
--font: 'monospace';
/* top left corner text */
--corner-text: 'Midnight';
/* color of status indicators and window controls */
--online-indicator: {{colors.inverse_primary.default.hex}}; /* change to #23a55a for default green */
--dnd-indicator: {{colors.error.default.hex}}; /* change to #f13f43 for default red */
--idle-indicator: {{colors.tertiary_container.default.hex}}; /* change to #f0b232 for default yellow */
--streaming-indicator: {{colors.on_primary.default.hex}}; /* change to #593695 for default purple */
/* accent colors */
--accent-1: {{colors.tertiary.default.hex}}; /* links */
--accent-2: {{colors.primary.default.hex}}; /* general unread/mention elements, some icons when active */
--accent-3: {{colors.primary.default.hex}}; /* accent buttons */
--accent-4: {{colors.surface_bright.default.hex}}; /* accent buttons when hovered */
--accent-5: {{colors.primary_fixed_dim.default.hex}}; /* accent buttons when clicked */
--mention: {{colors.surface.default.hex}}; /* mentions & mention messages */
--mention-hover: {{colors.surface_bright.default.hex}}; /* mentions & mention messages when hovered */
/* text colors */
--text-0: {{colors.surface.default.hex}}; /* text on colored elements */
--text-1: {{colors.on_surface.default.hex}}; /* other normally white text */
--text-2: {{colors.on_surface.default.hex}}; /* headings and important text */
--text-3: {{colors.on_surface_variant.default.hex}}; /* normal text */
--text-4: {{colors.on_surface_variant.default.hex}}; /* icon buttons and channels */
--text-5: {{colors.outline.default.hex}}; /* muted channels/chats and timestamps */
/* background and dark colors */
--bg-1: {{colors.surface_variant.default.hex}}; /* dark buttons when clicked */
--bg-2: {{colors.surface_container_high.default.hex}}; /* dark buttons */
--bg-3: {{colors.surface_container_low.default.hex}}; /* spacing, secondary elements */
--bg-4: {{colors.surface.default.hex}}; /* main background color */
--hover: {{colors.surface_bright.default.hex}}; /* channels and buttons when hovered */
--active: {{colors.surface_bright.default.hex}}; /* channels and buttons when clicked or selected */
--message-hover: {{colors.surface_bright.default.hex}}; /* messages when hovered */
/* amount of spacing and padding */
--spacing: 12px;
/* animations */
/* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */
--list-item-transition: 0.2s ease; /* channels/members/settings hover transition */
--unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */
--moon-spin-transition: 0.4s ease; /* moon icon spin */
--icon-spin-transition: 1s ease; /* round icon button spin (settings, emoji, etc.) */
/* corner roundness (border-radius) */
--roundness-xl: 22px; /* roundness of big panel outer corners */
--roundness-l: 20px; /* popout panels */
--roundness-m: 16px; /* smaller panels, images, embeds */
--roundness-s: 12px; /* members, settings inputs */
--roundness-xs: 10px; /* channels, buttons */
--roundness-xxs: 8px; /* searchbar, small elements */
/* direct messages moon icon */
/* change to block to show, none to hide */
--discord-icon: none; /* discord icon */
--moon-icon: block; /* moon icon */
--moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */
--moon-icon-size: auto;
/* filter uncolorable elements to fit theme */
/* (just set to none, they're too much work to configure) */
--login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */
--green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */
--blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */
}
/* Selected chat/friend text */
.selected_f5eb4b,
.selected_f6f816 .link_d8bfb3 {
color: var(--text-0) !important;
background: var(--accent-3) !important;
}
.selected_f6f816 .link_d8bfb3 * {
color: var(--text-0) !important;
fill: var(--text-0) !important;
}
'';
};
};
};
}
|
