lobo_tuerto's notes
Vuetify color theme builder
Material Design themes for your Vue.js apps
v1.1.24

Updated for Vuetify 2.
Now you can build a light and a dark theme at the same time.
Switch between them and tweak the colors 'til your heart’s content.

Go now and build an awesome color theme for your Vue.js + Vuetify application!

§ Generated code

Any changes made to the colors below will be reflected in this code section.
When you are done, come here and copy this JavaScript.

const vuetifyOpts = {
  rtl: false,
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#21cff3',
        accent: '#FF4081',
        secondary: '#ffe18d',
        success: '#4CAF50',
        info: '#2196F3',
        warning: '#FB8C00',
        error: '#FF5252'
      },
      light: {
        primary: '#1976D2',
        accent: '#e91e63',
        secondary: '#30b1dc',
        success: '#4CAF50',
        info: '#2196F3',
        warning: '#FB8C00',
        error: '#FF5252'
      }
    }
  }
}

§ Color theme builder

HEX
d4
d3
d2
d1
b
l1
l2
l3
l4
l5

Preview selected color:Primary
This is a light toolbar

Current color theme:Dark
Card title
This is some example card text
Some item
Airplane
Air balloon
Account
Info
Oops!
Unfortunately, this component lacks default color styling on dark mode.
2020
Tue, Jul 28
SMTWTFS
Unfortunately, this component lacks default color styling on dark mode.
--
:
--
AM
AM
PM
121234567891011

§ Useful links

§ Palette generators

§ UI samplers

§ General knowledge

Got comments or feedback?
Follow me on twitter
v1.1.24