Angular-material theming issue

Question

This is my first time using Stack Overflow so please be nice :)

Basically I am using Angular-material on a project and I cannot for the life of me figure out where to change the color schemes/theming. I am using the docs-dark theme but cannot find where to alter it in any CSS files. When I try and use a browser to find the source, its showing as being rendered as in-line CSS.

If any angular-material users could shed some light that would be great!

Many thanks

Mat

Answer 1

Which version are you using?

If you are using the latest version, there are no separate built-in themes in angular material design, as they used to be. You will have to configure themes in your app config, as below. The below example changes the primary pallette to blue for default theme.

angular.module('myModule', ['ngMaterial'])
    .config(['$mdThemingProvider',
        function ($mdThemingProvider) {
            'use strict';

            $mdThemingProvider.theme('default')
                .primaryPalette('blue');

        }
    ]);

Read here for detailed guide.

Answer 2

Is there any way we can make the theming a angular service. Reason being is I want to load theme depending the user that's logged in.

Answer 3

Maybe this would help you:

https://github.com/angular/material/blob/master/docs/content/Theming/03_configuring_a_theme.md

Hope this can help you.