managarten/packages/shared-theme-ui

@mana/shared-theme-ui

Svelte UI components for theme switching. Works with @mana/shared-theme.

Features

• ThemeToggle: Simple light/dark mode toggle button
• ThemeSelector: Visual selector for theme variants
• ThemeModeSelector: Segmented control for light/dark/system

Installation

pnpm add @mana/shared-theme-ui

Prerequisites

• @mana/shared-theme - Theme store
• @mana/shared-icons - Icon components

Components

ThemeToggle

A simple button that toggles between light and dark mode.

<script lang="ts">
	import { theme } from '$lib/stores/theme';
	import { ThemeToggle } from '@mana/shared-theme-ui';
</script>

<ThemeToggle {theme} />

<!-- With options -->
<ThemeToggle {theme} size={24} showTooltip={true} class="my-custom-class" />

Props

Prop	Type	Default	Description
theme	ThemeStore	required	Theme store instance
size	number	20	Icon size in pixels
showTooltip	boolean	false	Show tooltip on hover
class	string	''	Additional CSS classes

ThemeSelector

A visual selector showing all theme variants with color dots.

<script lang="ts">
	import { theme } from '$lib/stores/theme';
	import { ThemeSelector } from '@mana/shared-theme-ui';
</script>

<ThemeSelector {theme} />

<!-- With options -->
<ThemeSelector {theme} showLabels={true} showEmoji={true} compact={false} class="my-custom-class" />

Props

Prop	Type	Default	Description
theme	ThemeStore	required	Theme store instance
showLabels	boolean	true	Show variant labels
showEmoji	boolean	true	Show variant emojis
compact	boolean	false	Compact mode (smaller buttons)
class	string	''	Additional CSS classes

ThemeModeSelector

A segmented control for selecting light, dark, or system mode.

<script lang="ts">
	import { theme } from '$lib/stores/theme';
	import { ThemeModeSelector } from '@mana/shared-theme-ui';
</script>

<ThemeModeSelector {theme} />

<!-- With options -->
<ThemeModeSelector {theme} class="my-custom-class" />

Props

Prop	Type	Default	Description
theme	ThemeStore	required	Theme store instance
class	string	''	Additional CSS classes

Complete Example

<script lang="ts">
	import { theme } from '$lib/stores/theme';
	import { ThemeToggle, ThemeSelector, ThemeModeSelector } from '@mana/shared-theme-ui';
</script>

<div class="settings-panel">
	<h3>Appearance</h3>

	<!-- Quick toggle in header -->
	<div class="header">
		<ThemeToggle {theme} showTooltip />
	</div>

	<!-- Mode selection -->
	<section>
		<label>Mode</label>
		<ThemeModeSelector {theme} />
	</section>

	<!-- Variant selection -->
	<section>
		<label>Color Theme</label>
		<ThemeSelector {theme} />
	</section>
</div>

Styling

All components use CSS variables from @mana/shared-tailwind/themes.css and are fully theme-aware. They automatically adapt to the current theme variant and mode.

Custom Styling

You can override styles using the class prop or by targeting the component classes:

/* Custom toggle button */
.theme-toggle {
	background-color: var(--my-custom-bg);
}

/* Custom selector buttons */
.variant-button.active {
	box-shadow: 0 0 0 2px var(--my-custom-ring);
}

Related Packages

• @mana/shared-theme - Theme store and utilities
• @mana/shared-tailwind - Tailwind preset with theme CSS
• @mana/shared-icons - Icon components