Is this the only way to get DaisyUI colors based on the theme in Svelte?

I'm using Svelte with DaisyUI and need to retrieve the current theme colors dynamically. I rely on these colors in chroma-js, so it’s crucial to get them correctly. The code below works for me, but it feels like there might be a more efficient or idiomatic way to achieve this. Is this the only/best approach to get the current theme colors from DaisyUI?

Here’s the relevant code snippet:

<script lang="ts">    import { onMount } from 'svelte';    import { theme } from '$stores/global';    import type { ThemeColor, ThemeColorMap } from "$type/shared";    type ColorElement = {        [key in ThemeColor]?: HTMLDivElement | undefined;    };    export let colors: ThemeColorMap;    const colorKeys: ThemeColor[] = ['accent', 'info', 'neutral'];    let colorElements: ColorElement = {} as ColorElement; // This will store references to the div elements    function getColors(): ThemeColorMap {        if (typeof window === 'undefined') {            return {};        }        let newColors: ThemeColorMap = {};        Object.entries(colorElements).forEach(([key, element]) => {            if (element) {                newColors[key as ThemeColor] = getComputedStyle(element).backgroundColor;            }        });        return newColors;    }    onMount(() => {        colors = getColors();    });    theme.subscribe(() => {        colors = getColors();    });</script><div class="hidden">    {#each colorKeys as key}<div class="bg-{key}" bind:this={colorElements[key]}></div>    {/each}</div>

This approach creates hidden div elements with DaisyUI color classes, and then I use getComputedStyle to extract the background color from these elements.

While this works, it feels a bit hacky, especially with the hidden elements. Is there a more direct or efficient way to access the current DaisyUI theme colors in Svelte, particularly for use with chroma-js?

Any suggestions would be appreciated!