Это единственный способ получить цвета DaisyUI на основе темы в Svelte? ⇐ CSS

[Anonymous]

Я использую Svelte с DaisyUI, и мне нужно динамически получать текущие цвета темы. Я использую эти цвета в chroma-js, поэтому очень важно правильно их получить. Код ниже работает для меня, но кажется, что может быть более эффективный или идиоматический способ добиться этого. Это единственный/лучший способ получить текущие цвета темы из DaisyUI?
Вот соответствующий фрагмент кода:

Код: Выделить всё

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();
});


{#each colorKeys as key}

{/each}

Этот подход создает скрытые элементы div с цветовыми классами DaisyUI, а затем я использую getComputedStyle для извлечения цвета фона из этих элементов.
Хотя это работает, это выглядит немного хаотично, особенно со скрытыми элементами. Есть ли более прямой или эффективный способ доступа к текущим цветам темы DaisyUI в Svelte, особенно для использования с chroma-js?
Любые предложения будут оценены!

Подробнее здесь: https://stackoverflow.com/questions/790 ... -in-svelte