Customizable Dark Mode Component For Vue.js

Install & Download:

# Yarn
$ yarn add @vue-a11y/dark-mode
# NPM
$ npm install @vue-a11y/dark-mode --save

Description:

A simple implementation of custom, accessible dark mode for your Vue.js applications.

The library uses either localStorage or sessionStorage to store the user’s choice of color mode.

Also supports theme-color meta which allows you to set the toolbar color in Chrome for Android.

How to use it:

1. Import the Dark Mode component as follows:

import Vue from 'vue'
import VueDarkMode from '@vue-a11y/dark-mode'
Vue.use(VueDarkMode)

2. Add a dark mode toggler to your template.

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

3. Determine the colors for dark mode.

:root {
  --bg: #fff;
  --color: #222;
}
html.dark-mode {
  --bg: #222;
  --color: #fff;
}
body {
  background-color: var(--bg);
  color: var(--color);
}

4. Default props.

defaultMode: {
  type: String,
  default: 'light'
},
modes: {
  type: Array,
  default () {
    return ['light', 'dark', 'system']
  }
},
className: {
  type: String,
  default: '%cm-mode'
},
storage: {
  type: String,
  default: 'localStorage'
},
metaThemeColor: {
  type: Object,
  default: () => ({})
},
ariaLabel: {
  type: String,
  default: 'toggle to %cm mode color'
},
ariaLive: {
  type: String,
  default: '%cm color mode is enabled'
}