{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Angular Material Theme","type":"basic","slug":"angular-material-theme","excerpt":"","body":"[Theming](https://material.angularjs.org/latest/#/Theming/01_introduction) is provided by Angular Material. It allows you to specify the 3 main colors for your interface.\n\nThis is a common task for all apps, so we've already included the config provider for you in `angular/config/theme.config.js`.\n\nHere's how it looks like:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"export function ThemeConfig($mdThemingProvider) {\\n\\t'ngInject';\\n\\t/* For more info, visit https://material.angularjs.org/#/Theming/01_introduction */\\n\\t$mdThemingProvider.theme('default')\\n\\t\\t.primaryPalette('indigo')\\n\\t\\t.accentPalette('grey')\\n\\t\\t.warnPalette('red');\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"Consult the [official docs](https://material.angularjs.org/latest/#/Theming/01_introduction) for instructions & tips on selecting the colors.\"\n}\n[/block]","updates":[],"order":4,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"57ffd85f755a2e1700c2bb34","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Extras","slug":"extras","order":7,"from_sync":false,"reference":false,"_id":"57ffd85f755a2e1700c2bb0d","createdAt":"2015-12-18T23:14:25.130Z","__v":0,"version":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae"},"parentDoc":null,"createdAt":"2015-12-18T23:30:04.239Z","user":"567082433a32d20d00c45cab","__v":0,"version":{"version":"3.4","version_clean":"3.4.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","releaseDate":"2016-10-13T18:54:23.018Z","__v":1,"createdAt":"2016-10-13T18:54:23.018Z"},"githubsync":"","project":"567083021dabd80d00b122ae"}

Angular Material Theme


[Theming](https://material.angularjs.org/latest/#/Theming/01_introduction) is provided by Angular Material. It allows you to specify the 3 main colors for your interface. This is a common task for all apps, so we've already included the config provider for you in `angular/config/theme.config.js`. Here's how it looks like: [block:code] { "codes": [ { "code": "export function ThemeConfig($mdThemingProvider) {\n\t'ngInject';\n\t/* For more info, visit https://material.angularjs.org/#/Theming/01_introduction */\n\t$mdThemingProvider.theme('default')\n\t\t.primaryPalette('indigo')\n\t\t.accentPalette('grey')\n\t\t.warnPalette('red');\n}", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "body": "Consult the [official docs](https://material.angularjs.org/latest/#/Theming/01_introduction) for instructions & tips on selecting the colors." } [/block]