A MINIMALIST DARK DESIGN SYSTEM FOR VUE.JS 🎨
Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

We'll never send you more than one email per month.


INSTALLATION
The dark side is calling you... Come and join us! 👻

npm install vuedarkmode

# Or if you prefer using yarn
yarn add vuedarkmode
Vue.js
In your main.js file:
import Vue from "vue";
import VueDarkMode from "vuedarkmode";

Vue.use(VueDarkMode);
Nuxt.js
Create a new plugin in plugins/vuedarkmode.js:
import Vue from "vue";
import VueDarkMode from "vuedarkmode";

Vue.use(VueDarkMode);
Add this new plugin to nuxt.config.js.
Don't forget to set ssr to false as Vue Dark Mode only works in the browser for the time being.
{
  // ...
  plugins: [
    { src: "@/plugins/vuedarkmode.js", ssr: false }
  ]
}
CDN
Get the latest version from jsdelivr, and import the JavaScript file in your page.
<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuedarkmode@0.1/dist/vuedarkmode.min.js"></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.

PACKAGE OPTIONS
Here are some options you can set to customize the plugin. 🍸

import VueDarkMode from "vuedarkmode";

Vue.use(VueDarkMode, {
  // Specify the components to declare globally in your project
  // When undefined, null or given an empty array, all components will be imported
  components: ["avatar", "badge", "button", "divider", "heading", "icon",  "progress-bar",  "social-login", "checkbox", "file", "input", "radio", "select", "tabs", "textarea", "toggle"]
});

COLORS
All our components are baked using only these colors. No added sugar. 🤞

#ab7ef6
$portage
#0194ef
$azure-radiance
#2ea2f9
$dodger-blue
#26c2c9
$java
#4fcf3f
$apple
#1bb934
$malachite
#e1112c
$crimson
#e54124
$cinnabar
#ffc02a
$sunglow
#ffb610
$sun
#fff5cd
$barley-white
#fafbfc
$athens-gray
#ffffff
$white
#a9c7df
$regent-st-blue
#8eacc5
$nepal
#323e4f
$oxford-blue
#232d3d
$ebony-clay
#283243
$ebony-clay-2
#1c2532
$mirage
#18191a
$woodsmoke
#000000
$black

HEADINGS

TypeFont / WeightFont SizeLine-HeightNormal
Heading 1
Heebo Bold26px32px
Heading 2
Heebo Medium24px30px
Heading 3
Heebo Regular22px28px
Paragraph Style
Heebo Regular16px28px
Small Style
Heebo Regular14px24px

BUTTONS


BADGES

large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini
large
medium
default
small
mini

SOCIAL LOGINS


ALERTS

This is a blue alert you can customize as you wish.
This is a green alert you can customize as you wish.
This is a red alert you can customize as you wish.
This is an orange alert you can customize as you wish.
This is a black alert you can customize as you wish.
This is a white alert you can customize as you wish.

INPUTS

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.

This is a customizable description for inputs.


SELECTS

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.

This is a customizable description for selects.


TEXTAREAS

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.


CHECKBOXES

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.

This is a customizable description for checkboxes.


RADIOS

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.

This is a customizable description for radios.


TOGGLES

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.

This is a customizable description for toggles.


FILE UPLOAD

JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB
JPG, max. 500KB

TABS

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.

AutoKMB

This is a customizable description for tabs.


DIVIDERS


















PROGRESS BARS

Loading10%
Progression20%
Experience30%
XPs until next level2/5
XPs until next level5/10
XPs until next level6/10
Remaining Steps7/10
Completed Steps8/10

AVATARS

huge
large
medium
default
small
mini

ICONS FROM MATERIAL DESIGN