Themes

How Themes Work

Simple IRC Client ships with two built-in themes: Classic, a traditional one-line-per-message IRC layout, and Modern, an avatar-based layout with message grouping like contemporary chat apps. Under the hood a theme is nothing more than a CSS stylesheet — every chat message renders the same HTML, and the active theme's CSS decides which parts are visible and how they are arranged.

To switch themes:

1. Click your avatar in the toolbar and choose Profile Settings
2. Pick a theme from the Theme dropdown — it applies immediately

Theme Creator — No CSS Required

The Edit and New theme buttons next to the theme dropdown open the Theme Creator, which builds the stylesheet for you from simple controls:

• Layout — start from the Classic or Modern base
• Options — toggle seconds in timestamps, avatars, link previews and compact spacing
• Message colors — color pickers for every message category (join, part, quit, kick, notice, action, errors and more), with separate Light mode and Dark mode palettes

Everything previews live in the chat while you adjust it. Themes made with the Creator can be re-opened in the Creator later — and they are still plain CSS underneath, so you can switch to the CSS editor for the finishing touches at any time.

Editing Theme CSS

For full control, click Edit CSS inside the Creator — it switches to a CSS editor for the same theme (any unsaved Creator tweaks carry over):

• You can edit the built-in Classic and Modern themes too; changes are previewed live in the chat while you type. A Reset to default button restores the shipped stylesheet at any time.
• New themes are pre-filled with the CSS of the currently active one, so you never start from a blank page.
• Delete (next to the dropdown) removes a custom theme — built-in themes cannot be deleted.

Themes are stored locally in your browser or app — nothing is uploaded anywhere. The same themes work in the web app and the desktop builds.

Theming Reference

Each chat message renders a fixed structure of elements with stable class names. Your CSS shows, hides, and arranges them:

Theme CSS is injected globally, so you can also restyle the whole app by overriding CSS variables such as --background, --primary and the message palette (--msg-time, --msg-body, --msg-default, --msg-join, …). Prefix rules with .dark to target dark mode. The Debug and Status channels keep a fixed monospace style that themes do not override.

For example, to recolor join and part messages without touching anything else, add this to any theme's CSS (light-mode values on :root, dark-mode values on .dark):

/* Recolor join/part messages - light and dark mode */
:root {
  --msg-join: #0a7d32;
  --msg-part: #b3261e;
}

.dark {
  --msg-join: #4cd07d;
  --msg-part: #ff6b5e;
}

The full message-color palette with the shipped default values — these are exactly the colors the Theme Creator's color pickers edit (no CSS needed if you prefer the UI), and every built-in theme's CSS ends with these variables ready to tweak:

Example Themes

These themes are not shipped with the app — copy one, open Profile Settings → New theme → Edit CSS, replace the pre-filled CSS with the example and save. Use them as they are or as a starting point for your own design.

Terminal

Green-on-dark monospace, one message per line, timestamps with seconds — like chatting from a phosphor terminal.

/* Terminal - green phosphor, single-line messages */
:root, .dark {
  --background: #0a0f0a;
  --foreground: #33ff66;
  --msg-time: #1f9944;
  --msg-default: #33ff66;
  --msg-body: #33ff66;
  /* category colors readable on the dark background */
  --msg-join: #27c46f;
  --msg-part: #1f9944;
  --msg-quit: #1f9944;
  --msg-kick: #d9c15a;
  --msg-mode: #27c46f;
  --msg-notice: #4dd0e1;
  --msg-info: #1f9944;
  --msg-me: #cf9fff;
  --msg-error: #ff5f5f;
}

.sic-msg {
  display: block;
  padding: 0.125rem 1rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

.sic-msg[data-highlight] {
  background-color: rgba(51, 255, 102, 0.12);
}

/* single-line layout: no avatars, no header row */
.sic-msg-gutter,
.sic-msg-header,
.sic-msg-time-trailing {
  display: none;
}

.sic-msg-time {
  color: var(--msg-time);
}

.sic-msg-time-inline {
  margin-right: 0.75rem;
}

.sic-msg-nick-inline::before { content: '<'; }
.sic-msg-nick-inline::after { content: '>'; }

.sic-msg-body {
  margin-left: 0.5rem;
  color: var(--msg-default);
}

.sic-msg[data-category='join'] .sic-msg-body,
.sic-msg[data-category='part'] .sic-msg-body,
.sic-msg[data-category='quit'] .sic-msg-body,
.sic-msg[data-category='kick'] .sic-msg-body {
  font-style: italic;
  opacity: 0.7;
}

Compact

Maximum density for busy channels: no avatars, no link previews, a fixed-width right-aligned nick column and tight line spacing.

/* Compact - maximum density, aligned nick column */
.sic-msg {
  display: block;
  padding: 0 0.75rem;
  line-height: 1.4;
}

.sic-msg[data-highlight] {
  border-left: 2px solid var(--primary);
  background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* hide everything except the message line */
.sic-msg-gutter,
.sic-msg-header,
.sic-msg-time-trailing,
.sic-msg-time-seconds,
.sic-msg-embeds {
  display: none;
}

.sic-msg-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sic-msg-time {
  color: var(--msg-time);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.sic-msg-nick-inline {
  flex-shrink: 0;
  width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}

.sic-msg-body {
  flex: 1;
  min-width: 0;
  color: var(--msg-default);
}

.sic-msg[data-category='join'] .sic-msg-body,
.sic-msg[data-category='part'] .sic-msg-body,
.sic-msg[data-category='quit'] .sic-msg-body,
.sic-msg[data-category='kick'] .sic-msg-body {
  font-style: italic;
}

High Contrast

Not a full theme but an accessibility tweak: open Edit CSS on the Modern theme and paste this at the end of its stylesheet. It strengthens text colors in both light and dark mode and makes mentions much harder to miss.

/* High contrast - paste at the END of the Modern theme CSS */
:root {
  --msg-time: #3d3d3d;
  --msg-default: #1a1a1a;
  --msg-body: #000000;
}

.dark {
  --msg-time: #c0c0c0;
  --msg-default: #f0f0f0;
  --msg-body: #ffffff;
}

.sic-msg-body {
  font-weight: 500;
}

.sic-msg[data-highlight] {
  border-left: 4px solid var(--primary);
  background-color: color-mix(in oklab, var(--primary) 18%, transparent);
}