Skip to content
πŸ‘©β€πŸŽ¨πŸ‘¨β€πŸŽ¨ A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

npm npm Average time to resolve an issue Percentage of issues still open GitHub license Netlify Status


You can browse the documentation for Vue Dark Mode on the website.


npm install @growthbunker/vuedarkmode

# Or if you prefer using yarn
yarn add @growthbunker/vuedarkmode


In your main.js file:

import Vue from "vue";
import VueDarkMode from "@growthbunker/vuedarkmode";



Create a new plugin in plugins/vuedarkmode.js:

import Vue from "vue";
import VueDarkMode from "@growthbunker/vuedarkmode";


Add this new plugin to nuxt.config.js.

module.exports = {
  // ...
  plugins: [{ src: "@/plugins/vuedarkmode.js" }];


Get the latest version from jsdelivr, and import the JavaScript file in your page.

<script src=""></script>
<script src=""></script>

We recommend our users to lock Vue Dark Mode's version when using CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing. Please refer to for more information.

Available Components

We are releasing new components on a monthly basis. Subscribe to our newsletter to stay in touch with coming releases.

Base Components

Form Components


You are more than welcome to contribute to Vue Dark Mode. Just submit changes via pull request and I will review them before merging.

  1. Fork it! πŸ€™

  2. Create your feature branch: git checkout -b my-new-feature

  3. Commit your changes: git commit -am "Add some feature"

  4. Push to the branch: git push origin my-new-feature

  5. Submit a pull request πŸ‘

The documentation is available in the docs folder. The Vue Dark Mode components are available in the lib folder.


Vue Dark Mode is MIT licensed.


Vue Dark Mode is using BrowserStack to make sure our components render properly on modern browsers.

BrowserStack Logo

You can’t perform that action at this time.