cmc/thelounge-theme-crypto

🎨 Retro & high-contrast theme

clone: git clone https://gitbay.org/cmc/thelounge-theme-crypto.git

f7689f29819a2cec25fa73de3a90e4606daa73bb

verified · cmc

author: Christian Cleberg <hello@cleberg.net> · 2026-05-04T22:41:54Z

feat: refresh theme palette, contrast, and terminal styling

 README.md      |   2 +-
 crypto.css     | 481 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 package.json   |   4 +-
 screenshot.png | Bin 937651 -> 1580179 bytes
 4 files changed, 442 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 0202e1e..7f41e09 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 </h1>
 
 <h3 align="center">
-	Retro & high-contrast theme
+	Minimal black terminal theme
 </h3>
 
 <p align="center">
diff --git a/crypto.css b/crypto.css
index 8b27c9c..9b11205 100644
--- a/crypto.css
+++ b/crypto.css
@@ -9,100 +9,497 @@ GitHub: https://github.com/aynik
 */
 
 :root {
-  --link-color: #00ff0e;
+  --crypto-black: #000;
+  --crypto-panel: #050805;
+  --crypto-panel-soft: #0a0f0a;
+  --crypto-border: #263426;
+  --crypto-text: #d7d7d7;
+  --crypto-muted: #777;
+  --crypto-dim: #6f7d6f;
+  --crypto-nick: #9fd6a9;
+  --crypto-accent: #00ff41;
+  --crypto-danger: #ff3b30;
+  --crypto-highlight: rgba(0, 255, 65, 0.1);
+  --crypto-highlight-border: rgba(0, 255, 65, 0.8);
+  --body-color: var(--crypto-text);
+  --body-color-muted: var(--crypto-muted);
+  --body-bg-color: var(--crypto-black);
+  --button-color: var(--crypto-accent);
+  --button-text-color-hover: var(--crypto-black);
+  --link-color: var(--crypto-accent);
+  --window-bg-color: var(--crypto-black);
+  --window-heading-color: var(--crypto-muted);
+  --date-marker-color: rgba(0, 255, 65, 0.35);
+  --unread-marker-color: rgba(255, 59, 48, 0.6);
+  --highlight-bg-color: var(--crypto-highlight);
+  --highlight-border-color: var(--crypto-highlight-border);
+  --upload-progressbar-color: var(--crypto-accent);
+}
+
+::placeholder {
+  color: var(--crypto-dim);
 }
 
 body {
-  background: #000;
-  font: 16px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
+  background: var(--crypto-black);
+  color: var(--crypto-text);
+  font: 15px Menlo, Consolas, Monaco, "Adwaita Mono", "Liberation Mono", "Lucida Console", monospace;
+}
+
+a,
+.link,
+button.link {
+  color: var(--crypto-accent);
+}
+
+a:hover,
+.link:hover,
+button.link:hover {
+  color: #8cff9f;
+}
+
+.irc-fg2 {
+  color: #7ab7ff;
 }
 
+.window,
+#chat .chat,
+#chat .chat-content,
+#chat .messages,
+#chat .userlist,
+.header,
+#form,
+#sidebar,
+#footer,
+#context-menu,
+.context-menu,
+.textcomplete-menu {
+  background: var(--crypto-black);
+  color: var(--crypto-text);
+}
+
+#windows .window h1,
 #windows .window h2,
 #windows .window h3 {
-  color: #666;
+  color: var(--crypto-muted);
+  letter-spacing: 0;
 }
 
 #windows .window h2 {
-  border-bottom: none;
+  border-bottom: 1px solid var(--crypto-border);
 }
 
 .container {
   margin: 40px auto;
 }
 
-#sign-in label {
-  color: #666;
+.header,
+#chat .header,
+#form,
+#chat .userlist,
+#chat .content,
+.userlist-open .chat-view[data-type="channel"] .scroll-down {
+  border-color: var(--crypto-border);
 }
 
-#sign-in label input {
-  margin-top: 10px !important;
-  font-size: 14px;
+.header .title {
+  color: var(--crypto-text);
 }
 
-.btn {
-  border-color: #00ff0e;
-  color: #00ff0e;
+.header .topic,
+#windows .header .topic {
+  color: var(--crypto-muted);
+  line-height: 1.5;
 }
 
-.btn:disabled,
-.btn:hover {
-  background: #00ff0e;
+.header button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--crypto-accent);
+  outline: 1px solid var(--crypto-accent);
+  outline-offset: -1px;
 }
 
-#connection-error {
-  background: #f00;
+#chat button.close,
+#chat button.mentions,
+#chat button.menu,
+#chat button.search,
+#viewport .lt,
+#viewport .rt {
+  color: var(--crypto-muted);
 }
 
-#settings .opt {
-  line-height: 20px;
-  font-size: 12px;
+#chat button.close:hover,
+#chat button.mentions:hover,
+#chat button.menu:hover,
+#chat button.search:hover,
+#viewport .lt:hover,
+#viewport .rt:hover {
+  color: var(--crypto-accent);
+}
+
+#context-menu {
+  border: 1px solid var(--crypto-border);
+  box-shadow: none;
+}
+
+#context-menu .context-menu-item {
+  color: var(--crypto-text);
+}
+
+#context-menu .context-menu-item:hover,
+#context-menu .context-menu-item:focus {
+  background: var(--crypto-panel-soft);
+  color: var(--crypto-accent);
+}
+
+#context-menu .context-menu-divider {
+  background: var(--crypto-border);
+}
+
+#sidebar .logo-inverted {
+  display: none;
 }
 
-#sidebar .chan.lobby {
-  color: #00ff0e;
+#sidebar .logo {
+  display: inline;
 }
 
 #sidebar button,
 #sidebar .chan,
-#chat .time,
-#chat .count::before,
-#sidebar .empty {
-  color: #666;
+#sidebar .empty,
+.channel-list-item,
+#footer button {
+  color: var(--crypto-muted);
+}
+
+#sidebar .chan.lobby,
+.channel-list-item[data-type="lobby"] {
+  color: var(--crypto-accent);
+}
+
+#sidebar .active,
+#sidebar button:hover,
+#sidebar .chan:hover,
+.channel-list-item:hover,
+.channel-list-item.active,
+#footer button:hover,
+#footer button.active {
+  background: var(--crypto-panel-soft);
+  color: var(--crypto-text);
+}
+
+.channel-list-item .badge,
+#chat .count::before {
+  background: var(--crypto-panel-soft);
+  color: var(--crypto-muted);
+}
+
+#chat .userlist .count {
+  background: var(--crypto-panel-soft);
+}
+
+.channel-list-item .badge.highlight {
+  background: var(--crypto-accent);
+  color: var(--crypto-black);
+}
+
+.channel-list-item:focus-visible,
+#sidebar button:focus-visible,
+#footer button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--crypto-accent);
+  outline: 1px solid var(--crypto-accent);
+  outline-offset: -1px;
+}
+
+#chat .time {
+  color: var(--crypto-dim);
+}
+
+#chat .from {
+  color: var(--crypto-text);
+}
+
+#chat .content {
+  border-left: 1px solid var(--crypto-border);
+}
+
+#chat .self .content,
+#chat .unhandled .from,
+#chat .msg[data-type="unhandled"] .from,
+#chat .msg[data-type="condensed"] .content,
+#chat .msg[data-type="away"] .content,
+#chat .msg[data-type="back"] .content,
+#chat .msg[data-type="join"] .content,
+#chat .msg[data-type="kick"] .content,
+#chat .msg[data-type="mode"] .content,
+#chat .msg[data-type="nick"] .content,
+#chat .msg[data-type="chghost"] .content,
+#chat .msg[data-type="part"] .content,
+#chat .msg[data-type="quit"] .content,
+#chat .msg[data-type="topic"] .content,
+#chat .msg[data-type="topic_set_by"] .content {
+  color: var(--crypto-muted);
+}
+
+.user,
+#chat .user,
+.inline-channel {
+  color: var(--crypto-nick);
+  font-weight: 700;
+}
+
+a:focus-visible,
+button.link:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--crypto-accent);
+  outline: 1px solid var(--crypto-accent);
+  outline-offset: -1px;
+}
+
+.header .topic a,
+.header .topic .link,
+#chat .content a,
+#chat .content .link {
+  color: var(--crypto-accent);
+  font-weight: 700;
+}
+
+#chat .userlist .user {
+  color: var(--crypto-muted);
+  font-weight: 600;
+}
+
+#chat .userlist .user:hover,
+#chat .userlist .user.active {
+  color: var(--crypto-accent);
+}
+
+#chat .msg[data-type="action"] .from,
+#chat .msg[data-type="action"] .content,
+#chat .msg[data-type="action"] .user,
+#chat .msg[data-type="notice"] .time,
+#chat .msg[data-type="wallops"] .time,
+#chat .msg[data-type="notice"] .content,
+#chat .msg[data-type="wallops"] .content,
+#chat .msg[data-type="notice"] .user,
+#chat .msg[data-type="wallops"] .user {
+  color: #8cff9f;
+}
+
+#chat .msg[data-type="error"],
+#chat .msg[data-type="error"] .from,
+#connection-error,
+#user-visible-error,
+#settings .error {
+  color: var(--crypto-danger);
+}
+
+#connection-error,
+#user-visible-error {
+  background: var(--crypto-black);
+  border-top: 1px solid var(--crypto-danger);
+  border-bottom: 1px solid var(--crypto-danger);
+}
+
+#chat .chat-view[data-type="channel"] .msg.highlight {
+  background-color: var(--crypto-highlight);
+  border-left: 5px solid var(--crypto-highlight-border);
 }
 
-#chat .unhandled .from {
-  color: #ddd;
+#chat .chat-view[data-type="channel"] .msg.highlight .time {
+  color: #8cff9f;
+  padding-left: 5px;
 }
 
-#sidebar .active {
-  color: #fff;
+#chat .chat-view[data-type="channel"] .msg.highlight .content {
+  border-left-color: transparent;
 }
 
-#windows .header .topic,
-.messages .msg,
-.userlist {
-  line-height: 1.8;
+#chat .date-marker-text::before,
+#chat .unread-marker-text::before {
+  background: var(--crypto-black);
 }
 
-#chat .user {
-  color: black;
-  font-weight: bold;
+#chat .scroll-down-arrow {
+  background: var(--crypto-black);
+  border-color: var(--crypto-accent);
+  box-shadow: none;
+  color: var(--crypto-accent);
 }
 
-#windows #form .input {
+#chat .scroll-down:hover .scroll-down-arrow {
+  background: var(--crypto-accent);
+  color: var(--crypto-black);
+}
+
+#chat .msg[data-type="monospace_block"] .text,
+#chat pre,
+#chat code {
+  background: var(--crypto-panel);
+  border: 1px solid var(--crypto-border);
+  color: var(--crypto-text);
+}
+
+.input {
+  background: var(--crypto-black);
+  border-color: var(--crypto-border);
+  color: var(--crypto-text);
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.input:disabled {
+  background: var(--crypto-panel);
+  color: var(--crypto-dim);
+}
+
+.input:not(:disabled):hover,
+.input:not(:disabled):focus {
+  border-color: var(--crypto-accent);
+  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
+  outline: none;
+}
+
+.header .topic-input,
+#form #nick,
+#form #input,
+#windows #form .input,
+#windows select.input {
+  background: var(--crypto-black);
+  border-color: var(--crypto-border);
+  color: var(--crypto-text);
   font-family: inherit;
-  font-size: 12px;
 }
 
 #windows select.input {
   height: 38px;
 }
 
+.btn {
+  background: var(--crypto-black);
+  border-color: var(--crypto-accent);
+  color: var(--crypto-accent);
+}
+
+.btn:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--crypto-accent);
+  outline: 1px solid var(--crypto-accent);
+  outline-offset: -1px;
+}
+
+.btn:disabled {
+  background: var(--crypto-black);
+  color: var(--crypto-dim);
+}
+
+.btn:not(:disabled):hover,
+.btn:not(:disabled):focus {
+  background: var(--crypto-accent);
+  color: var(--crypto-black);
+}
+
+#form button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--crypto-accent);
+  outline: 1px solid var(--crypto-accent);
+  outline-offset: -1px;
+}
+
+#chat .show-more .btn {
+  background: var(--crypto-black);
+}
+
+#form {
+  border-top: 1px solid var(--crypto-border);
+}
+
+#form #input {
+  font-size: 14px;
+}
+
+#form #input:focus,
+.header .topic-input:focus {
+  border-color: var(--crypto-accent);
+  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
+  outline: none;
+}
+
+#form #nick {
+  background: var(--crypto-panel);
+  color: var(--crypto-muted);
+}
+
+#form #upload,
+#form #submit,
 #footer .icon {
-  color: #666;
+  color: var(--crypto-muted);
+}
+
+#form #upload:hover,
+#form #submit:hover,
+#footer button:hover .icon,
+#footer button.active .icon {
+  color: var(--crypto-accent);
+}
+
+#sign-in label,
+#settings .settings-menu,
+#settings label,
+#settings .opt {
+  color: var(--crypto-muted);
+}
+
+#sign-in label input {
+  margin-top: 10px !important;
+  font-size: 14px;
 }
 
-/* Previews */
+#settings .opt {
+  display: block;
+  font-size: 14px;
+  line-height: 1.45;
+  padding: 6px 0;
+}
+
+#settings .settings-menu .active,
+#settings .settings-menu .active .icon,
+#settings label:hover,
+#settings .opt:hover {
+  color: var(--crypto-text);
+}
+
+#settings .opt input {
+  margin-right: 8px;
+}
+
+#settings .settings-sync-panel {
+  background: var(--crypto-panel);
+  border: 1px solid var(--crypto-border);
+  color: var(--crypto-muted);
+}
+
+#settings .settings-sync-panel .btn {
+  border-color: var(--crypto-accent);
+  color: var(--crypto-accent);
+}
+
+#settings #play,
+#settings .extra-help,
+#settings h2 .extra-help {
+  color: var(--crypto-muted);
+}
+
+#settings #play:hover,
+#settings .extra-help:hover {
+  color: var(--crypto-accent);
+}
+
+#chat table.channel-list th,
+#chat table.ban-list th,
+#chat table.invite-list th,
+#chat table.ignore-list th,
+#chat table.channel-list td,
+#chat table.ban-list td,
+#chat table.invite-list td {
+  border-bottom-color: var(--crypto-border);
+}
 
 #chat .toggle-text {
   line-height: 1.4;
diff --git a/package.json b/package.json
index 86da908..902e1b5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "thelounge-theme-crypto",
-  "version": "1.0.0",
-  "description": "Retro & high-contrast theme for The Lounge",
+  "version": "1.1.0",
+  "description": "Minimal black terminal theme for The Lounge",
   "main": "package.json",
   "thelounge": {
     "name": "Crypto",
diff --git a/screenshot.png b/screenshot.png
index 60ca42e..b845b02 100644
Binary files a/screenshot.png and b/screenshot.png differ