Easily customizable theme for The Lounge instances

Project Showcase
1

Why/What?

After being dissatisfied with the built-in themes in The Lounge, I decided to make my own CSS to customize it!

Roadbump

A ways into writing it, I started over, prioritizing usage of CSS Variables to control the theme.

Why re-write?

So it’s easier for others to easily customize the theme as they see fit!

How do I customize it?

Just change the values of the “color customization” block at the top of the CSS, and let the theme do the rest!

CSS:

/* Start color customization */
:root {
    /* Colors */
    --body-color: #0f0;
    --body-color-muted: #070;
    --link-color: #0ff;
    --button-color: #0a0;
    --button-text-color-hover: #0f0;
    --upload-progressbar-color: var(--button-color);
    --window-heading-color: #0f0;
    --notice-color: #500;

    /* Background colors */
    --main-bg-color-muted: #011;
    --main-bg-color: #022;
    --main-bg-color-bright: #033;
    --main-bg-color-brightest: #044;
    --body-bg-color: var(--main-bg-color);
    --window-bg-color: var(--main-bg-color);
    --overlay-bg-color: rgb(0 0 0 / 50%);

    /* Marker colors */
    --date-marker-color: #07f;
    --unread-marker-color: #f00;
    --highlight-bg-color: #330;
    --highlight-border-color: #ff0;

    /* Sidebar colors */
    --server-color: #0ff;
    --server-color-muted: #0aa;
    --sidebar-color-muted: #060;
    --sidebar-color: #0f0;
    --sidebar-color-hover: #0a0;
    --unread-bg-color: #044;

    /* User colors */
    --user-color-1: #f00;
    --user-color-2: #0f0;
    --user-color-3: #00f;
    --user-color-4: #ff0;
    --user-color-5: #f0f;
    --user-color-6: #0ff;
    --user-color-7: #fff;
    --user-color-8: #700;
    --user-color-9: #070;
    --user-color-10: #007;
    --user-color-11: #770;
    --user-color-12: #707;
    --user-color-13: #077;
    --user-color-14: #777;
    --user-color-15: #500;
    --user-color-16: #050;
    --user-color-17: #005;
    --user-color-18: #550;
    --user-color-19: #505;
    --user-color-20: #055;
    --user-color-21: #555;
    --user-color-22: #400;
    --user-color-23: #040;
    --user-color-24: #004;
    --user-color-25: #440;
    --user-color-26: #404;
    --user-color-27: #044;
    --user-color-28: #444;
    --user-color-29: #300;
    --user-color-30: #030;
    --user-color-31: #003;
    --user-color-32: #033;
}
/* End color customization */

.input {
    background-color: var(--main-bg-color-muted);
    color: var(--body-color)
}

.channel-list-item[data-type=lobby] {
    color: var(--server-color-muted);
}

.channel-list-item[data-type=lobby].active, .channel-list-item[data-type=lobby]:hover {
    color: var(--server-color) !important;
}

#footer button, #sidebar {
    color: var(--sidebar-color-muted);
}

#footer button.active, .channel-list-item.active {
    background-color: var(--main-bg-color-brightest) !important;
    color: var(--sidebar-color) !important;
}

#footer button:hover, .channel-list-item:hover {
    background-color: var(--main-bg-color-bright);
    color: var(--sidebar-color-hover);
}

.channel-list-item .badge {
    color: var(--sidebar-color);
    background-color: var(--unread-bg-color);
}

.channel-list-item .badge.highlight {
    color: var(--sidebar-color);
    border: 1px solid var(--sidebar-color);
    background-color: var(--unread-bg-color);
}

#chat form.message-search button, #viewport .lt, #viewport .rt, #chat button:is(.mentions, .menu, .close), #form #submit, .jump-to-input:before, #chat .count::before {
    color: var(--button-color);
}

#chat .msg:is([data-type=notice], [data-type=wallops]) :is(.content, .time, .user) {
     color: var(--notice-color);
}

#sidebar .network .collapse-network-icon:before, .channel-list-item[data-type=lobby] .add-channel:before, .channel-list-item .close:before {
    color: var(--sidebar-color-hover);
}

.context-menu-item, .textcomplete-item, #context-menu, .mentions-popup, .textcomplete-menu {
    background-color: var(--main-bg-color-brightest);
    color: var(--body-color);
}

#form, #chat .userlist .count, .jump-to-input {
    background-color: var(--main-bg-color-brightest);
    border-color: var(--main-bg-color-brightest);
}

#chat .userlist .user.active {
    background-color: var(--main-bg-color-muted);
}

#chat .user-mode.op:before, #chat .user-mode.normal:before, #chat .user-mode.voice:before {
    background-color: var(--main-bg-color-bright);
}

.user.color-1 { color: var(--user-color-1); }
.user.color-2 { color: var(--user-color-2); }
.user.color-3 { color: var(--user-color-3); }
.user.color-4 { color: var(--user-color-4); }
.user.color-5 { color: var(--user-color-5); }
.user.color-6 { color: var(--user-color-6); }
.user.color-7 { color: var(--user-color-7); }
.user.color-8 { color: var(--user-color-8); }
.user.color-9 { color: var(--user-color-9); }
.user.color-10 { color: var(--user-color-10); }
.user.color-11 { color: var(--user-color-11); }
.user.color-12 { color: var(--user-color-12); }
.user.color-13 { color: var(--user-color-13); }
.user.color-14 { color: var(--user-color-14); }
.user.color-15 { color: var(--user-color-15); }
.user.color-16 { color: var(--user-color-16); }
.user.color-17 { color: var(--user-color-17); }
.user.color-18 { color: var(--user-color-18); }
.user.color-19 { color: var(--user-color-19); }
.user.color-20 { color: var(--user-color-20); }
.user.color-21 { color: var(--user-color-21); }
.user.color-22 { color: var(--user-color-22); }
.user.color-23 { color: var(--user-color-23); }
.user.color-24 { color: var(--user-color-24); }
.user.color-25 { color: var(--user-color-25); }
.user.color-26 { color: var(--user-color-26); }
.user.color-27 { color: var(--user-color-27); }
.user.color-28 { color: var(--user-color-28); }
.user.color-29 { color: var(--user-color-29); }
.user.color-30 { color: var(--user-color-30); }
.user.color-31 { color: var(--user-color-31); }
.user.color-32 { color: var(--user-color-32); }
2 Likes
2

As the President of AMC, I can confirm that you just wrote CSS. There can be no other explanation whatsoever.

3

What “Lounge”? What are you talking about?

4

It’s a web based IRC client. There’s one hosted on my PI, here.

5

@Firepup650 can you please create a password for me? My account doesn’t have one so I can only log in via Tailscale, not VNC, and since I am not sudo I can do nothing.
image

6

I’ll set it to a temp and mark it as expired. DMing you.

1 Like
7

Looks at PM /j

8

DM not PM in this case because I know that could happen.

9

Impersonates :nefarious:

still joking

10

btw whats the lounge password?

11

the real question is: why is password being autolinked to a rickroll (I can now recognize the link, I think I once thought that was really cool and I PMed someone abt it, I don’t remember who but I’d like to tell them that I’ve done it!!)

2 Likes
12

I cant find how to remove it

13

Just delete everything from the custom CSS field.