Material: how to disable theming globally?

[haoxins]

Is it possiable to add a option to enable/disable theming globally

[mzbyszynski]

Hi @coderhaoxin,

the md-theme="green" attribute mainly just adds the correct theme class to the element the attribute is defined for, so md-theme="green" would the class md-green-theme. If you want to force an element back to the default theme (because it is inheriting the theme from a parent element), you would just need md-theme="default". If you want no theme styles at all, then you just need to set md-theme to point to a theme that doesn't exist. For example, md-theme="none" would add the md-none-theme class to your element. Since that class is not actually defined in the css anywhere, no theming styles would be applied.

Hope that helps!

-Marc

ps. One more word of caution about this solution: The themeing api is still under discussion (see #537 for example), so while the above solution works now, it could very well change in the near future. Good luck!

[haoxins]

thanks. But I want to disable theming globally.

[mzbyszynski]

There is no way to turn theming off globally that I know of, but you could change the default theme to a non-existent one globally by configuring the $mdThemingProvider:

app.config(function($mdThemingProvider) {
  $mdThemingProvider.setDefaultTheme('none');
});

[haoxins]

yeah, it works.

[DominicBoettger]

Sorry to mention this again, but i don't like that behaviour. I think these theming stuff should be done via SASS and not be injected via javascript. Even when setting it to 'none' the default theme will be injected.
In my opinion there should be a body class or Attributewhich toggles the default theme.
Everything else could be done via sass and even the material color stuff can be calculated there. The performance would be much better as i can see all the stuff going in the head section when loading material....

[sergonius]

Yeah, at least "none" should remove the default, it is a pain to inspect everything and override a large amount of styles. A SASS config and more control over this would make the whole thing more usable.

[mackelito]

Would kind of like to bring this question/issue back to life..
I don't think that the concept of setting theme to none/null/whatever is a proper solution.

All things needed for the themes are still loaded and executed. Surely there must/should be away to really disable it?

[DominicBoettger]

I am pretty sure that material is doing too much stuff in js at the moment. I think there would be a dramatic performance increase when doing layout and theming stuff in scss. I am using stuff like sass-material-colors in my themes and i am also able to define a lot of stuff. I also had issues with browser compatibily which i solved in scss with bourbon.

[mackelito]

And it you are not using themes in this matter?... What if you don't benefit from the themes?... Just think there would be an option to disable it..

[DominicBoettger]

I think it's a misunderstanding. I want to be able to disable the themes in javascript and write the theme information in SCSS.

:+1: for doing something like $mdThemingProvider.setDefaultTheme('none');

[mackelito]

When you specify it like $mdThemingProvider.setDefaultTheme('none'); it will still look for a theme with the name "none". And it will add a lot of references to your "none" theme..

So you are not disabling themes you are just calling a none existing theme ;)

[DominicBoettger]

Yes, i know.... The idea was that i think that it should be possible to completely disable the theme.

[mackelito]

A member of our team just found out that can override the constans.

// Setting this will result in not adding theme classes on components
.constant("$MD_THEME_CSS","");

Try it out and tell us if it works for you!

[DominicBoettger]

That helped a lot. Thanks.
Did someone already implement all the structures in sass?

[luncht1me]

@mackelito Thank you for that constant! We're using angular-material for the first time at my company, and our css guy doesn't really like overwriting styles but rather structure his own from the ground up.

This has helped a lot!