I am trying to update my application from v16 – v17 then v18. In both case 17 and 18 I find that material theme css is not working. Components such as sidepanel, button, dropdowns etc doesn’t have background colors.
In v16 I am importing
@import '@angular/material/theming';
But after upgrade its asking me to remove above line.
I still have custom material plattes.
@use '@angular/material' as mat;
@include mat.core();
/* ======== Angular material custom themes ======== */
$primary-palette:(
50: #e6f7eb,
100: #c3eace,
200: #9bdcae,
300: #70cf8e,
400: #4bc475,
500: #1ab95c,
600: #0daa52,
700: #009746,
800: #00863b,
900: #006626,
A100: #c6eac0,
A200: #9fdc97,
A400: #52c447,
A700: #009700,
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: rgba(black, 0.87),
400: rgba(black, 0.87),
500: white,
600: white,
700: white,
800: white,
900: white,
A100: rgba(black, 0.87),
A200: rgba(black, 0.87),
A400: white,
A700: white,
)
);
$main-custom-primary: mat.define-palette($primary-palette, 500, 300, 900);
$main-custom-accent: mat.define-palette($mat-pink, 100, 500, A100);
$main-custom-warn: mat.define-palette($mat-red,900);
$main-theme: mat.define-light-theme((
color: (
primary: $main-custom-primary,
accent: $main-custom-accent,
warn: $main-custom-warn,
),
typography: mat.define-typography-config(
$font-family: '"Inter", Arial, Helvetica, sans-serif',
$body-1: mat.define-typography-level(
$font-size: 14px,
$line-height: 1.5,
)
)
));
@include mat.all-component-themes($main-theme);
Upon inspecting I see that the variables are not working.
background-color: var(--mat-select-panel-background-color, var(--mat-app-surface-container));
Its same with sidepanel
package.json
"private": true,
"browser": {
"fs": false,
"path": false,
"os": false
},
"resolutions": {
"webpack": "^5.0.0-beta.30"
},
"dependencies": {
"@angular-builders/custom-webpack": "^13.1.0",
"@angular-material-components/datetime-picker": "^16.0.1",
"@angular/animations": "^18.2.2",
"@angular/cdk": "^18.2.2",
"@angular/common": "18.2.2",
"@angular/compiler": "18.2.2",
"@angular/core": "18.2.2",
"@angular/fire": "^7.2.1",
"@angular/forms": "18.2.2",
"@angular/material": "^18.2.2",
"@angular/material-moment-adapter": "18.2.2",
"@angular/platform-browser": "18.2.2",
"@angular/platform-browser-dynamic": "18.2.2",
"@angular/platform-server": "18.2.2",
"@angular/router": "18.2.2",
"@angular/ssr": "^18.2.2",
"@aws-sdk/client-s3": "^3.582.0",
"@aws-sdk/lib-storage": "^3.409.0",
"@aws-sdk/s3-request-presigner": "^3.272.0",
"@aws-sdk/signature-v4-crt": "^3.408.0",
"@aws-sdk/util-user-agent-node": "^3.408.0",
"@calumk/editorjs-columns": "^0.3.2",
"@compodoc/compodoc": "^1.1.19",
"@editorjs/attaches": "^1.3.0",
"@editorjs/checklist": "^1.6.0",
"@editorjs/code": "^2.9.0",
"@editorjs/editorjs": "^2.29.1",
"@editorjs/embed": "^2.7.0",
"@editorjs/header": "^2.8.1",
"@editorjs/image": "^2.9.0",
"@editorjs/link": "^2.6.2",
"@editorjs/list": "^1.9.0",
"@editorjs/paragraph": "^2.11.4",
"@editorjs/quote": "^2.6.0",
"@editorjs/raw": "^2.5.0",
"@editorjs/table": "^2.3.0",
"@editorjs/underline": "^1.1.0",
"@editorjs/warning": "^1.4.0",
"@formio/angular": "^6.0.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fullcalendar/angular": "^6.1.8",
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/interaction": "^6.1.8",
"@fullcalendar/list": "^6.1.8",
"@fullcalendar/moment": "^6.1.8",
"@fullcalendar/rrule": "^6.1.8",
"@fullcalendar/timegrid": "^6.1.8",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@pdftron/webviewer": "^8.0.0",
"@types/jspdf": "^1.3.3",
"@types/stripe": "^7.13.25",
"algoliasearch": "^4.12.1",
"angular-instantsearch": "^4.4.1",
"angular-sanitize": "^1.8.3",
"aos": "^2.3.4",
"apexcharts": "^3.26.1",
"archiver": "^5.3.1",
"bootstrap": "^5.1.3",
"crypto-browserify": "^3.12.0",
"crypto-es": "^1.2.7",
"crypto-js": "^4.0.0",
"domino": "^2.1.6",
"domino-ext": "^2.1.4",
"dotenv": "^16.0.1",
"editorjs-alert": "^1.1.3",
"editorjs-html": "^3.4.3",
"editorjs-style": "^3.0.3",
"editorjs-text-color-plugin": "^2.0.4",
"editorjs-toggle-block": "^0.3.15",
"express": "^4.15.2",
"firebase": "^9.23.0",
"fs-extra": "^11.2.0",
"gapi-script": "^1.2.0",
"highlight.js": "10.7.2",
"html2pdf.js": "^0.10.1",
"i": "^0.3.7",
"instantsearch.js": "^4.54.1",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.23",
"leader-line": "^1.0.7",
"lodash-es": "4.17.21",
"material-steppers": "^2.0.0",
"moment": "^2.29.1",
"ng-apexcharts": "^1.7.4",
"ng-quill": "^4.5.3",
"ng-starrating": "^1.0.20",
"ng-stripe-checkout": "^1.0.4",
"ngx-device-detector": "^2.0.8",
"ngx-mat-select-search": "^7.0.0",
"node-fetch": "^2.6.1",
"npm": "^10.1.0",
"perfect-scrollbar": "1.5.0",
"pm2": "^5.2.2",
"quill": "1.3.7",
"quill-emoji": "^0.2.0",
"request": "^2.88.2",
"rrule": "2.6.8",
"rxjs": "^7.5.5",
"rxjs-compat": "^6.6.7",
"source-map-explorer": "^2.5.2",
"split-file": "^2.3.0",
"stripe": "^8.116.0",
"stripe-angular": "^1.9.3",
"sweetalert2": "^11.4.24",
"title-editorjs": "^1.0.2",
"ts-md5": "^1.3.1",
"tslib": "2.2.0",
"video.js": "^7.21.4",
"videojs-logo": "^2.1.6",
"videojs-markers": "^1.0.1",
"videojs-playlist": "^5.1.0",
"videojs-seek-buttons": "^3.0.1",
"vis": "^4.21.0-EOL",
"vis-data": "^7.1.9",
"vis-network": "^9.1.9",
"vjs": "^0.1.8",
"web-animations-js": "2.3.2",
"xlsx": "^0.18.5",
"zone.js": "^0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "18.2.2",
"@angular/cli": "18.2.2",
"@angular/compiler-cli": "18.2.2",
"@angular/language-service": "18.2.2",
"@formio/js": "^5.0.0-rc.48",
"@ngx-builders/analyze": "^2.3.0",
"@ngx-meta/core": "9.0.0",
"@types/crypto-js": "4.0.1",
"@types/express": "^4.17.0",
"@types/highlight.js": "9.12.4",
"@types/jasmine": "3.6.10",
"@types/jasminewd2": "2.0.8",
"@types/lodash-es": "4.17.4",
"@types/node": "15.0.1",
"browser-sync": "^3.0.0",
"bufferutil": "^4.0.3",
"codelyzer": "6.0.2",
"file-saver": "^2.0.5",
"formiojs": "^4.18.2",
"jasmine-core": "3.7.1",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.3.2",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"ngx-infinite-scroll": "^16.0.0",
"ngx-moment": "^6.0.2",
"ngx-owl-carousel-o": "^16.0.0",
"ngx-pagination": "^6.0.3",
"ngx-quill": "^22.0.0",
"protractor": "7.0.0",
"tailwindcss": "2.1.2",
"ts-node": "9.1.1",
"tslint": "6.1.2",
"typescript": "5.5.4",
"utf-8-validate": "^5.0.5",
"ws": "^8.2.2",
"xhr2": "^0.2.1"
}
}
In v16 I could see these variables
But its missing in v17-v18
Any idea why my theme is not working ?
2
The first path doesn’t exist in Angular Material 17+.
Replace the line:
@import '@angular/material/theming';
With:
@import '@angular/material/prebuilt-themes/indigo-pink.css';
I don’t know which theme you are using, but other choices are:
- azure-blue.css
- cyan-orange.css
- deeppurple-amber.css
- indigo-pink.css
- magenta-violet.css
- pink-bluegrey.css
- purple-green.css
- rose-red.css
1
I see there is a new way we can use custom theme. I could modify existing theme variables and able to achive without using any pre built theme.
@use '@angular/material' as mat;
// output from @debug matx.$m3-azure-palette
$my-m3-colours: (
0: #e6f7eb,
10: #272727,
20: #9bdcae,
25: #70cf8e,
30: #4bc475,
35: #1ab95c,
40: #0daa52,
50: #009746,
60: #00863b,
70: #006626,
80: #c6eac0,
90: #9fdc97,
95: #52c447,
98: #009700,
99: #ffffff,
100: #ffffff,
secondary: (
0: #000000,
10: #131c2b,
20: #283041,
25: #333c4d,
30: #3e4759,
35: #4a5365,
40: #565e71,
50: #6f778b,
60: #8891a5,
70: #a3abc0,
80: #bec6dc,
90: #9bdcae,
95: #ecf0ff,
98: #f9f9ff,
99: #ffffff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #1a1b1f,
20: #2f3033,
25: #3b3b3f,
30: #46464a,
35: #525256,
40: #5e5e62,
50: #77777a,
60: #919094,
70: #ababaf,
80: #c7c6ca,
90: #e3e2e6,
95: #f2f0f4,
98: #faf9fd,
99: #ffffff,
100: #ffffff,
4: #0a0b0c,
6: #101013,
12: #1e1f23,
17: #292a2d,
22: #343438,
24: #39393d,
87: #dbdade,
92: #e9e8ec,
94: #ffffff,
96: #ffffff,
),
neutral-variant: (
0: #000000,
10: #181c22,
20: #2d3038,
25: #383b43,
30: #44474e,
35: #4f525a,
40: #5b5e66,
50: #74777f,
60: #8e9099,
70: #a9abb4,
80: #c4c6d0,
90: #e0e2ec,
95: #eff0fa,
98: #f9f9ff,
99: #ffffff,
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,
),
);
$theme: mat.define-theme((
color: (
theme-type: light,
primary: $my-m3-colours,
tertiary: mat.$blue-palette,
)
));
body {
@include mat.all-component-themes($theme);
}
@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);