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

Question

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 ?

Arjen · Accepted Answer · 2020-07-09 14:08:29Z

1

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

edited Jul 9, 2020 at 14:08

answered Jul 9, 2020 at 13:27

Arjen

464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikola Lukic Over a year ago

Nice, i needed just to put anotation (this.$root as any).$material.theming.theme == "myDark" to fix typescript compiler warn logs...

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related