How to configure Material color theme in Angular profile

Question

My Angular web application has to run in three different configurations aka profiles (dev, test and prod) and I would like them to look different by using different material design (version 2) color themes.

Currently the color scheme is configured in the angular.json configuration (under architect -> build -> options -> styles) while the configuration specific properties (ports of remote services etc.) are configured in separate environment.*.ts files which are itself configured in the angular.json (under architect -> build -> configurations -> fileReplacements).

Excerpt from angular.json:

  "projects": {
    "stammdaten": {
      "projectType": "application",
      "schematics": {
        ...
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/stammdaten",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "prod": {
              "budgets": [
                ...
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "test": {
              ...

Is it possible to configure the profile (dev, test, prod) specific material theme(s) in the configurations sections in the angular.json file or alternatively inside the profile specific environment.*.ts files?

Answer 1

As the problem is solved now I want to add how it can be done, just in case someone else stumbles upon the same question.

The 'styles' property can be overridden in the 'configurations' sections of the angular.json file, e.g:

"configurations": {
  "prod": {
    "budgets": [
      ...
    ],
    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css"
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "outputHashing": "all"
  },
  "test": {
    ...

which will effectively replace the default material theme selection (specified in the 'build' section above) for the configuration.

Answer 2

I'm not shure, but you can see how it can be on official page of Angular Material https://material.angular.io/guide/theming#defining-multiple-themes