Rewrite theme to use variables and stuff

[MiniDigger]

todo:

• [x] context menu
• [x] link previews
• [x] 'send message' button
• [x] network colors/unsecure icon
• [x] colors of date and new message marker
• [x] link colors?
• [x] motd background
• [x] reduce spacing between channels/networks
• [x] add bot 'mutes' back
• [x] bigger css box

and worst of all

• [ ] figure out how to keep this shit clean....

Screenshot


Current Progress

```css /* thelounge-theme-mininapse A dark theme for thelounge Installation instructions can be found here https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger TODO - context menus - link previews */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #77abd9; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #97ea70; --unread-marker-color: #f92772; --highlight-bg-color: #4d4332; --highlight-border-color: #b08c4f; } /* */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* */ /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* 's */ #chat .from .user::before { content: "<"; color: var(--dim-color); } #chat .from .user::after { content: ">"; color: var(--dim-color); } /* remove logo */ .logo, .logo-inverted { display: none; } /* remove button coloring */ #viewport .lt, #viewport .rt, #chat button.menu, #footer button { color: var(--body-color); } /* active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } /* inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color) !important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* windows */ #windows .window { box-shadow: none; } ```

[fnutt]

Suggestions:

• [x] Change nick highlight colour/background to comply with the other colours that are used in the theme
• [x] Add same style to your own lines in channel as highlights, but with a less intrusive colour/background
• [x] Align all unread counters in channel list to far right, for consistency?
• [x] Remove user <>
• [x] Add #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 4px } for less space between channels/pm's

If we're doing something with links, I suggest having the same colours as on network names for consistency. Less colours is more, in my opinion.

[MiniDigger]

• [x] Another thing: topic text color is off

[fnutt]

I've made a suggestion below. Modified colors, added styling to highlights and self messages. reduced space between channels/pm's in sidebar, set link colour to comply with red colour used else where in the theme, fixed network colour/icon and changed from blue to red color on notices.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #2ecc40; --unread-marker-color: #ef4657; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #footer button { color: var(--body-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted { display: none; } .add-channel, .add-channel-tooltip, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time { color: var(--link-color)!important; } ```

[fnutt]

This removes icons in front of channels and pm's. Not 100 % sure if we want this or not? Also combined a few lines inside / Sidebar / and fixed some spacing in the code.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #2ecc40; --unread-marker-color: #ef4657; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #footer button { color: var(--body-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time { color: var(--link-color)!important; } ```

[fnutt]

Slightly smaller channel list, removed close button on channels since we have right click context menu and mostly fixed link previews.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #2ecc40; --unread-marker-color: #ef4657; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #footer button { color: var(--body-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } ```

[MiniDigger]

dark context/autocomplete menu

```css /* content/autocomplete menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } ```

[MiniDigger]

red buttons, fixed topic and motd colors

```css /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #2ecc40; --unread-marker-color: #ef4657; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #form #submit, #viewport .lt, #viewport .rt, #chat button.menu, #footer button { color: var(--link-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } /* content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* motd */ #chat .msg.motd .text { background-color: var(--dark-bg-color); } /* topic */ #windows .header .topic { color: var(--body-color); } ```

[fnutt]

Suggest this for buttons:

/* Button colors */
#viewport .lt,
#viewport .rt,
#chat button.menu,
#sidebar button,
#form #submit,
#footer button {
        color: var(--link-color);
}

#viewport .lt:hover,
#viewport .rt:hover, 
#chat button.menu:hover,
#sidebar button:hover,
#form #submit:hover {
        color: var(--highlight-bg-color);
}

[fnutt]

New suggestion. Diverse fixes, including less space after user-modes in nicklist and same text color on your own messages as from others:

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #2ecc40; --unread-marker-color: #ef4657; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } .btn { border: 2px solid var(--date-marker-color); color: var(--date-marker-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Channel-/network list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } #windows .header .topic { color: var(--body-color); } ```

[fnutt]

Suggest changing --date-marker-color from #2ecc40 to #84ce88. Our current color is a bit too dark in my opinion. Also changed the magnifying glass to be red color.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } .btn { border: 2px solid var(--date-marker-color); color: var(--date-marker-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Channel-/network list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 5px; padding-top: 5px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 10px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } #windows .header .topic { color: var(--body-color); } ```

[fnutt]

Suggestion:

#sidebar .chan,
#sidebar .chan-placeholder {
        padding-bottom: 3px;
        padding-top: 3px;
}

#sidebar .network,
#sidebar .network-placeholder {
        margin-bottom: 10px;
}

[MiniDigger]

integrated ^ also fixed motd again and made css box bigger

```css /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } .btn { border: 2px solid var(--date-marker-color); color: var(--date-marker-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Channel-/network list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } #windows .header .topic { color: var(--body-color); } ```

[fnutt]

This fixes issue with iOS regarding white color on user list search.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } .btn { border: 2px solid var(--date-marker-color); color: var(--date-marker-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Channel-/network list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } .logo, .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } #chat .userlist .count { background: var(--body-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } #windows .header .topic { color: var(--body-color); } ```

[fnutt]

Fixes logo.

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } .btn { border: 2px solid var(--date-marker-color); color: var(--date-marker-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Network-/channel list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } #sidebar .logo, #sidebar .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } #chat .userlist .count { background: var(--body-bg-color); } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } #windows .header .topic { color: var(--body-color); } ```

[fnutt]

• [x] Remove .btn formatting since we now use default color anyway
• [x] Change some icons in /#settings and MOTD to red color for consistency
• [x] Add nick hovering opacity in nick list for consistency
• [x] Add hide bot spam

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Network-/channel list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } #sidebar .logo, #sidebar .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } #chat .userlist .count { background: var(--body-bg-color); } #chat .names .user:hover { opacity: 0.6; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } .password-container .reveal-password span, #settings .extra-help, #settings .extra-experimental { color: var(--highlight-border-color); } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #windows .header .topic { color: var(--body-color); } /* MOTD */ #chat .motd .from:before { color: var(--highlight-border-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } /* Hide bot spam */ #chat .msg[data-from="travis-ci"] .toggle-button, #chat .msg[data-from="MiniBot"] .toggle-button, #chat .msg[data-from="Wendy"] .toggle-button, #chat .msg[data-from="github-status"] .toggle-button { transform: rotate(90deg); } #chat .msg[data-from="travis-ci"] .toggle-button.opened, #chat .msg[data-from="MiniBot"] .toggle-button.opened, #chat .msg[data-from="Wendy"] .toggle-button.opened, #chat .msg[data-from="github-status"] .toggle-button.opened { transform: rotate(0deg); } #chat .msg[data-from="travis-ci"] .toggle-content, #chat .msg[data-from="MiniBot"] .toggle-content, #chat .msg[data-from="Wendy"] .toggle-content, #chat .msg[data-from="github-status"] .toggle-content { display: inline-flex !important; } #chat .msg[data-from="travis-ci"] .toggle-content.show, #chat .msg[data-from="MiniBot"] .toggle-content.show, #chat .msg[data-from="Wendy"] .toggle-content.show, #chat .msg[data-from="github-status"] .toggle-content.show { display: none !important; } ```

_

[MiniDigger]

change context/textcomplete menu icons

```css /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Network-/channel list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } #sidebar .logo, #sidebar .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } #chat .userlist .count { background: var(--body-bg-color); } #chat .names .user:hover { opacity: 0.6; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } .password-container .reveal-password span, #settings .extra-help, #settings .extra-experimental { color: var(--highlight-border-color); } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } .context-menu-item::before, .textcomplete-item::before { color: var(--link-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #windows .header .topic { color: var(--body-color); } /* MOTD */ #chat .motd .from:before { color: var(--highlight-border-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } /* Hide bot spam */ #chat .msg[data-from="travis-ci"] .toggle-button, #chat .msg[data-from="MiniBot"] .toggle-button, #chat .msg[data-from="Wendy"] .toggle-button, #chat .msg[data-from="github-status"] .toggle-button { transform: rotate(90deg); } #chat .msg[data-from="travis-ci"] .toggle-button.opened, #chat .msg[data-from="MiniBot"] .toggle-button.opened, #chat .msg[data-from="Wendy"] .toggle-button.opened, #chat .msg[data-from="github-status"] .toggle-button.opened { transform: rotate(0deg); } #chat .msg[data-from="travis-ci"] .toggle-content, #chat .msg[data-from="MiniBot"] .toggle-content, #chat .msg[data-from="Wendy"] .toggle-content, #chat .msg[data-from="github-status"] .toggle-content { display: inline-flex !important; } #chat .msg[data-from="travis-ci"] .toggle-content.show, #chat .msg[data-from="MiniBot"] .toggle-content.show, #chat .msg[data-from="Wendy"] .toggle-content.show, #chat .msg[data-from="github-status"] .toggle-content.show { display: none !important; } ```

[fnutt]

• [x] Collapse network icon with red color
• [x] Less space between collapse network icon and network name

``` /* thelounge-theme-mininapse A dark theme for TheLounge IRC client Installation instructions can be found at https://thelounge.chat/docs/server/configuration.html#theme Authors: - MiniDigger: https://github.com/MiniDigger - christer88: https://github.com/christer88 */ @import 'default.css'; :root { --body-color: #c5c1c1; --dim-color: #999; --link-color: #ef4657; --window-bg-color: #282525; --body-bg-color: #282525; --active-bg-color: #333030; --dark-bg-color: #0003; --date-marker-color: #84ce88; --unread-marker-color: #84ce88; --highlight-bg-color: #f58383; --highlight-border-color: #ef4657; } /* Nick colors */ #chat.colored-nicks .user.color-1, #chat.colored-nicks .user.color-17 { color: #ef4657; } #chat.colored-nicks .user.color-2, #chat.colored-nicks .user.color-18 { color: #ff93a4; } #chat.colored-nicks .user.color-3, #chat.colored-nicks .user.color-19 { color: #ffb03b; } #chat.colored-nicks .user.color-4, #chat.colored-nicks .user.color-20 { color: #cc7d08; } #chat.colored-nicks .user.color-5, #chat.colored-nicks .user.color-21 { color: #ffd34e; } #chat.colored-nicks .user.color-6, #chat.colored-nicks .user.color-22 { color: #cca01b; } #chat.colored-nicks .user.color-7, #chat.colored-nicks .user.color-23 { color: #acf046; } #chat.colored-nicks .user.color-8, #chat.colored-nicks .user.color-24 { color: #d5f572; } #chat.colored-nicks .user.color-9, #chat.colored-nicks .user.color-25 { color: #499e8d; } #chat.colored-nicks .user.color-10, #chat.colored-nicks .user.color-26 { color: #b5ffe1; } #chat.colored-nicks .user.color-11, #chat.colored-nicks .user.color-27 { color: #35a7ff; } #chat.colored-nicks .user.color-12, #chat.colored-nicks .user.color-28 { color: #91a6ff; } #chat.colored-nicks .user.color-13, #chat.colored-nicks .user.color-29 { color: #8a46f0; } #chat.colored-nicks .user.color-14, #chat.colored-nicks .user.color-30 { color: #ff88dc; } #chat.colored-nicks .user.color-15, #chat.colored-nicks .user.color-31 { color: #bd8d46; } #chat.colored-nicks .user.color-16, #chat.colored-nicks .user.color-32 { color: #f0c079; } /* Borders */ #chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { border-color: var(--window-bg-color); } /* Button colors */ #viewport .lt, #viewport .rt, #chat button.menu, #chat .count:before, #sidebar button, #form #submit, #footer button { color: var(--link-color); } #viewport .lt:hover, #viewport .rt:hover, #chat button.menu:hover, #sidebar button:hover, #form #submit:hover { color: var(--highlight-bg-color); } /* Active/hover */ .context-menu-item:focus, .textcomplete-item:focus, .context-menu-item:hover, .textcomplete-item:hover, .textcomplete-menu .active, #chat .userlist .user.active, #sidebar .active, #sidebar .active:hover, #sidebar .chan:hover, #footer button:hover { background-color: var(--active-bg-color); } /* Network-/channel list sidebar */ #sidebar .chan, #sidebar .empty { color: var(--body-color); } #sidebar, #footer, .tse-scroll-content { width: 170px; } #sidebar .chan, #sidebar .chan-placeholder { padding-bottom: 3px; padding-top: 3px; } #sidebar .network, #sidebar .network-placeholder { margin-bottom: 3px; } #sidebar .network .collapse-network-icon:before { color: var(--highlight-border-color); } #sidebar .network .collapse-network { width: 35px; opacity: 100; } #sidebar .logo, #sidebar .logo-inverted, #sidebar .chan::before, .add-channel, .add-channel-tooltip, #sidebar .chan.channel .close, .not-secure-tooltip, .not-secure-icon { display: none; } #sidebar .chan.lobby, #sidebar .not-secure .chan.lobby { color: var(--highlight-border-color); } #sidebar .chan.lobby.active, #sidebar .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .chan.lobby.active, #sidebar .not-secure .chan.lobby .lobby-wrap:hover { color: var(--highlight-bg-color); } /* Nick list sidebar */ #chat .user-mode:before { padding: 12px 16px 0px; margin-bottom: 0px; } #chat .userlist .count { background: var(--body-bg-color); } #chat .names .user:hover { opacity: 0.6; } /* Inputs */ .input, .input:hover, input, #form, #chat .userlist .search { color: var(--body-color); background-color: var(--window-bg-color); border-color: var(--dim-color)!important; } .input::placeholder, input::placeholder, textarea::placeholder, #chat .userlist .search::placeholder { color: var(--dim-color); } #form { border: none; } #user-specified-css-input { height: 400px; } .password-container .reveal-password span, #settings .extra-help, #settings .extra-experimental { color: var(--highlight-border-color); } /* Windows */ #windows .window { box-shadow: none; } /* Content menu */ .context-menu-item, .textcomplete-item, .textcomplete-item a { color: var(--body-color); } .textcomplete-menu, #context-menu { background-color: var(--body-bg-color); } .context-menu-item::before, .textcomplete-item::before { color: var(--link-color); } /* Channels */ #chat .channel .message.highlight { background: var(--body-bg-color); border-left: 5px solid var(--highlight-border-color); } #chat .channel .message.highlight .content { border-left: none; } #chat .self { background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px); } #chat .self .text { color: var(--body-color); } #chat .chan .notice .user, #chat .notice .text, #chat .notice .time, .irc-fg2 { color: var(--link-color)!important; } #chat .toggle-content { background: var(--body-bg-color); } #chat .toggle-text a { color: var(--body-color); } #windows .header .topic { color: var(--body-color); } /* MOTD */ #chat .motd .from:before { color: var(--highlight-border-color); } #chat .msg.motd .text { background-color: var(--dark-bg-color); } /* Hide bot spam */ #chat .msg[data-from="travis-ci"] .toggle-button, #chat .msg[data-from="MiniBot"] .toggle-button, #chat .msg[data-from="Wendy"] .toggle-button, #chat .msg[data-from="github-status"] .toggle-button { transform: rotate(90deg); } #chat .msg[data-from="travis-ci"] .toggle-button.opened, #chat .msg[data-from="MiniBot"] .toggle-button.opened, #chat .msg[data-from="Wendy"] .toggle-button.opened, #chat .msg[data-from="github-status"] .toggle-button.opened { transform: rotate(0deg); } #chat .msg[data-from="travis-ci"] .toggle-content, #chat .msg[data-from="MiniBot"] .toggle-content, #chat .msg[data-from="Wendy"] .toggle-content, #chat .msg[data-from="github-status"] .toggle-content { display: inline-flex !important; } #chat .msg[data-from="travis-ci"] .toggle-content.show, #chat .msg[data-from="MiniBot"] .toggle-content.show, #chat .msg[data-from="Wendy"] .toggle-content.show, #chat .msg[data-from="github-status"] .toggle-content.show { display: none !important; } ```

[fnutt]

Let's publish it now? or is there something else we need to do first?

You should probably remove the "fork of a fork of a fork" etc. from README.md and update the screenshot.

[MiniDigger]

https://www.npmjs.com/package/thelounge-theme-mininapse \o/

will do screenshots once I get some scrollback and stuff