Vue-material: How to use Themes?

[myronliu347]

I am very interested in your theme control, Can detailed introduction for me ？

[marcosmoura]

Well. In fact you don't need to load anything. The "MdCore" module expose a theme engine. This theme engine generates on the fly all the styles that you need.
When you import VueMaterial using Vue.use(VueMaterial), you will be able to work with this theme engine.
In your code you can use Vue.material.theme.register to register your first theme (or default theme).
Like this:

Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
});

When you do this Vue Material will generate all the colors, shades and contrasts to all his components.
Then you need to apply your theme in your application, with the directive v-md-theme="'default'".
This means that you created and are using a theme called 'default'.

Or you can register multiple themes using:

Vue.material.theme.registerAll({
  default: {
    primary: 'blue',
    accent: 'red'
  },
  about: {
    primary: 'green',
    accent: 'orange'
  }
});

In this case you have multiple themes, called 'default' and 'about', and you can use both themes with v-md-theme in your HTML. You can nest themes and apply them directly to components. Or you can have a single theme per page in a real world example, like I did on the documentation website.

I've created a codepen with a pratical example. You can play with colors to see them changing on the components.
http://codepen.io/vue-material/pen/WGavBE?editors=1010

I hope I have been able to explain your question.

Thank you!

[marcosmoura]

Oh. I forgot to say that renamed this issue title. I think that your question might help another person.

[jonataswalker]

@marcosmoura It looks like your pen is a bit buggy:

Uncaught TypeError: Cannot read property 'installed' of undefined(…) on vue.min.js

[marcosmoura]

@jonataswalker Oops! Sorry. Fixed now! :)

[leogoncalves]

@marcosmoura, I was testing your lib, and I ended up falling into the following error:

Uncaught TypeError: Cannot read property 'registerAll' of undefined

The code is:

Vue.material.theme.registerAll({
  default: {
    primary: 'cyan',
    accent: 'pink'
  }
})

Any idea what it might be?

[marcosmoura]

@leogoncalves This way to set up themes is not possible anymore. Take a look at the breaking changes on the version 0.5.0.

[noscript]

Has Vue.material.setCurrentTheme() function been removed? I didn't find anything in the changelog.

[koteez]

Hi,

I know this is an old post but I was wondering how to activate a theme or another?
v-md-theme -> doesn't exist or I don't know what it means or how to use it.

Can you please provide some exemple.
I would like to activate a theme based on the url so no action from user.

Regards

Krys

[marcosmoura]

@koteez You can follow the documentation here: https://vuematerial.io/themes/configuration

The v-md-theme do not exist in v1.0.0-beta.

[koteez]

Hi Marcos,

Thanks for your quick answer but I have followed this documentation and I have created multiple theme and now I would like to activate one or another dependending on context of my application.
Let say I have multiple customer of my app I would like to have a theme for each of them and activate it based on the URL.

`
`
So I was looking for something like Vue.material.setCurrentTheme(). I checked if I can't implement myself but instead of changing a single class on the body I have to change in many places the class. I can do that but I am scared it is an heavy job and I would have to do it each time the UI is changed.

Thanks & regards

Krys

[koteez]

Also I am wondering why MdLayout has no SCSS file?
Something else that is not clear in your documentation is that even if I want to customize my component I need to have the

import 'vue-material/dist/vue-material.min.css';

In my code otherwise the display is completely screwed up.

[marcosmoura]

1 - You can activate the theme using Vue.material.theming.theme = 'themeName' or this.$material.theming.theme = 'themeName'

2 - You can import only the files from the components that you want.
import 'vue-material/dist/components/MdLayout/index.css'. I know, this is not documented, but it will be available soon.

[Malavos]

@marcosmoura hello there. I am having some problems. I made a simple logic for my application.

The application starts with the default theme. I load only the default css:

import 'vue-material/dist/theme/default-dark.css'

And I change my theme like so:

if (this.theme === "dark") { this.$material.theming.theme = "default"; this.theme = "light"; } else { this.$material.theming.theme = "default-dark"; this.theme = "dark"; }

Very simple code. It "kinda" works, because when changing to the light theme, it loads the black-green-light, not the really default one. What could be causing this? What am I doing wrong?