From 7b8b41021cc596b4091f4523cd3aaccdd9169c6e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 12:22:37 +0300
Subject: [PATCH] feat(ThemeSwitch): create ThemeSwitch component that uses
 ThemeMager toggle to switch theme

---
 src/features/ChangeAppTheme/index.ts          |  2 +
 src/features/ChangeAppTheme/model/index.ts    |  1 +
 .../ui/ThemeSwitch/ThemeSwitch.stories.svelte | 59 +++++++++++++++++++
 .../ui/ThemeSwitch/ThemeSwitch.svelte         | 26 ++++++++
 src/features/ChangeAppTheme/ui/index.ts       |  1 +
 5 files changed, 89 insertions(+)
 create mode 100644 src/features/ChangeAppTheme/index.ts
 create mode 100644 src/features/ChangeAppTheme/model/index.ts
 create mode 100644 src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
 create mode 100644 src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
 create mode 100644 src/features/ChangeAppTheme/ui/index.ts

diff --git a/src/features/ChangeAppTheme/index.ts b/src/features/ChangeAppTheme/index.ts
new file mode 100644
index 0000000..80b33de
--- /dev/null
+++ b/src/features/ChangeAppTheme/index.ts
@@ -0,0 +1,2 @@
+export * from './model';
+export * from './ui';
diff --git a/src/features/ChangeAppTheme/model/index.ts b/src/features/ChangeAppTheme/model/index.ts
new file mode 100644
index 0000000..cbc18dd
--- /dev/null
+++ b/src/features/ChangeAppTheme/model/index.ts
@@ -0,0 +1 @@
+export { themeManager } from './store/ThemeManager/ThemeManager.svelte';
diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
new file mode 100644
index 0000000..e3334f7
--- /dev/null
+++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
@@ -0,0 +1,59 @@
+<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';
+import {
+    onDestroy,
+    onMount,
+} from 'svelte';
+
+// Current theme state for display
+const currentTheme = $derived(themeManager.value);
+const themeSource = $derived(themeManager.source);
+const isDark = $derived(themeManager.isDark);
+
+// Initialize themeManager on mount
+onMount(() => {
+    themeManager.init();
+});
+
+// Clean up themeManager when story unmounts
+onDestroy(() => {
+    themeManager.destroy();
+});
+</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>
diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
new file mode 100644
index 0000000..74823dc
--- /dev/null
+++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
@@ -0,0 +1,26 @@
+<!--
+    Component: ThemeSwitch
+    Toggles the theme between light and dark mode.
+-->
+<script lang="ts">
+import type { ResponsiveManager } from '$shared/lib';
+import { IconButton } from '$shared/ui';
+import MoonIcon from '@lucide/svelte/icons/moon';
+import SunIcon from '@lucide/svelte/icons/sun';
+import { getContext } from 'svelte';
+import { themeManager } from '../../model';
+
+const responsive = getContext<ResponsiveManager>('responsive');
+
+const theme = $derived(themeManager.value);
+</script>
+
+<IconButton onclick={() => themeManager.toggle()} size={responsive.isMobile ? 'sm' : 'md'} title="Toggle theme">
+    {#snippet icon()}
+        {#if theme === 'light'}
+            <MoonIcon />
+        {:else}
+            <SunIcon />
+        {/if}
+    {/snippet}
+</IconButton>
diff --git a/src/features/ChangeAppTheme/ui/index.ts b/src/features/ChangeAppTheme/ui/index.ts
new file mode 100644
index 0000000..14e9d6c
--- /dev/null
+++ b/src/features/ChangeAppTheme/ui/index.ts
@@ -0,0 +1 @@
+export { default as ThemeSwitch } from './ThemeSwitch/ThemeSwitch.svelte';