Vue.material.registerTheme causes an error

[larrymacbarry]

Trying to register my theme:

Vue.use(VueMaterial);

Vue.material.registerTheme( 'default', { primary: 'red' } );

And it causes a next error:

Uncaught TypeError: _vue2.default.material.registerTheme is not a function

[Samuell1]

Do you have Vue in your project? What version of vue-material you using?

[czy1996]

I have the same issue, my vue version is 2.5.2 and vue material version is 1.0.0-beta-7

[VdustR]

Vue.material.registerTheme is for old version.

You have to use new API for 1.0.0-beta-7.

[czy1996]

Thanks a lot!

[larrymacbarry]

If I want use several themes in my app:

@include md-register-theme("yellow", (
primary: md-get-palette-color(yellow, A400), // The primary color of your application
accent: md-get-palette-color(yellow, A200) // The accent or secondary color
))

@include md-register-theme("indigo", (
primary: md-get-palette-color(indigo, A400), // The primary color of your application
accent: md-get-palette-color(indigo, A200) // The accent or secondary color
))

How could I force change theme on my app?
There is no compilied styles for "indigo" and "yellow", only for "default"

[Samuell1]

Do you using SCSS? @larrymacbarry

[larrymacbarry]

Yes. I wanna change color themes in app using js methods in a components

[Samuell1]

@larrymacbarry do you have included theme engine? like is in docs?

[larrymacbarry]

yes:

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

@include md-register-theme("default", (
primary: md-get-palette-color(red, A400), // The primary color of your application
accent: md-get-palette-color(red, A200) // The accent or secondary color
))

@include md-register-theme("yellow", (
primary: md-get-palette-color(yellow, A400), // The primary color of your application
accent: md-get-palette-color(yellow, A200) // The accent or secondary color
))

@include md-register-theme("indigo", (
primary: md-get-palette-color(indigo, A400), // The primary color of your application
accent: md-get-palette-color(indigo, A200) // The accent or secondary color
))

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

It's working as I change colors for "default"

How to apply my 'indigo' theme dynamically in component on emit event callback?

[Samuell1]

@larrymacbarry you can apply theme to components with md-theme prop

[larrymacbarry]

I get it. Thx, It will be fine to include that string to https://vuematerial.io/themes/configuration
with example.

[paraself]

@Samuell1
Like this?

<md-app md-theme="default">
</md-app>

Tried, but did not work.
Could you demonstrate how to change theme dynamically ? Many thanks!

[Samuell1]

@paraself yes like that but md-app doesnt have that, only other components or you can change theme globally with

this.$material.theming.theme = 'myTheme'

[paraself]

this.$material.theming.theme = 'myTheme'

Thanks, this is exactly that I am looking for!

[adityatandon007]

@samuel1 I am looking to switch between default theme and dark theme for my entire app and I couldn't figure out how to do this. Here is my App.vue:
<template><div id="app"><md-app><div><md-switch v-model="isDark">Toggle dark theme</mdswitch></div></md-app></div> </template>

and here is the script file
<script> export default { name: 'app', data () { return { isDark: false } } } </script>

I want to use that switch to toggle the theme of <md-app> . How to do this. Any help would be great because I couldn't find in the docs how to do this.