Vuetify color theme builder

Material Design color browser

Mix and match colors!

Published on 2018/05/04 ‚óŹ Updated on 2018/05

Explore new color combinations for your Vue.js + Vuetify projects!


Generated theme code

This code will adjust according to your selections below.
Copy-paste code this code in your main.js file:

Vue.use(Vuetify, {
  theme: {
    "primary": "{{ current.theme.primary }}",
    "secondary": "{{ current.theme.secondary }}",
    "accent": "{{ current.theme.accent }}",
    "error": "{{ current.theme.error }}",
    "info": "{{ current.theme.info }}",
    "success": "{{ current.theme.success }}",
    "warning": "{{ current.theme.warning }}"
  }
})
                

App

<v-app{{ dark.app ? ' dark' : '' }}>...</v-app>
                

Color types

Here are Vuetify's default theme colors.
Click on a button then select a palette to change that color type:

{{ type }}

Pick the {{ current.color }} color palette:

check {{ colorPalette }} {{ colorPalette }}
Reset {{ current.color }} Reset all

Pick the {{ current.color }} color variation:

check {{ variation }} {{ variation }}

Toolbar {{ colorDynamic ? current.color : 'Dynamic colors' }}

<v-toolbar{{ dark.toolbar ? ' dark' : '' }}{{ colorDynamic ? ` color="${ current.color }"` : '' }}>...</v-toolbar>
                    
Title Link One Link Two backup

Button styles {{ colorDynamic ? current.color : 'Dynamic colors' }}

Raised (default), depressed, flat, outline, round, icon, icon flat, icon outline, fab and block.

<v-btn{{ colorDynamic ? ` color="${ current.color }"` : '' }}>...</v-btn>
                    
Default Depressed Flat Outline Round settings settings settings person Block

Card Current theme

add
Pure water
1,000 litres of pure wonder
Dive Drink delete {{ model.card ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }} You should drink more pure water and less soda and processed beverages.

Pickers Current theme

Date picker

Time picker


Stepper Current theme

Name of step 1 Name of step 2 Name of step 3 Continue Cancel Continue Cancel Continue Cancel

Alerts Current theme

This is a success alert. This is a info alert. This is a warning alert. This is a error alert.

Notes

It's functional, but I acknowledge it needs more work on the UX side of things.
I'll be improving this little app over time. If you have any specific feedback or comments:
  • Get in touch on Twitter
  • Or by good ol' email at adriandcs@gmail.com

  • Useful links

    Palette generators

  • Material Design Theme & Palette Color Generator
  • Material Color Generator
  • UI samplers

  • Google's Color Tool
  • General knowledge

  • How to create custom palette with custom color for Material Design App?