Examples

Simple button

<DarkMode>
  <template v-slot="{ mode }">
    Color mode: {{ mode }}
  </template>
</DarkMode>

Output

Icon Toggle button

<DarkMode>
  <template v-slot="{ mode }">
    <MyLightIcon v-show="mode === 'light'">
    <MyDarkIcon v-show="mode === 'dark'">
    <MySystemIcon v-show="mode === 'system'">
  </template>
</DarkMode>

Output