Theme vPOS

vPOS themes are CSS skins loaded after the core app styles. They should change presentation while leaving the HTML structure and JavaScript behavior alone.

Theme Selector

Scope a bundled theme with the body data attribute:

body[data-vpos-style="my-style-id"] {
  --bg: #10131b;
  --panel: #171c27;
  --text: #f7fbff;
  --accent: #22d3ee;
}

Core Tokens

--bg, --bg-2, --panel, --panel-strong, --panel-soft, --panel-glass
--text, --muted, --muted-2, --line, --line-strong
--accent, --accent-rgb, --accent-2, --accent-2-rgb
--radius, --radius-sm, --shadow, --shadow-soft, --glow

Stable Targets

body[data-vpos-style] for global theme scoping.
.appbar, .flyout, and .shell for the app frame.
.panel, .settings-card, and .settings-group for framed surfaces.
.messages, .message-row, .message, .message.user, and .message.assistant for chat.
.composer, button, input, select, and textarea for controls.
.modal-card, .card-gallery, .board-card, .slip-editor, and .slip-visual for secondary workflows.

Guidelines

Keep touch targets at least 44px, preserve readable contrast, avoid hiding buttons or form fields, and test both desktop and narrow mobile widths. Prefer CSS variables first, then scoped component overrides.