Mist Theme Setup

Apply Mist theme tokens and update button and card primitives for documentation-style UI styling.

Theme Quickstart

Add the Mist theme variables to your global stylesheet (for example app.css or globals.css) so Mist primitives resolve color, border, and contrast consistently.

globals.css
[data-theme="mist"] .theme-container {
	--radius: 0.625rem;
	--background: var(--color-white);
	--foreground: var(--color-zinc-950);
	--card: var(--color-white);
	--card-foreground: var(--color-zinc-950);
	--popover: var(--color-white);
	--popover-foreground: var(--color-zinc-950);
	--primary: var(--color-indigo-500);
	--primary-foreground: var(--color-white);
	--secondary: var(--color-indigo-100);
	--secondary-foreground: var(--color-indigo-600);
	--muted: var(--color-zinc-100);
	--muted-foreground: var(--color-zinc-600);
	--accent: var(--color-zinc-700);
	--accent-foreground: var(--color-white);
	--destructive: var(--color-red-600);
	--border: var(--color-zinc-200);
	--input: var(--color-zinc-200);
	--ring: var(--color-indigo-500);

	@variant dark {
		--radius: 0.625rem;
		--background: var(--color-white);
		--foreground: var(--color-zinc-950);
		--card: var(--color-white);
		--card-foreground: black;
		--popover: var(--color-white);
		--popover-foreground: var(--color-zinc-950);
		--primary: var(--color-indigo-500);
		--primary-foreground: var(--color-white);
		--secondary: var(--color-indigo-100);
		--secondary-foreground: var(--color-indigo-600);
		--muted: var(--color-zinc-100);
		--muted-foreground: var(--color-zinc-600);
		--accent: var(--color-zinc-700);
		--accent-foreground: var(--color-white);
		--destructive: var(--color-red-600);
		--border: var(--color-zinc-200);
		--input: var(--color-zinc-200);
		--ring: var(--color-indigo-500);
	}

	@apply *:text-foreground;
}

Apply Theme

Ensure your root body includes theme-container so the selected Mist theme is applied across the application.

src/app.html
<body data-theme="mist" class="theme-container">
	<!-- Your Application -->
</body>

Required Components

After theme tokens are configured, update these Mist primitives in your app.

Component Import Path Update Scope
Button $lib/components/ui/mist/button Variant and size classes, anchor/button rendering
Card $lib/components/ui/mist/card Root variants and all card composition primitives

Button Component

Mist button adds a neutral variant for bold monochrome actions while keeping the standard shadcn-like variants.

Usage

button-usage.svelte
<script lang="ts">
	import { Button } from "$lib/components/ui/mist/button";
</script>

<Button variant="neutral">Neutral Button</Button>

Source

Card Component

Mist card adds soft and mixed variants to support subtle sections commonly used across documentation-style layouts.

Usage

card-usage.svelte
<script lang="ts">
	import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/mist/card";
</script>

<Card variant="soft">
	<CardHeader>
		<CardTitle>Soft Card</CardTitle>
	</CardHeader>
	<CardContent>...</CardContent>
</Card>

<Card variant="mixed">
	<CardHeader>
		<CardTitle>Mixed Card</CardTitle>
	</CardHeader>
	<CardContent>...</CardContent>
</Card>

Source

Setup Complete

Mist theme setup is now complete. Your app is ready to start using Mist components and build calm, documentation-focused interfaces.

Use primitives from $lib/components/ui/mist/* or explore the Mist components collection to start composing pages.