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}
+