Studio
2

Theming

Where tokens live

Package installs use @mielui/svelte/ui.css . CLI installs use src/lib/mielui/ui.css . Both define the same color, typography, radius, and motion tokens.

Theme Studio

The Theme Studio lets you start from a preset and adjust colors, fonts, spacing, motion, and surface effects. Open Advanced colors for individual color tokens.

Studio saves your draft locally when browser storage is available. If storage is blocked or full, download the theme JSON to preserve your changes.

Choose Use theme, download mielui-theme.json into your project root, and run the command for a new or existing Mielui setup. The JSON includes both color modes and all Studio overrides. New setups get styles.css, which imports ui.css followed by theme.css. Load that stylesheet in your root layout. Fonts must also be loaded by your app.

pnpm dlx @mielui/svelte init --preset ./mielui-theme.json

For an existing setup, run the command below. It replaces theme.css. Built-in preset slugs, such as default, can be used in place of the JSON path.

pnpm dlx @mielui/svelte add theme ./mielui-theme.json

Global glass surfaces

Enable Glass surfaces under Appearance in Studio, or set --mielui-surface: glass on :root. Components with surface support inherit that choice when the prop is omitted. Set surface="solid" or surface="glass" on one component to override the theme. Put the variable on :root so portaled menus and dialogs inherit it too.

:root {
  --mielui-surface: glass;
}

The global setting uses CSS style queries. Browsers without style-query support retain solid surfaces. Explicit surface="glass" still works with backdrop-filter support. Reduced transparency keeps an opaque background and removes blur.

Override tokens

Set values in your app CSS after importing Mielui's sheet. Light defaults go in @theme . Dark values go under .dark .

@theme {
  --color-primary: #155eef;
  --color-background: #fcfcfd;
  --color-foreground: #101828;
  --radius-lg: 0.55rem;
  --font-sans: 'DM Sans', sans-serif;
}

.dark {
  --color-background: #0d1118;
  --color-foreground: #f5f7fb;
  --color-primary: #7aa2ff;
}

Useful public tokens

  • Color: --color-background , --color-card , --color-panel , --color-secondary , --color-foreground , --color-foreground-muted , --color-primary , --color-on-primary , --color-button-foreground , --color-border , --color-input , --color-ring
  • Type: --font-sans , --font-mono , --font-header , --font-size-header , and role weights like--font-weight-body , --font-weight-label , --font-weight-button
  • Radius and density: --radius-sm , --radius-md , --radius-lg , --radius-xl , and the base spacing unit--mielui-space-unit
  • Motion: --motion-duration-hover , --motion-duration-menu , --motion-duration-panel , --motion-duration-sheet
  • Elevation: --elevation-1 , --elevation-float , --elevation-control , --elevation-modal

Built-in presets

Five presets ship with Mielui: default , magic , bitsy , open , and functional . Preview them live on the themes page , where you can copy each preset's CSS or JSON.

With the CLI, install a preset into theme.css :

pnpm dlx @mielui/svelte add theme open

Import it after ui.css to apply its overrides:

@import './lib/mielui/ui.css';
@import './lib/mielui/theme.css';

mielui list shows available built-in theme slugs.

Dark mode

Toggle a .dark class on <html> . Components do not manage the class for you.

Theme JSON

Theme JSON version 4 is the format shared by Studio and the CLI. Export it from Studio to preserve both color modes and your overrides.

  • foundation.light and foundation.dark hold each mode's base, border, background, secondary, foreground, foregroundMuted, and onPrimary colors.
  • typography contains headerSize, headerWeight, and roleWeights for body, label, button, badge, and description text.
  • tokens.shared , tokens.light , and tokens.dark hold raw token overrides, including per-mode values for--color-primary .
  • chrome controls borders, edgeHighlight, surfaceShadows, controlShadows, dialogShadows, travelingHighlight, primaryStroke, and interactiveCursor. Turning off travelingHighlight keeps the selected fill and removes its movement.

Setmotion: "none" to disable animations, including dialogs, menus, and the traveling highlight. Edge highlight strength ranges from 0 to 1.

Class overrides

Styled components accept class . Use Tailwind utilities or your own classes for one-off tweaks.

<Button class="w-full rounded-2xl">Continue</Button>

Component selectors

Components render data-ui (and often data-variant / data-size ). Scope CSS to a family without forking files.

[data-ui='button'][data-variant='primary'] {
  border-radius: 999px;
}

[data-ui='badge'][data-variant='secondary'] {
  text-transform: uppercase;
}

Edit the source

With the CLI path, files live under src/lib/mielui/components/<name>/ . Edit them when you need behavior changes, not just style.

# after: pnpm dlx @mielui/svelte add button
src/lib/mielui/components/button/
├── button.svelte
└── index.ts

Borders

Set chrome.borders to "single" for one perimeter border on framed surfaces, or "double" for the inset frame. The default is "double", including themes saved before this option existed. Studio exposes this choice under Appearance.

const theme = {
    ...DEFAULT_THEME,
    chrome: { borders: 'single' as const }
};

const css = themeToCss(theme);

The setting covers all double-frame surfaces, including cards, menus, popovers, dialogs, sheets, Notch, Toast, code blocks, diffs, inset tables, composers, and chart tooltips. Inset variants keep their content padding and footer composition. Surfaces that already have one border stay single. Glass, shadows, focus, and edge highlights remain independent.

Chart colors

Studio's Color → Chart colors controls edit --chart-1 through --chart-5 for the active light or dark theme. The defaults are pastel purple, blue, red, green, and yellow. Cartesian charts, pie charts, gauges, heatmaps, and their demos use these tokens. Explicit series colors and semantic gauge tones still take precedence.

:root {
  --chart-1: #b8a1f2;
  --chart-2: #8bc7f5;
  --chart-3: #f49d9d;
  --chart-4: #8ed8b0;
  --chart-5: #f2d77d;
}

Inset strip position

Appearance → Inset strip moves exposed chrome above or below its inset content. Studio exports --mielui-inset-position as top or bottom. Without that token, components keep their authored order. Override it locally with class="[--mielui-inset-position:top]" when a header must stay above its content, as the installation command tabs do. Data tables keep filters above rows and pagination below them.

The default radius scale is 8, 10, 14, and 20 pixels from small to extra large. Glass backdrop in the Studio footer adds color behind the preview; it is a viewing aid and is not included in your exported theme.

Edge highlights

Set chrome.edgeHighlight to adjust the thin light-catching edges on controls, keycaps, and raised surfaces. The default is 0.5. Use 0 to remove that light or 1 for full strength. Focus rings, borders, and drop shadows keep their existing colors and opacity. Shadow switches still take precedence.

const theme = {
    ...DEFAULT_THEME,
    chrome: { edgeHighlight: 0.5 }
};

const css = themeToCss(theme);

Studio exposes Edge highlight under Appearance. Turn it off to remove the highlight, or adjust its strength while enabled. Turning it back on restores the last strength used in that session. Preset JSON, copied CSS, saved drafts, and CLI theme imports preserve it.

Next

Components