<template>
  <ClientOnly>
    <DarkMode
      defaultMode="dark"
      :modes="[
        'light',
        'dark',
        'system',
        'sepia',
      ]"
    >
      <template v-slot="{ mode }">
        Color mode: <span>{{ mode }}</span>
      </template>
    </DarkMode>
  </ClientOnly>
</template>

<script>
import { DarkMode } from '@vue-a11y/dark-mode';

export default {
  components: {
    DarkMode
  }
}
</script>
