Skip to main content
Vue dark-mode

# Examples

# Simple button

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

  
        Copied!

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>

  
        Copied!

Output




← CDN →

Examples | Vue dark-mode has loaded