A Minimalist Dark Design System for Vue.js 🎨

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


Installation

Install it on Vue, Nuxt or use the CDN link! 👻


Vue.js

In your main.js file:

Nuxt.js

Create a plugin for Vue Dark Mode and load the library like in a regular Vue application:

Load this plugin in your nuxt configuration file.

CDN

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

We recommend our users to lock Vue Dark Mode's version when using a 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

Some options you can set to customize the library. 📦


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


Colors

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


backgrounds

#222c3c
$ebony-clay
Default Primary
#273142
$ebony-clay-2
Default Secondary
#1b2431
$mirage-2
Default Tertiary
#171e29
$mirage
Default Quaternary
#ffffff
$white
Reverse Primary

borders

#313d4f
$oxford-blue
Default Primary
#ffffff
$white
Reverse Primary

box-shadows

#18191a
$woodsmoke
Default Primary
#000000
$black
Default Secondary

fonts

#ffffff
$white
Default Primary
#a9c7df
$regent-st-blue
Default Secondary
#8eacc5
$nepal
Default Tertiary
#313d4f
$oxford-blue
Reverse Primary

colors

#313d4f
$oxford-blue
Black
#0093ee
$azure-radiance
Blue
#96bf47
$sushi
Green
#a9c7df
$regent-st-blue
Grey
#ffb610
$sun
Orange
#ab7ef6
$portage
Purple
#e0102b
$crimson
Red
#26c1c9
$java
Turquoise
#ffffff
$white
White
#ffc02a
$sunglow
Yellow

statuses

#0093ee
$azure-radiance
Active
#8eacc5
$nepal
Description
#e0102b
$crimson
Error
#313d4f
$oxford-blue
Normal
#0093ee
$azure-radiance
Info
#96bf47
$sushi
Success
#ffc02a
$sunglow
Warning

Alerts


This is a black alert you can customize as you wish.
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 grey alert you can customize as you wish.
This is an orange alert you can customize as you wish.
This is a red alert you can customize as you wish.
This is a turquoise 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 SizeLine-HeightFont WeightColor

Heading 1

26px36px700

Heading 2

24px34px500

Heading 3

22px32px500

Heading 4

20px30px500
Heading 5
18px28px500
Heading 6
16px26px500

Paragraph Style

16px26px400
Small Style14px24px400

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

Spinners



Toasts


A black toast.
A blue toast.
A green toast.
A grey toast.
An orange toast.
A purple toast.
A red toast.
A turquoise 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.