Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular Material Theme style not working after upgrade to Angular v18

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

enter image description here

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

enter image description here

But its missing in v17-v18

Any idea why my theme is not working ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search