Table of contents
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
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.
2021
Sun, Jan 10
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
Unfortunately, this component lacks default color styling on dark mode.
--
:--
AM
AM
PM
121234567891011
Success alert
Info alert
Warning alert
Error alert