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

Small StyleHeebo Regular14px24px

Icons from Material Design



List Items


1

Don’t diversify yourself in too many channels; it’s like a death sentence. You should be focusing on the single and most efficient one.

2

What a lot of people miss is that the entire onboarding and activation experience is to get somebody from the point where they might hear about the product for the first time (marketing is your best friend) to the point on which they are trained and actually have the product to become a habit.

3

Advertising is fundamentally a business model competition. It is you, competing with the other companies, to figure out who can afford to pay the most for the attention of this specific user.

If you are not tracking your data and not trying to figure out what makes people sign up, use your product, come back, and leave…it is going to be hard to grow.

Don’t take advice from people who do not ask a lot of questions. Good advice comes only when a person puts forth the effort to understand what your business is and the problems it may have.

There is a big difference between traction and growth. You must know what phase you are in. There is a time for traction and there is a time for growth.

To create a company that’s building for the long term, you have to dedicate five, ten, maybe even 20 years, who knows? A business is a collection of people working toward something. That’s your culture.

During Y combinator, there are only two things that really matter: writing code (building the product) and talking to your users.

Do not make the mistake of having a broad audience at the beginning. You have to start small and be very specific to develop your early user base.


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.