first commit

src/lib/Index.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import CallTauri from '$lib/example/call-tauri/CallTauri.svelte';
+  import HashInput from '$lib/example/hash/HashInput.svelte';
+</script>
+
+<div class="flex flex-col gap-8 items-center font-bold drop-shadow-ft">
+  <h1 class="text-4xl mt-16">Welcome</h1>
+  <h2 class="text-xl">
+    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
+      >Svelte Tauri</span
+    > Template
+  </h2>
+
+  <CallTauri />
+  <HashInput />
+</div>

src/lib/example/call-tauri/CallTauri.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { invoke } from '@tauri-apps/api';
+
+	let message = '';
+
+	async function callTauri() {
+		message = await invoke('called_from_js');
+	}
+</script>
+
+<button on:click={callTauri} class=" font-extrabold btn btn-outline btn-secondary btn-md"
+	>Call Tauri</button
+>
+<div class="relative">
+	{#key message}
+		<p
+			class="absolute outline-secondary border-b-2 border-secondary text-2xl
+     whitespace-nowrap
+      -translate-x-1/2 -translate-y-1/2"
+			in:fade={{ duration: 300 }}
+		>
+			{message}
+		</p>
+	{/key}
+</div>

src/lib/example/footer/Footer.svelte

@@ -0,0 +1,13 @@
+<!-- Make she the bottom rounded value of fixed elements is the same as  html/body in the app.scss file  -->
+<div
+	class="fixed bottom-0 w-full rounded-b-3xl h-12 items-center flex justify-around bg-base-100 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]"
+>
+	<a target="_blank" href="https://github.com/Fractal-Tess">
+		Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md">Fractal-Tess</span>
+	</a>
+
+	<a
+		href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
+		class="border-b-2 border-secondary">GitHub</a
+	>
+</div>

src/lib/example/hash/HashInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { invoke } from '@tauri-apps/api';
+
+  let hashInput = 'Hello world';
+  let hashOutput: string = '';
+  $: (async () => {
+    hashOutput = await invoke('hash256sum', { hashInput });
+  })();
+</script>
+
+<span class="text-center -mb-4 text-md">{hashOutput}</span>
+<div class="form-control">
+  <label class="input-group">
+    <span>Hash string</span>
+    <input
+      bind:value={hashInput}
+      type="text"
+      class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
+    />
+  </label>
+</div>

src/lib/example/header/Header.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import ThemeToggleIcon from '$lib/example/header/ThemeToggleIcon.svelte';
+	import { theme } from '$lib/stores/theme';
+	import { appWindow } from '@tauri-apps/api/window';
+</script>
+
+<div data-tauri-drag-region class="h-12 bg-base-100 shadow-lg items-center justify-between flex">
+	<button on:click={theme.toggleTheme} class="hover:text-secondary ml-2" aria-live="polite">
+		<ThemeToggleIcon cssClass={'w-8'} />
+	</button>
+
+	<div>
+		<button
+			on:click={appWindow.minimize}
+			aria-live="polite"
+			class="p-2 text-xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-window-minimize w-6" />
+		</button>
+		<button
+			on:click={appWindow.close}
+			aria-live="polite"
+			class="p-2 text-2xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-xmark w-6" />
+		</button>
+	</div>
+</div>

src/lib/example/header/ThemeToggleIcon.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	export let cssClass = 'w-8';
+</script>
+
+<svg class={cssClass} aria-hidden="true" viewBox="0 0 24 24">
+	<mask class="moon" id="moon-mask">
+		<rect x="0" y="0" width="100%" height="100%" fill="white" />
+		<circle cx="24" cy="10" r="6" fill="black" />
+	</mask>
+	<circle
+		class="sun"
+		cx="12"
+		cy="12"
+		r="6"
+		mask="url(#moon-mask)"
+		fill="currentColor"
+	/>
+	<g class="sun-beams" stroke="currentColor" stroke-width="2px">
+		<line x1="12" y1="1" x2="12" y2="3" />
+		<line x1="12" y1="21" x2="12" y2="23" />
+		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+		<line x1="1" y1="12" x2="3" y2="12" />
+		<line x1="21" y1="12" x2="23" y2="12" />
+		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+	</g>
+</svg>
+
+<style>
+	svg .moon,
+	svg .sun,
+	svg .sun-beams {
+		transform-origin: center center;
+	}
+
+	:global(.light) svg .sun {
+		transform: scale(1.75);
+	}
+
+	:global(.light) svg .sun-beams {
+		opacity: 0;
+	}
+
+	:global(.light) svg .moon > circle {
+		transform: translateX(-7px);
+	}
+
+	@supports (cx: 1) {
+		:global(.light) svg .moon > circle {
+			transform: translateX(0);
+			cx: 17;
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		svg .sun {
+			transition: transform var(--transition-duration-long)
+				var(--ease-elastic-3);
+		}
+
+		svg .sun-beams {
+			transition: transform var(--transition-duration-long)
+					var(--ease-elastic-4),
+				opacity var(--transition-duration-long) var(--ease-3);
+		}
+
+		svg .moon > circle {
+			transition: transform calc(var(--transition-duration-long) / 2)
+				var(--ease-out-5);
+		}
+
+		@supports (cx: 1) {
+			svg .moon > circle {
+				transition: cx calc(var(--transition-duration-long) / 2)
+					var(--ease-out-5);
+			}
+		}
+
+		:global(.light) svg .sun {
+			transform: scale(1.75);
+			transition-timing-function: var(--ease-3);
+			transition-duration: calc(var(--transition-duration-long) / 2);
+		}
+
+		:global(.light) svg .sun-beams {
+			transform: rotateZ(-25deg);
+			transition-duration: calc(var(--transition-duration-long) / 3);
+		}
+
+		:global(.light) svg .moon > circle {
+			transition-delay: calc(var(--transition-duration-long) / 2);
+			transition-duration: var(--transition-duration-long);
+		}
+	}
+</style>

src/lib/stores/theme.ts

@@ -0,0 +1,29 @@
+import { Store } from 'tauri-plugin-store-api';
+import type { Theme } from '../../types';
+import { writable } from 'svelte/store';
+
+const store = new Store('.settings.dat');
+
+const createThemeStore = () => {
+	const { subscribe, update, set } = writable('');
+
+	return {
+		subscribe,
+		toggleTheme: () => {
+			update(currentTheme => {
+				const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+				store.set('theme', newTheme);
+				return newTheme;
+			});
+		},
+		load: async () => {
+			let storedTheme = (await store.get('theme')) as Theme | null;
+			if (!storedTheme) {
+				storedTheme = 'dark';
+				store.set('theme', storedTheme);
+			}
+			set(storedTheme);
+		}
+	};
+};
+export const theme = createThemeStore();