A Minimalist Dark Design System for Vue.js 🎨

Based components designed for the insomniacs who enjoy dark interfaces as much as we do.


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);

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

    // Form components
    "checkbox", "file", "input", "label", "message", "radios", "select", "tabs", "textarea", "toggle"
  ]
});

How to install or update the font-family for all components?

<!-- We are using the Heebo font -->
<!-- Copy this code into the <head> of your HTML document. -->
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">

<!--  To update with your own font -->
<style>
[class^="dm-"]:not(.dm-base-icon) {
  font-family: Arial, Helvetica, sans-serif !important;
}
</style>

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
micro

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-HeightColor

Heading 1

Heebo Bold26px36px

Heading 2

Heebo Medium24px34px

Heading 3

Heebo Medium22px32px

Heading 4

Heebo Medium20px30px
Heading 5
Heebo Regular18px28px
Heading 6
Heebo Regular16px28px

Paragraph Style

Heebo Regular16px28px
Small StyleHeebo 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



Toasts


A blue toast.
A green toast.
A red toast.
An orange toast.
A black toast.
A white toast.

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.


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


AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

This is a customizable description for tabs.

AutoKM

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.