reactive theme

[amery]

hi, I'm fairly new to this world the following snippet will likely make you sick, but I'm trying to render (client-side) an xml file on an app using @nuxt/ui, unfortunately I haven't been able to change the theme following a toggle of useColorMode()

const colorMode = useColorMode();

const url = '/api/config.xml';
const xml = ref('');

const { data:content, pending, refresh, error } = await useAPI<string>(url, {
  server: false,
  headers: {
    'Accept': 'application/xml',
  }
});

watch(content, (value) => {
  console.log(xml, value);
  xml.value = (value !== null) ? value : '';
});

const theme = computed(() => colorMode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light');

const prettyXML = await useHighlighted(xml, {
  lang: 'xml',
  theme,
});

I'm even doubting the code itself is reactive on refresh.

any suggestion?

[amery]

tried making a component still no luck getting the theme change to work :(

<script setup lang="ts">
// props
interface Props {
  modelValue: string | null;
  lang?: string;
  codeClass?: string;
  loading?: boolean;
}

const $props = defineProps<Props>()

// theme
const $colorMode = useColorMode()
const dark = computed(() => $colorMode.value === 'dark')
const theme = computed(() => dark.value ? 'vitesse-dark' : 'vitesse-light')

// v-model
const loading = computed(() => $props.loading || $props.modelValue === null )
const code = ref('')

const highlighted = await useHighlighted(code, {
  lang: $props.lang,
  theme: theme.value,
  transformers: [{
    line(node, line) {
      node.properties['data-line'] = line;
    },
  }]
});

watch(loading, (v) => {
  code.value = $props.modelValue ?? '';
});