Material: Disabling Theming?

[iamaaron]

I do not have an interest in using the theming provided by Angular Material via $mdThemingProvider. I'd rather control the styles of the page through CSS, which is where it should be. I have tried creating a custom palette to define my color scheme, but I notice that onHover for certain elements, Angular Material decides that it wants to create it's own colors.

I saw this issue: https://github.com/angular/material/issues/943 and noticed that the solution was to set the default theme to none. Therefore, you'd be referencing a non-existent theme. That solution throws console logs and reverts to the default Angular Material theme regardless. And in the same issue, it is noted that you may override the constant for the default theme via a constant in the config block.

Any idea how I may just disable $mdThemingProvider all together and perform styling in the CSS without getting overwritten by the style tags that $mdThemingProvider throws on the HTML?

_I am using Angular-Material 1.0.6_

[ThomasBurleson]

Try this...

// Setting this will result in not adding theme classes on components
angular(myApp, [ ngMaterial, myAppModules ]).constant("$MD_THEME_CSS","");

I also think the $mdThemingProvider needs a disableTheming() method that would do the above for you automatically.

[iamaaron]

Thanks!

[richieforeman]

Would absolutely love for this to be officially supported by Angular Material. We're finding that the Angular Material stylings have bit us a few times as thing shift around.

[yazzibrahim]

Folks I have a few questions as I'm struggling with this.

1. Why use Angular Material at all if you're going to disable the theming and writing all the CSS yourself? What are the benefits?
2. Is there a way to do this for Angular 2 with webpack?

PS: we're trying to use angular material, but we have a very custom look and feel and hoping the path isn't overriding every css they force apply.

Thank you!

[EladBezalel]

@yazzibrahim some people want to have the components but have them styled their own way.
The api is well-thought and not css specific that's why it's so good.

Do know you're on the AngularJS material project and not Angular (which you may refer to Angular 2) if you want to use the material compatible with Angular please take a look at angular/material2

[sjlynch]

@yazzibrahim There is also a huge performance benefit to precompile the theme and then disable theming.

    // $mdThemingProvider.disableTheming();
    //uncomment the line above and run the following code in the chrome console to compile. The result will be saved to the clipboard.
    // copy([].slice.call(document.styleSheets)
    //    .map(e => e.ownerNode)
    //    .filter(e => e.hasAttribute('md-theme-style'))
    //    .map(e => e.textContent)
    //    .join('\n')
    //  )

Although now in 1.0.9 it seems disableTheming is no longer a function, stumbled on this thread while looking for a solution.

Edit: Ah, now it looks like you need to use "app.constant("$MD_THEME_CSS","")" to disable theming. Quite the workaround for a very useful feature. Not sure why the team decided to remove disableTheming().

[stu-co]

After reading through #980, this looks to be the solution to my problem.

I agree that it feels like a hacky workaround really.

[stu-co]

After testing, disableTheming(); worked as expected for me and has not been removed from the code base as indicated by @sjlynch.

[Splaktar]

Indeed $mdThemingProvider.disableTheming() still exists. You can find the docs here.