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;
}




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:buildroduction"
},
"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": []
}
}
}
}
}
}

Continue reading...