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.

RTL mode

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

Show Material Design color palettes Dark mode HEX Primary d4 d3 d2 d1 b l1 l2 l3 l4 l5 Accent Secondary Success Info Warning Error Preview selected color: Primary Dark mode Dense toolbar Small buttons This is a light toolbar Link Default Depressed Text Outlined rounded Current color theme: Dark Dark mode Card title This is some example card text Maybe Ok Some item Airplane Air balloon Account Info Oops! Unfortunately, this component lacks default color styling on dark mode.

Unfortunately, this component lacks default color styling on dark mode.

-- : -- AM AM PM 12 1 2 3 4 5 6 7 8 9 10 11 Success alert Info alert Warning alert Error alert

§ Palette generators

§ UI samplers

§ General knowledge