How to toggle theme without full page reload

[ericmp33]

I'm using the library with Laravel + Inertia + Vue3 composition API.

This is how I set it in my app.js file.

import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
import 'tippy.js/themes/material.css'

const tippyTheme = isDark()
  ? 'material'
  : 'light'

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, app, props, plugin }) {
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .use(VueTippy, {
        defaultProps: {
          theme: tippyTheme,
        },
      })
      .mount(el)
  },
})

But then, if the user wants to toggle the theme to dark/light, I'm unable to change it. How I'm supposed to?
Some stuff I tried to make the change:

import { useTippy } from "vue-tippy"

const tippyTheme = isDark()
  ? 'material'
  : 'light'

useTippy(document.body, {
  // setProps: {
    theme: tippyTheme,
  // },
})

// ------------------

// useTippy(document.querySelector('#app'), {
//   defaultProps: { theme: tippyTheme, }
// })

// ------------------

// useTippy(document.querySelector('#app'), {
//   theme: tippyTheme,
// })

But isn't happening. How should I do it?

The objective is to change it without fully reloading the page. Should I store the tippy to the window object or what would you do?

Btw, this library & wrapper are awesome (: