mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
22a73943e1
Final cleanup of references missed in previous rename commits: - Dockerfiles: PUBLIC_MANA_CORE_AUTH_URL → PUBLIC_MANA_AUTH_URL - Go modules: github.com/manacore/* → github.com/mana/* (7 go.mod files) - launchd plists: com.manacore.* → com.mana.* (14 files renamed + content) - Image assets: *_Manacore_AI_Credits* → *_Mana_AI_Credits* (11 files) - .env.example files: ManaCore brand strings → Mana - .prettierignore: stale apps/manacore/* paths → apps/mana/* - Markdown docs (CLAUDE.md, /docs/*): mana-core-auth → mana-auth, etc. Excluded from rename: .claude/, devlog/, manascore/ (historical content), client testimonials, blueprints, npm package refs (@mana-core/*). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
152 lines
3.9 KiB
Markdown
152 lines
3.9 KiB
Markdown
# @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
|
|
|
|
```bash
|
|
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.
|
|
|
|
```svelte
|
|
<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.
|
|
|
|
```svelte
|
|
<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.
|
|
|
|
```svelte
|
|
<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
|
|
|
|
```svelte
|
|
<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:
|
|
|
|
```css
|
|
/* 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
|