Weave's look is configured under Settings → Appearance.
Themes
Weave ships with 17 built-in themes — 12 dark and 5 light — plus a System option that follows your OS preference:
- Dark: Navy, Midnight, Charcoal, Slate, Forest, Dusk, Storm, Nord, Dracula, Gruvbox, Tokyo, Mocha
- Light: Light, Cream, Stone, Solarized, Latte
Separate code highlight themes can be set for dark and light modes so syntax highlighting always looks right regardless of which app theme is active.
Text size & scale
Adjust the global text size and overall UI scale. Chat message text can optionally be sized independently of the rest of the interface, so you can make conversations larger without resizing every panel.
Custom CSS
Any built-in theme can be tweaked or completely replaced using the Custom CSS editor at the bottom of the Appearance settings. CSS is injected after all built-in theme rules, so any variable you set here wins. Changes are live — the UI updates as you type.
The entire visual language of the app is driven by a small set of CSS custom properties
defined on :root. Override whichever ones you need:
:root {
/* ── Backgrounds ───────────────────────────────────────────────
bg-base : main page/panel background
bg-surface : cards, modals, sidebars (sits above bg-base)
bg-hover : generic hover highlight
bg-row-hover: table / list row hover
bg-input : text inputs and textareas
---------------------------------------------------------------- */
--bg-base: #0d1117;
--bg-surface: #161b22;
--bg-hover: #1c2333;
--bg-row-hover: #1a2030;
--bg-input: #0d1117;
/* ── Borders ───────────────────────────────────────────────────
border : default dividers and outlines
border-strong: emphasized borders (focused inputs, active items)
---------------------------------------------------------------- */
--border: #21262d;
--border-strong: #30363d;
/* ── Text ──────────────────────────────────────────────────────
text-heading : page titles, section labels, strong emphasis
text-body : primary readable text
text-secondary: secondary labels, metadata
text-muted : hints, timestamps, less important content
text-faint : placeholders, very subtle decorations
---------------------------------------------------------------- */
--text-heading: #f0f6fc;
--text-body: #c9d1d9;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--text-faint: #484f58;
/* ── Accent ────────────────────────────────────────────────────
accent : buttons, active nav, progress fills, links
accent-hover: accent on mouse-over
accent-text : text rendered on or next to the accent color
accent-bg : subtle accent-tinted background (chips, badges)
accent-bg-soft: even subtler accent tint
---------------------------------------------------------------- */
--accent: #6366f1;
--accent-hover: #5558e3;
--accent-text: #a5b4fc;
--accent-bg: rgba(99, 102, 241, 0.12);
--accent-bg-soft: rgba(99, 102, 241, 0.06);
/* ── Misc ──────────────────────────────────────────────────────
shadow-hover : box-shadow applied to cards on hover
fs-scale : global font-size multiplier (1 = 100 %)
chat-fs-scale: chat message font-size multiplier; defaults to
fs-scale when the per-chat override is off
chart-accent : color used for metric chart bars — defaults to
accent but some themes (e.g. Gruvbox) override
it when the accent reads poorly as a filled bar
---------------------------------------------------------------- */
--shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.4);
--fs-scale: 1;
--chat-fs-scale: var(--fs-scale);
--chart-accent: var(--accent);
}
You do not need to include every property — only the ones you want to change. For example, to swap just the accent color to a warm red while keeping everything else:
:root {
--accent: #e05252;
--accent-hover: #c43e3e;
--accent-text: #f4a0a0;
--accent-bg: rgba(224, 82, 82, 0.12);
--accent-bg-soft: rgba(224, 82, 82, 0.06);
}
