Auch verfügbar in: DE Deutsch

Themes & Customising the look

Zuletzt aktualisiert: 30.09.2026

Inhalt

Mesh ships with 7 theme presets and a Custom CSS slot for pixel-perfect tuning.

The 7 presets

Preset Character
dark Default. Navy-petrol base, teal accents
light Light, white-grey-teal — for the office during the day
terminal Monochrome green on black, "hacker" look
itsweber Cyan-blue hero, glassmorphism — brand theme
slate Warm-dark with amber accents
modern-light Notion-style light with soft pastel accents
graphite-command Command-centre look, graphite + mint

→ Switch under Admin → System → Theme.

Accent colour

Every theme has a default accent colour; you override it with the colour picker. The value (theme.accent) is injected at runtime as CSS variable --brand — takes effect immediately without a reload.

Background pattern

Four options:

  • none — accent glow only
  • mesh — fine 48 px grid
  • dots — 18 px dots
  • stripes — 45° stripes

Affects the full-page background.

Background image

Upload a JPG/PNG/WebP/GIF up to 10 MB — displayed full-screen, cover + center behind the layout.

Custom CSS

Admin → System → Custom CSS opens an editor with live preview.

Important class anchors:

.app-header        /* header bar */
.app-nav           /* route pills */
.header-search-trigger   /* search bar */
.command-overview  /* KPI banner */
.infra-card        /* server cards */
.service-grid      /* service launcher */
.widget-card       /* widget container */
.app-footer        /* footer */

CSS variables per theme (visible in browser devtools):

[data-theme="itsweber"] {
  --itw-cyan-400: #2ea3f2;
  --itw-cyan-500: #1577a3;
  --itw-grad-hero: linear-gradient(180deg, ...);
}

Creating vs overriding a theme

Mesh has no theme editor UI for creating entirely new themes. If you want an 8th preset:

  1. Write CSS for the theme (see apps/web/src/app/globals.css as reference)
  2. Open a PR against the repo — contributions are welcome

Pixel tweaks to an existing theme: Custom CSS is enough, no PR needed.

Browser cache

Theme switches are instant, but Custom CSS edits are sometimes cached. Ctrl + F5 (hard refresh) helps.

Verwandte Seiten