45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ThemeSwitch from './ThemeSwitch.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Features/ThemeSwitch',
|
|
component: ThemeSwitch,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Theme toggle button that switches between light and dark modes. Uses ThemeManager to persist user preference and sync with system preference. Displays sun/moon icon based on current theme.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
},
|
|
argTypes: {
|
|
// ThemeSwitch has no explicit props - it uses themeManager internally
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { themeManager } from '$features/ChangeAppTheme';
|
|
|
|
// Current theme state for display
|
|
const currentTheme = $derived(themeManager.value);
|
|
const themeSource = $derived(themeManager.source);
|
|
</script>
|
|
|
|
<Story name="Default">
|
|
<div class="flex items-center justify-center p-8 gap-4">
|
|
<ThemeSwitch />
|
|
<div class="text-sm text-muted-foreground">
|
|
Theme: <span class="font-semibold">{currentTheme}</span>
|
|
{#if themeSource === 'user'}
|
|
<span class="text-xs ml-2">(user preference)</span>
|
|
{:else}
|
|
<span class="text-xs ml-2">(system preference)</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</Story>
|