Vue dark-mode
Guide
How to
  • Packages

    • vue-axe
    • vue-skip-to
    • vue-dark-mode
    • vue-announcer
    • vue-focus-loop
    • vue-accessible-multiselect
    • eslint-plugin-vuejs-accessibility
  • Links

    • Github
    • Twitter
GitHub
Guide
How to
  • Packages

    • vue-axe
    • vue-skip-to
    • vue-dark-mode
    • vue-announcer
    • vue-focus-loop
    • vue-accessible-multiselect
    • eslint-plugin-vuejs-accessibility
  • Links

    • Github
    • Twitter
GitHub
  • Introduction
  • Guide

    • Setup
    • Class naming
    • Color modes
    • Events
    • Storage
    • Favicon
    • Meta theme-color
    • Accessibility & i18n
    • Examples
      • Simple button
      • Icon Toggle button
  • How to

    • CDN
    • SSR
    • Nuxt.js
    • Vuepress
    • TailwindCSS Dark Mode

# 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




Edit this page on GitHub

← Accessibility & i18n CDN →