<script setup lang="ts">
const props = defineProps<{
    property: string;
    format: (value: string) => string;
}>();

const text = useTemplateRef<HTMLSpanElement>('text');

const updateText = () => {
    if (!text.value) {
        return;
    }
    text.value.innerHTML = props.format(getComputedStyle(text.value.parentElement!).getPropertyValue(props.property));
};

onMounted(() => {
    updateText();
});

const { isDark } = useDark();
watch(isDark, updateText);
</script>

<template>
    <span ref="text">…</span>
</template>
