Added custom theme color support

materialious/src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import 'material-dynamic-colors';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import { darkMode } from '../store';
+	import { darkMode, themeColor } from '../store';
 
 	const pages = [
 		{
@@ -35,6 +35,13 @@
 		}
 	];
 
+	async function setColor(color: any) {
+		const target = color.target;
+		const hex = (target as { value: string }).value;
+		await ui('theme', hex);
+		themeColor.set(hex);
+	}
+
 	function toggleDarkMode() {
 		const isDark = get(darkMode);
 
@@ -55,7 +62,7 @@
 		}
 	});
 
-	onMount(() => {
+	onMount(async () => {
 		const isDark = get(darkMode);
 
 		if (isDark === null) {
@@ -73,6 +80,11 @@
 				ui('mode', 'light');
 			}
 		}
+
+		const themeHex = get(themeColor);
+		if (themeHex) {
+			await ui('theme', themeHex);
+		}
 	});
 </script>
 
@@ -121,6 +133,11 @@
 			<span>Light mode</span>
 		{/if}
 	</button>
+	<button>
+		<i>palette</i>
+		<span>Color</span>
+		<input on:change={setColor} type="color" />
+	</button>
 </dialog>
 
 <dialog class="right" id="dialog-notifications">

materialious/src/store.ts

@@ -3,4 +3,5 @@ import type { Writable } from 'svelte/store';
 
 export const invidiousInstance = persisted('invidiousInstance', import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE);
 export const returnYTDislikesInstance = persisted('returnYTDislikesInstance', import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE);
-export const darkMode: Writable<null | boolean> = persisted("darkMode", null);
+export const darkMode: Writable<null | boolean> = persisted("darkMode", null);
+export const themeColor: Writable<null | string> = persisted("themeColor", null);