diff --git a/packages/ui-components/src/lib/components/ButtonDarkMode.svelte b/packages/ui-components/src/lib/components/ButtonDarkMode.svelte
new file mode 100644
index 000000000..194f2f0c9
--- /dev/null
+++ b/packages/ui-components/src/lib/components/ButtonDarkMode.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { DarkMode } from 'flowbite-svelte';
+	import { writable } from 'svelte/store';
+	export let colorTheme = writable();
+	function toggle(e: MouseEvent) {
+		const isDark = (e.target as HTMLElement).ownerDocument.documentElement.classList.contains(
+			'dark'
+		);
+		colorTheme.set(isDark ? 'dark' : 'light');
+	}
+</script>
+
+<button type="button" on:click={toggle}>
+	<DarkMode />
+</button>
diff --git a/tauri-app/src/lib/components/ButtonDarkMode.svelte b/tauri-app/src/lib/components/ButtonDarkMode.svelte
deleted file mode 100644
index 15e82315d..000000000
--- a/tauri-app/src/lib/components/ButtonDarkMode.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { DarkMode } from 'flowbite-svelte';
-  import { colorTheme } from '$lib/stores/darkMode';
-
-  function toggle(e: MouseEvent) {
-    const isDark = (e.target as HTMLElement).ownerDocument.documentElement.classList.contains(
-      'dark',
-    );
-    colorTheme.set(isDark ? 'dark' : 'light');
-  }
-</script>
-
-<button type="button" on:click={toggle}>
-  <DarkMode />
-</button>
diff --git a/tauri-app/src/lib/components/Sidebar.svelte b/tauri-app/src/lib/components/Sidebar.svelte
index 053414416..f4ec4e335 100644
--- a/tauri-app/src/lib/components/Sidebar.svelte
+++ b/tauri-app/src/lib/components/Sidebar.svelte
@@ -12,11 +12,12 @@
   import FileLinesSolid from 'flowbite-svelte-icons/FileLinesSolid.svelte';
   import { IconExternalLink, IconTelegram } from '@rainlanguage/ui-components';
   import { page } from '$app/stores';
-  import ButtonDarkMode from '$lib/components/ButtonDarkMode.svelte';
+  import ButtonDarkMode from '../../../../packages/ui-components/src/lib/components/ButtonDarkMode.svelte';
   import { PlusSolid } from 'flowbite-svelte-icons';
   import ModalConnect from '$lib/components/ModalConnect.svelte';
   import { onMount } from 'svelte';
   import { getAppCommitSha } from '$lib/services/app';
+  import { colorTheme } from '$lib/stores/darkMode';
 
   let app_sha: string;
   onMount(async () => {
@@ -106,7 +107,7 @@
       </SidebarItem>
     </SidebarGroup>
     <SidebarGroup border class="flex justify-start">
-      <ButtonDarkMode />
+      <ButtonDarkMode {colorTheme} />
     </SidebarGroup>
     <SidebarGroup border class="flex justify-start self-end">
       <div class="flex flex-col text-xs text-gray-500 dark:text-gray-400">