Vue-Material switch themes ( Property 'material' does not exist on type 'Vue )

I have working copy for creating and loading theme in vue-typescript vs vue-material.

Look's like :

SCSS code:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color( lime, A200), // The primary color of your application
  accent: md-get-palette-color(green, 500), // The accent or secondary color
  secondary: #a10b4a,
  raised: #000000,
  theme: light
));

@import "~vue-material/dist/theme/all"; // Apply the theme

In app.vue i need only this line :

  import './styles/style.scss'

Now i need method to switch to the another theme.

On this link https://vuematerial.io/themes/concepts/ no basic examples.

This promise :

error log:

16 16 Property 'material' does not exist on type 'Vue'.
    85 | 
    86 |     switchMyTheme = () => {
  > 87 |       this.$root.material.setCurrentTheme('myDark')
    85 | 
    86 |     switchMyTheme = () => {
  > 87 |       this.$root.material.setCurrentTheme('myDark')

Any suggestion ?

You can switch themes in code by using the following in App.vue for example:

this.$material.theming.theme="differentTheme" //name of your theme

Just add a new theme between importing the engine en before applying the theme(s):

@import "~vue-material/dist/theme/engine";

//Add here after import like:
@include md-register-theme("differentTheme", (
  primary: blue, 
  accent: red
));

//before applying
@import "~vue-material/dist/theme/all"; // Apply the theme