Customizable Dark Mode Component For Vue.js

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'
}

Preview:

Customizable Dark Mode Component For Vue.js

Changelog:

v1.0.0 (06/23/2020)

  • change-mode event when chosen a new color mode
  • Adds SSR support
  • Allow to import the component individually
  • Support to custom storage
  • Toggle favicon by prefer-color-scheme
  • Bugfixes

Download Details:

Author: vue-a11y

Live Demo: https://darkmode.vue-a11y.com/guide/examples.html#simple-button

Download Link: https://github.com/vue-a11y/vue-dark-mode/archive/master.zip

Official Website: https://github.com/vue-a11y/vue-dark-mode

Install & Download:

# Yarn
$ yarn add @vue-a11y/dark-mode

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

You Might Be Interested In:

Tags:

Add Comment