Theming

svelte-chop-chop uses CSS custom properties for theming. Import a built-in theme or override individual variables to match your brand.

Built-in themes

Import exactly one theme in your app entry point or layout:

// Default (dark blue-grey)
import '@we-are-singular/svelte-chop-chop/themes/default';

// Pure dark
import '@we-are-singular/svelte-chop-chop/themes/dark';

// Minimal (no chrome, white overlay)
import '@we-are-singular/svelte-chop-chop/themes/minimal';

CSS custom properties reference

Base

Variable	Default	Description
--chop-bg	#1a1a2e	Editor background.
--chop-surface	#16213e	Toolbar and panel surface.
--chop-border	rgba(255,255,255,0.08)	Divider and border color.
--chop-radius	8px	General border radius.
--chop-font	system-ui, sans-serif	Font family.

Typography

Variable	Default	Description
--chop-text	rgba(255,255,255,0.87)	Primary text color.
--chop-text-muted	rgba(255,255,255,0.5)	Secondary/muted text.
--chop-text-xs	0.7rem	Extra-small font size (labels).

Stencil

Variable	Default	Description
--chop-stencil-border	rgba(255,255,255,0.8)	Stencil border color.
--chop-stencil-border-width	1.5px	Stencil border thickness.
--chop-overlay-bg	rgba(0,0,0,0.55)	Dark overlay outside stencil.
--chop-handle-size	14px	Drag handle hit area.
--chop-handle-color	#fff	Drag handle visual color.
--chop-grid-color	rgba(255,255,255,0.3)	Rule-of-thirds grid lines.

Toolbar & panels

Variable	Default	Description
--chop-toolbar-height	48px	Tab bar height.
--chop-panel-height	100px	Panel strip height.
--chop-accent	#4a9eff	Active tab / accent color.
--chop-tab-color	rgba(255,255,255,0.5)	Inactive tab color.
--chop-tab-active-color	#4a9eff	Active tab color.

Slider

Variable	Default	Description
--chop-slider-track	rgba(255,255,255,0.15)	Slider track background.
--chop-slider-fill	#4a9eff	Slider fill color.
--chop-slider-thumb	#fff	Slider thumb color.

Custom theme example

Override variables in your global CSS to create a custom theme:

/* my-theme.css */
:root {
  --chop-bg: #0d0d0d;
  --chop-surface: #1a1a1a;
  --chop-accent: #ff6b35;
  --chop-tab-active-color: #ff6b35;
  --chop-slider-fill: #ff6b35;
  --chop-handle-color: #ff6b35;
  --chop-stencil-border: rgba(255, 107, 53, 0.8);
}

Import it after the base theme:

import '@we-are-singular/svelte-chop-chop/themes/dark';
import './my-theme.css';