import { useDark, useToggle } from '@vueuse/core'

export default () => {
  const { $vuetify } = useNuxtApp()
  const config = useAppConfig()

  const dark = useDark({
    valueLight: config.theme.light,
    valueDark: config.theme.dark,
    onChanged: (dark: boolean) => {
      $vuetify.theme.global.name.value = dark
        ? config.theme.dark
        : config.theme.light
    },
  })

  const toggle = useToggle(dark)

  return { dark, toggle }
}