πŸ’» Installation
πŸ“¦ Package Options
🎨 Colors
πŸ€– Base Components
  • Alerts
  • Avatars
  • Badges
  • Buttons
  • Dividers
  • Headings
  • Icons
  • Progress Bars
  • Social Logins
  • Spinners
πŸ“ƒ Form Components
Looking for a Vue.js / Nuxt.js freelancer? Ping me, I'm available! πŸ‘©β€πŸŽ¨

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@latest/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: ["alert", "avatar", "badge", "button", "divider", "heading", "icon",  "progress-bar",  "social-login", "spinner", "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

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.

AVATARS

huge
large
medium
default
small
mini

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

BUTTONS


DIVIDERS


















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

ICONS FROM MATERIAL DESIGN


PROGRESS BARS

Loading10%πŸ‘» Hovering
Progression20%πŸ‘» Hovering
Experience30%πŸ‘» Hovering
XPs until next level2/5πŸ‘» Hovering
XPs until next level5/10πŸ‘» Hovering
XPs until next level6/10πŸ‘» Hovering
Remaining Steps7/10πŸ‘» Hovering
Completed Steps8/10πŸ‘» Hovering

SOCIAL LOGINS


SPINNERS


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.


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

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.


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.


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.


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.


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.


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.