Angular Material Custom Theme is not Working

Question

I'm trying to use a custom theme on Angular Material but I can't get it to work. I'm trying to setup a primary and secondary and also to setup my own background and foreground color.

What am I doing wrong?

Here is my style.scss

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

@include mat.core();

--root {
  --background-color: #f0f0f0;
  --default-text-color: #1e1e1e;
}

$topline-planungsburo-primary: mat.define-palette(palette.$blue-palette);
$topline-planungsburo-accent: mat.define-palette(
  palette.$green-palette,
  A200,
  A100,
  A400
);

$topline-planungsburo-warn: mat.define-palette(mat.$red-palette);

$topline-planungsburo-theme: mat.define-light-theme(
  (
    color: (
      primary: $topline-planungsburo-primary,
      accent: $topline-planungsburo-accent,
      warn: $topline-planungsburo-warn,
    ),
  )
);

$material-theme-overrides: (
  "color": (
    "background": (
      "background": var(--background-color),
    ),
    "foreground": (
      "text": var(--default-text-color),
    ),
  ),
);

$topline-planungsburo-theme: map.deep-merge(
  $topline-planungsburo-theme,
  $material-theme-overrides
);

@include mat.all-component-themes($topline-planungsburo-theme);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

this is my _palette.scss :

// primary color
$blue-palette: (
  50: #e0edf8,
  100: #b3d1ed,
  200: #80b2e2,
  300: #4d93d6,
  400: #267ccd,
  500: #0065c4,
  600: #005dbe,
  700: #0053b6,
  800: #0049af,
  900: #0037a2,
  A100: #ccdaff,
  A200: #99b4ff,
  A400: #668fff,
  A700: #4d7cff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #ffffff,
  ),
);

// secondary color
$green-palette: (
  50: #ecf6e6,
  100: #d0e7c1,
  200: #b1d898,
  300: #91c86e,
  400: #7abc4f,
  500: #62b030,
  600: #5aa92b,
  700: #50a024,
  800: #46971e,
  900: #348713,
  A100: #ccffbb,
  A200: #a6ff88,
  A400: #7fff55,
  A700: #6cff3b,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

here is my angular.json:

 "options": {
            "outputPath": "dist/topline-planungsburo/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles/styles.scss"],
            "scripts": []
},

here is my index.html:

<body class="mat-typography mat-app-background">
  <app-root></app-root>
</body>

for the primary and secondary color I have gone through the angular docs on theming angular.docs

this link helped me for overriding the background and foreground color : // the answer of ibrcic on May 23, 2022.

Angular Material Custom Theme is not Working

0 Answers0