A Minimalist Dark Design System for Vue.js 🎨

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

Get notified for new packages and updates

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

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

#25374f

$rhino

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

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

Large checkbox (normal)

This is a description for checkboxes.

Medium checkbox (normal)

This is a description for checkboxes.

Default checkbox (normal)

This is a description for checkboxes.

Small checkbox (normal)

This is a description for checkboxes.

Mini checkbox (normal)

This is a description for checkboxes.

Large checkbox (normal)

This is a description for checkboxes.

Medium checkbox (success)

This is a description for checkboxes.

Default checkbox (error)

This is a description for checkboxes.

Small checkbox (warning)

This is a description for checkboxes.

Image Uploaders

Large file upload (normal)

JPG, max. 500KB

Medium file upload (normal)

JPG, max. 500KB

Default file upload (normal)

JPG, max. 500KB

Small file upload (normal)

JPG, max. 500KB

Mini file upload (normal)

JPG, max. 500KB

Large file upload (success)

JPG, max. 500KB

Medium file upload (error)

JPG, max. 500KB

Default file upload (warning)

JPG, max. 500KB

Inputs

large input (normal)

This is a customizable description for inputs.

medium input (normal)

This is a customizable description for inputs.

default input (normal)

This is a customizable description for inputs.

small input (normal)

This is a customizable description for inputs.

mini input (normal)

This is a customizable description for inputs.

large input (success)

This is a customizable description for inputs.

medium input (error)

This is a customizable description for inputs.

default input (warning)

This is a customizable description for inputs.

Numerics

large input numeric (normal)

This is a description for numeric inputs.

medium input numeric (normal)

This is a description for numeric inputs.

default input numeric (normal)

This is a description for numeric inputs.

small input numeric (normal)

This is a description for numeric inputs.

mini input numeric (normal)

This is a description for numeric inputs.

large input numeric (success)

This is a description for numeric inputs.

medium input numeric (error)

This is a description for numeric inputs.

default input numeric (warning)

This is a description for numeric inputs.

Radios

Vue Dark Mode 1

Vue Dark Mode 2

Vue Dark Mode 3

Vue Dark Mode 4

This is a description for radios.

Vue Dark Mode 1

Vue Dark Mode 2

Vue Dark Mode 3

Vue Dark Mode 4

This is a description for radios.

Selects

large select (normal)

Vue Dark Mode 1

This is a description for selects.

medium select (normal)

Vue Dark Mode 1

This is a description for selects.

default select (normal)

Vue Dark Mode 1

This is a description for selects.

small select (normal)

Vue Dark Mode 1

This is a description for selects.

mini select (normal)

Vue Dark Mode 1

This is a description for selects.

large select (success)

Vue Dark Mode 1

This is a description for selects.

medium select (error)

Vue Dark Mode 1

This is a description for selects.

default select (warning)

Vue Dark Mode 1

This is a description for selects.

Tabs

Large tabs (normal)

AutoKM

This is a description for tabs.

Medium tabs (normal)

AutoKM

This is a description for tabs.

Default tabs (normal)

AutoKM

This is a description for tabs.

Small tabs (normal)

AutoKM

This is a description for tabs.

Mini tabs (normal)

AutoKM

This is a description for tabs.

Large tabs (success)

AutoKM

This is a description for tabs.

Medium tabs (error)

AutoKM

This is a description for tabs.

Default tabs (warning)

AutoKM

This is a description for tabs.

Textareas

large textarea (normal)

This is a description for textareas.

medium textarea (normal)

This is a description for textareas.

default textarea (normal)

This is a description for textareas.

small textarea (normal)

This is a description for textareas.

mini textarea (normal)

This is a description for textareas.

large textarea (success)

This is a description for textareas.

medium textarea (error)

This is a description for textareas.

default textarea (warning)

This is a description for textareas.