Creating a Custom Design

Creating a Custom Design

WebSpeak3 lets you build your own visual theme ("design") without touching any code — just CSS, entered directly in the app. This page explains how.

Getting started

1. Open Options → Appearance.

2. Click + Neues Design (+ New Design).

3. Give it a name.

4. Pick a base layout:

   • Standard — the classic WebSpeak3 chrome (plain menu bar).
   • Nova — the alternate layout (collapsed hamburger menu, connect splash screen).

   The base only controls structure/behavior (which menu style, splash screen, etc.). Your CSS controls everything about how it looks.

5. Write your CSS in the text box (see below).

6. Click Speichern (Save) — your design is saved locally and selected immediately.

Your design is stored in your browser's local storage. It is not synced anywhere automatically — use Export to save it as a .json file, and Import design to load one someone else shared with you, or to restore your own on another device/browser.

Writing the CSS

Your CSS is injected into the page while your design is active. The easiest and most powerful way to restyle WebSpeak3 is to override its CSS custom properties (variables) on the .ts-app root element:

.ts-app {
  --accent: #ff6b6b;
  --bg: #101014;
  --text: #f5f5f5;
}

This works reliably regardless of whether Standard or Nova is your base, and regardless of light/dark mode — your .ts-app { ... } override always wins over the built-in theme values.

Available variables

Variable	What it controls
--bg	Main app background
--bg-toolbar-1, --bg-toolbar-2	Menu bar / toolbar gradient
--border, --border-soft	Borders and dividers
--text, --text-muted	Primary / secondary text color
--accent	Highlight color (links, active states, primary buttons)
--input-bg, --input-text	Text fields and inputs
--button-bg-1, --button-bg-2	Button gradient
--button-bg-hover-1, --button-bg-hover-2	Button gradient on hover
--row-hover	Row highlight on hover (server tree, chat)
--client-text	Other users' names in the tree
--self-text	Your own name in the tree
--log-bg, --log-text, --log-error	Chat/log background, text, and error color

(Nova additionally uses --success and --text-faint; these are optional to override.)

Restyling specific elements

You're not limited to variables — target any element with normal CSS, scoped under .ts-app so it only applies while your design is active:

.ts-app .ts-server-tree {
  background: #1a0010;
  border-radius: 12px;
}

.ts-app button {
  border-radius: 999px;
}

Changing the layout

Because this is real CSS, you can go beyond colors — hide elements, reorder them, or restyle their positioning:

/* Hide an element entirely */
.ts-app .some-class {
  display: none;
}

/* Reorder flex children */
.ts-app .ts-toolbar {
  display: flex;
}
.ts-app .ts-toolbar .some-child {
  order: 2;
}

Use your browser's DevTools (right-click → Inspect) while WebSpeak3 is open to find the class names of the element you want to target.

Managing your designs

From the Design screen, each of your custom designs has action buttons:

• ✎ Bearbeiten — edit the name, base, or CSS
• ⧉ Duplizieren — start a new design as a copy of this one
• ⭳ Exportieren — download the design as a .json file to back up or share
• 🗑 Löschen — delete the design (with confirmation)

Sharing a design

To share a design with someone else:

1. Export it (downloads a .json file).
2. Send them the file.
3. They open Options → Appearance → Import design and select the file.

Troubleshooting

• My changes aren't visible. Make sure your design is actually selected (its card is highlighted) — saving an edit doesn't automatically select it if you were editing a design that wasn't active.
• A color didn't change. Double check you're overriding the right variable (see the table above) — some colors are hard-coded per-element rather than driven by a variable; in that case target the element's class directly instead.
• I broke the layout and want to start over. Delete the design and create a new one, or edit it and clear the CSS box back to (or toward) empty.