I am developing an Angular v19 application and I am struggling to find a way to programatically change the material theme color palettes.

The reason for this feature is to make it very apparent when testing the application that we are not accidently using the production version. I am trying to read the current environment (production, development, testing) and set the color paette accordingly.

I first tried creating separate scss files for each scenario and hoped to use fileReplacements in angular.json to set a style file from which I could read a colour palette. It appears that fileReplacements doesn't allow .scss files.

I then tried using a SASS @if in the main styles.scss file to set the mat.theme conditionally on a css variable which could be changed programatically, but I can't seem to figure this out.

Reading the docs there may be a way to achieve this with $overrides.

If anyone knows how to switch themes, or color palettes programatically I would be very interested to learn.

I am developing an Angular v19 application and I am struggling to find a way to programatically change the material theme color palettes.

The reason for this feature is to make it very apparent when testing the application that we are not accidently using the production version. I am trying to read the current environment (production, development, testing) and set the color paette accordingly.

I first tried creating separate scss files for each scenario and hoped to use fileReplacements in angular.json to set a style file from which I could read a colour palette. It appears that fileReplacements doesn't allow .scss files.

I then tried using a SASS @if in the main styles.scss file to set the mat.theme conditionally on a css variable which could be changed programatically, but I can't seem to figure this out.

Reading the docs there may be a way to achieve this with $overrides.

If anyone knows how to switch themes, or color palettes programatically I would be very interested to learn.

• angular-material
• themes

1 Answer 1

Production has its own styles array in angular.json, just add the style here and you can configure styles as per the environment:

      "configurations": {
        "production": {
          "styles": ["/src/light.scss"],
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all"
        },