Merge pull request #1059 from rainlanguage/1058-move-buttondarkmodesv…

…elte-component-in-ui-components

Move ButtonDarkMode component into ui-components

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>

tauri-app/src/lib/components/Sidebar.svelte

@@ -12,12 +12,13 @@
   import FileLinesSolid from 'flowbite-svelte-icons/FileLinesSolid.svelte';
   import IconExternalLink from '$lib/components/IconExternalLink.svelte';
   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 IconTelegram from '$lib/components/IconTelegram.svelte';
   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 () => {
@@ -107,7 +108,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">