angularmaterial-uiangular-materialmaterial3angular18

Colors are not visible for the Angular Custom Material theme in Angular 18

I have created a custom theme in Angular Material 3, in Angular 18 But the theme is not getting applied.

Initially I was importing the theme and then applying but that was not working so I copied all the color pallets in the main file but still not working...

I would appreciate any help, thank you!

It's asking me to add more text!!

I have created a custom theme in Angular Material 3, in Angular 18 But the theme is not getting applied.

Initially I was importing the theme and then applying but that was not working so I copied all the color pallets in the main file but still not working...

I would appreciate any help, thank you!

src/styles.scss:

@use "sass:map";
@use "@angular/material" as mat;

@include mat.core();

$_palettes: (
  primary: (
    0: #000000,
    10: #291428,
    20: #3f293d,
    25: #4b3449,
    30: #573f54,
    35: #644a60,
    40: #70566d,
    50: #8b6e86,
    60: #a588a0,
    70: #c1a2bb,
    80: #debdd7,
    90: #fbd8f4,
    95: #ffebf8,
    98: #fff7fa,
    99: #fffbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #181e00,
    20: #2b3400,
    25: #354000,
    30: #3f4c01,
    35: #4b580e,
    40: #57641a,
    50: #6f7e31,
    60: #889848,
    70: #a3b360,
    80: #becf78,
    90: #daeb91,
    95: #e8f99e,
    98: #f5ffc4,
    99: #fbffdf,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #3a0a00,
    20: #5f1600,
    25: #721c00,
    30: #862300,
    35: #992b03,
    40: #aa3710,
    50: #cb4f27,
    60: #ed673e,
    70: #ff8b68,
    80: #ffb59f,
    90: #ffdbd1,
    95: #ffede8,
    98: #fff8f6,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #020d00,
    6: #031400,
    10: #052100,
    12: #072600,
    17: #0b3200,
    20: #0d3900,
    22: #0f3e00,
    24: #114300,
    25: #124500,
    30: #175200,
    35: #1c5f00,
    40: #216d00,
    50: #308909,
    60: #4ba429,
    70: #65c042,
    80: #80dc5b,
    87: #93f16c,
    90: #9bfa74,
    92: #affc8d,
    94: #c2fea6,
    95: #ccffb2,
    96: #d7ffc1,
    98: #edffdf,
    99: #f7ffed,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #201a1f,
    20: #352e34,
    25: #41393f,
    30: #4c444a,
    35: #585056,
    40: #655c62,
    50: #7e747b,
    60: #988e94,
    70: #b3a8af,
    80: #cfc3ca,
    90: #ecdfe6,
    95: #faedf4,
    98: #fff7fa,
    99: #fffbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);


$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes, neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

// Define the theme object.
$budgetify-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
      use-system-variables: true,
    ),
    density: (
      scale: 0,
    ),
  )
);

:root {
  @include mat.all-component-themes($budgetify-theme);
}

@include mat.color-variants-backwards-compatibility($budgetify-theme);

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

It's looking like this ->

Here's the angular.json

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "budgetify": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/budgetify",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "budgetify:build:production"
            },
            "development": {
              "buildTarget": "budgetify:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}
Solution

  • UPDATE:

    A good workaround for this bug is to call the two functions mat.system-level-colors and mat.system-level-typography after the mat.all-component-themes which seems to fix this bug.

    :root {
  @include mat.all-component-themes($budgetify-theme);
  @include mat.system-level-colors(
    $budgetify-theme
  ); // <- workaround for use system variables bug
  @include mat.system-level-typography(
    $budgetify-theme
  ); // <- workaround for use system variables bug
}

    Stackblitz Demo

    Related Answer

    It looks like there is a bug in use-system-variables, you can uncomment this line and you theme should work fine.

    Do raise a bug on their GitHub using this demo Stackblitz so that it's fixed soon.

    // Define the theme object.
$budgetify-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
      // use-system-variables: true, // <- uncomment this to see the bug.
    ),
    density: (
      scale: 0,
    ),
  )
);

    Stackblitz Demo