cmc/thelounge-theme-crypto

🎨 Retro & high-contrast theme css irc thelounge theme

Commit f7689f2981

f7689f29819a2cec25fa73de3a90e4606daa73bb

parent: d5ab4a6b33

Verified · cmc

cmc <hello@cleberg.net> · 2026-05-04 22:41 UTC 

feat: refresh theme palette, contrast, and terminal styling

Layout: unified · split

README.md +1 −1
@@ -11,7 +11,7 @@
1111</h1>
1212
1313<h3 align="center">
14 Retro & high-contrast theme
14 Minimal black terminal theme
1515</h3>
1616
1717<p align="center">
crypto.css +439 −42
@@ -9,100 +9,497 @@ GitHub: https://github.com/aynik
99*/
1010
1111:root {
12 --link-color: #00ff0e;
12 --crypto-black: #000;
13 --crypto-panel: #050805;
14 --crypto-panel-soft: #0a0f0a;
15 --crypto-border: #263426;
16 --crypto-text: #d7d7d7;
17 --crypto-muted: #777;
18 --crypto-dim: #6f7d6f;
19 --crypto-nick: #9fd6a9;
20 --crypto-accent: #00ff41;
21 --crypto-danger: #ff3b30;
22 --crypto-highlight: rgba(0, 255, 65, 0.1);
23 --crypto-highlight-border: rgba(0, 255, 65, 0.8);
24 --body-color: var(--crypto-text);
25 --body-color-muted: var(--crypto-muted);
26 --body-bg-color: var(--crypto-black);
27 --button-color: var(--crypto-accent);
28 --button-text-color-hover: var(--crypto-black);
29 --link-color: var(--crypto-accent);
30 --window-bg-color: var(--crypto-black);
31 --window-heading-color: var(--crypto-muted);
32 --date-marker-color: rgba(0, 255, 65, 0.35);
33 --unread-marker-color: rgba(255, 59, 48, 0.6);
34 --highlight-bg-color: var(--crypto-highlight);
35 --highlight-border-color: var(--crypto-highlight-border);
36 --upload-progressbar-color: var(--crypto-accent);
37}
38
39::placeholder {
40 color: var(--crypto-dim);
1341}
1442
1543body {
16 background: #000;
17 font: 16px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
44 background: var(--crypto-black);
45 color: var(--crypto-text);
46 font: 15px Menlo, Consolas, Monaco, "Adwaita Mono", "Liberation Mono", "Lucida Console", monospace;
47}
48
49a,
50.link,
51button.link {
52 color: var(--crypto-accent);
53}
54
55a:hover,
56.link:hover,
57button.link:hover {
58 color: #8cff9f;
59}
60
61.irc-fg2 {
62 color: #7ab7ff;
1863}
1964
65.window,
66#chat .chat,
67#chat .chat-content,
68#chat .messages,
69#chat .userlist,
70.header,
71#form,
72#sidebar,
73#footer,
74#context-menu,
75.context-menu,
76.textcomplete-menu {
77 background: var(--crypto-black);
78 color: var(--crypto-text);
79}
80
81#windows .window h1,
2082#windows .window h2,
2183#windows .window h3 {
22 color: #666;
84 color: var(--crypto-muted);
85 letter-spacing: 0;
2386}
2487
2588#windows .window h2 {
26 border-bottom: none;
89 border-bottom: 1px solid var(--crypto-border);
2790}
2891
2992.container {
3093 margin: 40px auto;
3194}
3295
33#sign-in label {
34 color: #666;
96.header,
97#chat .header,
98#form,
99#chat .userlist,
100#chat .content,
101.userlist-open .chat-view[data-type="channel"] .scroll-down {
102 border-color: var(--crypto-border);
35103}
36104
37#sign-in label input {
38 margin-top: 10px !important;
39 font-size: 14px;
105.header .title {
106 color: var(--crypto-text);
40107}
41108
42.btn {
43 border-color: #00ff0e;
44 color: #00ff0e;
109.header .topic,
110#windows .header .topic {
111 color: var(--crypto-muted);
112 line-height: 1.5;
45113}
46114
47.btn:disabled,
48.btn:hover {
49 background: #00ff0e;
115.header button:focus-visible {
116 box-shadow: inset 0 0 0 1px var(--crypto-accent);
117 outline: 1px solid var(--crypto-accent);
118 outline-offset: -1px;
50119}
51120
52#connection-error {
53 background: #f00;
121#chat button.close,
122#chat button.mentions,
123#chat button.menu,
124#chat button.search,
125#viewport .lt,
126#viewport .rt {
127 color: var(--crypto-muted);
54128}
55129
56#settings .opt {
57 line-height: 20px;
58 font-size: 12px;
130#chat button.close:hover,
131#chat button.mentions:hover,
132#chat button.menu:hover,
133#chat button.search:hover,
134#viewport .lt:hover,
135#viewport .rt:hover {
136 color: var(--crypto-accent);
137}
138
139#context-menu {
140 border: 1px solid var(--crypto-border);
141 box-shadow: none;
142}
143
144#context-menu .context-menu-item {
145 color: var(--crypto-text);
146}
147
148#context-menu .context-menu-item:hover,
149#context-menu .context-menu-item:focus {
150 background: var(--crypto-panel-soft);
151 color: var(--crypto-accent);
152}
153
154#context-menu .context-menu-divider {
155 background: var(--crypto-border);
156}
157
158#sidebar .logo-inverted {
159 display: none;
59160}
60161
61#sidebar .chan.lobby {
62 color: #00ff0e;
162#sidebar .logo {
163 display: inline;
63164}
64165
65166#sidebar button,
66167#sidebar .chan,
67#chat .time,
68#chat .count::before,
69#sidebar .empty {
70 color: #666;
168#sidebar .empty,
169.channel-list-item,
170#footer button {
171 color: var(--crypto-muted);
172}
173
174#sidebar .chan.lobby,
175.channel-list-item[data-type="lobby"] {
176 color: var(--crypto-accent);
177}
178
179#sidebar .active,
180#sidebar button:hover,
181#sidebar .chan:hover,
182.channel-list-item:hover,
183.channel-list-item.active,
184#footer button:hover,
185#footer button.active {
186 background: var(--crypto-panel-soft);
187 color: var(--crypto-text);
188}
189
190.channel-list-item .badge,
191#chat .count::before {
192 background: var(--crypto-panel-soft);
193 color: var(--crypto-muted);
194}
195
196#chat .userlist .count {
197 background: var(--crypto-panel-soft);
198}
199
200.channel-list-item .badge.highlight {
201 background: var(--crypto-accent);
202 color: var(--crypto-black);
203}
204
205.channel-list-item:focus-visible,
206#sidebar button:focus-visible,
207#footer button:focus-visible {
208 box-shadow: inset 0 0 0 1px var(--crypto-accent);
209 outline: 1px solid var(--crypto-accent);
210 outline-offset: -1px;
211}
212
213#chat .time {
214 color: var(--crypto-dim);
215}
216
217#chat .from {
218 color: var(--crypto-text);
219}
220
221#chat .content {
222 border-left: 1px solid var(--crypto-border);
223}
224
225#chat .self .content,
226#chat .unhandled .from,
227#chat .msg[data-type="unhandled"] .from,
228#chat .msg[data-type="condensed"] .content,
229#chat .msg[data-type="away"] .content,
230#chat .msg[data-type="back"] .content,
231#chat .msg[data-type="join"] .content,
232#chat .msg[data-type="kick"] .content,
233#chat .msg[data-type="mode"] .content,
234#chat .msg[data-type="nick"] .content,
235#chat .msg[data-type="chghost"] .content,
236#chat .msg[data-type="part"] .content,
237#chat .msg[data-type="quit"] .content,
238#chat .msg[data-type="topic"] .content,
239#chat .msg[data-type="topic_set_by"] .content {
240 color: var(--crypto-muted);
241}
242
243.user,
244#chat .user,
245.inline-channel {
246 color: var(--crypto-nick);
247 font-weight: 700;
248}
249
250a:focus-visible,
251button.link:focus-visible {
252 box-shadow: inset 0 0 0 1px var(--crypto-accent);
253 outline: 1px solid var(--crypto-accent);
254 outline-offset: -1px;
255}
256
257.header .topic a,
258.header .topic .link,
259#chat .content a,
260#chat .content .link {
261 color: var(--crypto-accent);
262 font-weight: 700;
263}
264
265#chat .userlist .user {
266 color: var(--crypto-muted);
267 font-weight: 600;
268}
269
270#chat .userlist .user:hover,
271#chat .userlist .user.active {
272 color: var(--crypto-accent);
273}
274
275#chat .msg[data-type="action"] .from,
276#chat .msg[data-type="action"] .content,
277#chat .msg[data-type="action"] .user,
278#chat .msg[data-type="notice"] .time,
279#chat .msg[data-type="wallops"] .time,
280#chat .msg[data-type="notice"] .content,
281#chat .msg[data-type="wallops"] .content,
282#chat .msg[data-type="notice"] .user,
283#chat .msg[data-type="wallops"] .user {
284 color: #8cff9f;
285}
286
287#chat .msg[data-type="error"],
288#chat .msg[data-type="error"] .from,
289#connection-error,
290#user-visible-error,
291#settings .error {
292 color: var(--crypto-danger);
293}
294
295#connection-error,
296#user-visible-error {
297 background: var(--crypto-black);
298 border-top: 1px solid var(--crypto-danger);
299 border-bottom: 1px solid var(--crypto-danger);
300}
301
302#chat .chat-view[data-type="channel"] .msg.highlight {
303 background-color: var(--crypto-highlight);
304 border-left: 5px solid var(--crypto-highlight-border);
71305}
72306
73#chat .unhandled .from {
74 color: #ddd;
307#chat .chat-view[data-type="channel"] .msg.highlight .time {
308 color: #8cff9f;
309 padding-left: 5px;
75310}
76311
77#sidebar .active {
78 color: #fff;
312#chat .chat-view[data-type="channel"] .msg.highlight .content {
313 border-left-color: transparent;
79314}
80315
81#windows .header .topic,
82.messages .msg,
83.userlist {
84 line-height: 1.8;
316#chat .date-marker-text::before,
317#chat .unread-marker-text::before {
318 background: var(--crypto-black);
85319}
86320
87#chat .user {
88 color: black;
89 font-weight: bold;
321#chat .scroll-down-arrow {
322 background: var(--crypto-black);
323 border-color: var(--crypto-accent);
324 box-shadow: none;
325 color: var(--crypto-accent);
90326}
91327
92#windows #form .input {
328#chat .scroll-down:hover .scroll-down-arrow {
329 background: var(--crypto-accent);
330 color: var(--crypto-black);
331}
332
333#chat .msg[data-type="monospace_block"] .text,
334#chat pre,
335#chat code {
336 background: var(--crypto-panel);
337 border: 1px solid var(--crypto-border);
338 color: var(--crypto-text);
339}
340
341.input {
342 background: var(--crypto-black);
343 border-color: var(--crypto-border);
344 color: var(--crypto-text);
345 font-family: inherit;
346 font-size: 14px;
347}
348
349.input:disabled {
350 background: var(--crypto-panel);
351 color: var(--crypto-dim);
352}
353
354.input:not(:disabled):hover,
355.input:not(:disabled):focus {
356 border-color: var(--crypto-accent);
357 box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
358 outline: none;
359}
360
361.header .topic-input,
362#form #nick,
363#form #input,
364#windows #form .input,
365#windows select.input {
366 background: var(--crypto-black);
367 border-color: var(--crypto-border);
368 color: var(--crypto-text);
93369 font-family: inherit;
94 font-size: 12px;
95370}
96371
97372#windows select.input {
98373 height: 38px;
99374}
100375
376.btn {
377 background: var(--crypto-black);
378 border-color: var(--crypto-accent);
379 color: var(--crypto-accent);
380}
381
382.btn:focus-visible {
383 box-shadow: inset 0 0 0 1px var(--crypto-accent);
384 outline: 1px solid var(--crypto-accent);
385 outline-offset: -1px;
386}
387
388.btn:disabled {
389 background: var(--crypto-black);
390 color: var(--crypto-dim);
391}
392
393.btn:not(:disabled):hover,
394.btn:not(:disabled):focus {
395 background: var(--crypto-accent);
396 color: var(--crypto-black);
397}
398
399#form button:focus-visible {
400 box-shadow: inset 0 0 0 1px var(--crypto-accent);
401 outline: 1px solid var(--crypto-accent);
402 outline-offset: -1px;
403}
404
405#chat .show-more .btn {
406 background: var(--crypto-black);
407}
408
409#form {
410 border-top: 1px solid var(--crypto-border);
411}
412
413#form #input {
414 font-size: 14px;
415}
416
417#form #input:focus,
418.header .topic-input:focus {
419 border-color: var(--crypto-accent);
420 box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
421 outline: none;
422}
423
424#form #nick {
425 background: var(--crypto-panel);
426 color: var(--crypto-muted);
427}
428
429#form #upload,
430#form #submit,
101431#footer .icon {
102 color: #666;
432 color: var(--crypto-muted);
433}
434
435#form #upload:hover,
436#form #submit:hover,
437#footer button:hover .icon,
438#footer button.active .icon {
439 color: var(--crypto-accent);
440}
441
442#sign-in label,
443#settings .settings-menu,
444#settings label,
445#settings .opt {
446 color: var(--crypto-muted);
447}
448
449#sign-in label input {
450 margin-top: 10px !important;
451 font-size: 14px;
103452}
104453
105/* Previews */
454#settings .opt {
455 display: block;
456 font-size: 14px;
457 line-height: 1.45;
458 padding: 6px 0;
459}
460
461#settings .settings-menu .active,
462#settings .settings-menu .active .icon,
463#settings label:hover,
464#settings .opt:hover {
465 color: var(--crypto-text);
466}
467
468#settings .opt input {
469 margin-right: 8px;
470}
471
472#settings .settings-sync-panel {
473 background: var(--crypto-panel);
474 border: 1px solid var(--crypto-border);
475 color: var(--crypto-muted);
476}
477
478#settings .settings-sync-panel .btn {
479 border-color: var(--crypto-accent);
480 color: var(--crypto-accent);
481}
482
483#settings #play,
484#settings .extra-help,
485#settings h2 .extra-help {
486 color: var(--crypto-muted);
487}
488
489#settings #play:hover,
490#settings .extra-help:hover {
491 color: var(--crypto-accent);
492}
493
494#chat table.channel-list th,
495#chat table.ban-list th,
496#chat table.invite-list th,
497#chat table.ignore-list th,
498#chat table.channel-list td,
499#chat table.ban-list td,
500#chat table.invite-list td {
501 border-bottom-color: var(--crypto-border);
502}
106503
107504#chat .toggle-text {
108505 line-height: 1.4;
package.json +2 −2
@@ -1,7 +1,7 @@
11{
22 "name": "thelounge-theme-crypto",
3 "version": "1.0.0",
4 "description": "Retro & high-contrast theme for The Lounge",
3 "version": "1.1.0",
4 "description": "Minimal black terminal theme for The Lounge",
55 "main": "package.json",
66 "thelounge": {
77 "name": "Crypto",
screenshot.png

Binary file not shown.