Material Vue

Appearance

Theming ​

In this article collected description of ways to customize and theme your app created with Material Vue

Color ​

You can use your own color to theme components with v-theme-color directive

INFO

Now v-theme-color is working only with hex values

Use custom color ​

Using of custom color tokens

code
vue
<m-button text="Pinky" v-theme-color="'#F85284'"/>
<m-button text="Green!" v-theme-color="'#6AA569'"/>
<m-button text="Lavanda" v-theme-color="'#7D6FA5'"/>

Font ​

By default Material Vue uses Geologica font face.

Custom font ​

To change the font you can simply use --md-sys-font-family-name CSS var

Using Lucida Console as theme font

code
css
--md-sys-font-family-name: "Lucida Console", Monaco, monospace;