Watch for dark-/lightmode change

[MarkusKeck]

I have a custom .vue Component which gets used in vitepress. Inside this component is a canvas element. When I change the color of the page I need to know when a user changed the mode from dark/light so I can redraw the canvas. What would be the easiest way to make a watcher for the DarkLightMode toggle?

[brc-dd]

import { useData } from 'vitepress'

const { isDark } = useData()

// isDark.value

[MarkusKeck]

@brc-dd Thanks I also just found it ;)
At the moment I use the options api, I created a new variable inside my component.
Is it possible to watch isDark without creating a new variable inside data?

  data() {
    return {
      isDark: true
    }
  },
  mounted() {
    this.isDark = useData().isDark
  },
  watch: {
    isDark(newMode, oldMode) {
      //... do the magic
    }
  },