fix default list color

src/lib/util.ts

@@ -8,3 +8,7 @@ export const trimToNull = (s: string | null) => {
     }
     return sTrimed;
 };
+
+export const rgbToHex = (r: number, g: number, b: number) => {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};

src/routes/lists/[id]/manage/+page.svelte

@@ -7,16 +7,28 @@
     import { page } from "$app/stores";
     import { getToastStore } from "@skeletonlabs/skeleton";
     import ClearableInput from "$lib/components/ClearableInput.svelte";
+    import { rgbToHex } from "$lib/util";
 
     interface Props {
         data: PageData;
     }
 
     const { data }: Props = $props();
-    const defaultColor = "#a940bf"; // this is actually dynamic based on the theme, but easier to hardcode the value
     const list = $state(data.list);
-    let colorValue: string = $state(list.iconColor || defaultColor);
+    let colorElement: Element | undefined = $state();
+    let defaultColor: string = $derived.by(() => {
+        if (colorElement) {
+            const rgbColor = getComputedStyle(colorElement).backgroundColor;
+            const rgbValues = rgbColor.match(/\d+/g)?.map(Number.parseFloat);
+            return rgbValues ? rgbToHex(rgbValues[0], rgbValues[1], rgbValues[2]) : "";
+        }
+        return "";
+    });
+    let colorValue: string = $state(list.iconColor || (() => defaultColor)());
 
+    $effect(() => {
+        colorValue = defaultColor;
+    });
     $effect(() => {
         if ($page.form && !$page.form.success && $page.form.errors === null) {
             getToastStore().trigger({
@@ -100,6 +112,8 @@
     </div>
 </form>
 
+<div bind:this={colorElement} class="bg-primary-400-500-token hidden"></div>
+
 <svelte:head>
     <title>{$t("wishes.manage-list")}</title>
 </svelte:head>