Angular v19 Conditional Material Theme Palettes - Stack Overflow

admin管理员组

文章数量:1308191

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

Share Improve this question Follow asked Feb 2 at 19:15 ChrisChris 15322 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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"
        },

本文标签： Angular v19 Conditional Material Theme PalettesStack Overflow