Customizable Dark Mode Component For Vue.js

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'

2. Add a dark mode toggler to your template.

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

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'


Customizable Dark Mode Component For Vue.js


v1.0.1 (07/24/2020)

  • fix: Removing title to avoid redundancy on screen readers

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:

Download Link:

Official Website:

Install & Download:

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

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

Add Comment