diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte index 423d1383..d652e03b 100644 --- a/materialious/src/routes/+layout.svelte +++ b/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); + } }); @@ -121,6 +133,11 @@ Light mode {/if} + diff --git a/materialious/src/store.ts b/materialious/src/store.ts index 7b7f6f94..d69bb461 100644 --- a/materialious/src/store.ts +++ b/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 = persisted("darkMode", null); \ No newline at end of file +export const darkMode: Writable = persisted("darkMode", null); +export const themeColor: Writable = persisted("themeColor", null); \ No newline at end of file