How to add Alpha in background?

Question

I want to change background alpha rgba(0,0,0,.5), in angular material-18, i tried this code but not working:

.alternate-theme-blue-navbar {
  .mat-toolbar-row {
    background: rgba(mat.get-theme-color(m3-blue-theme.$light-theme, primary), .8) !important;
    color: var(--mat-toolbar-container-text-color);
  }
}

Please help.

Answer 1

Since no minimal reproducible example provided, here is a working example using different alpha values for each toolbar row.

styles.scss

.alternate-theme-blue-navbar {
  .mat-toolbar-row:nth-child(1) {
    background: rgba(mat.get-theme-color($theme, primary), 0.8) !important;
    color: var(--mat-toolbar-container-text-color);
  }
  .mat-toolbar-row:nth-child(2) {
    background: rgba(mat.get-theme-color($theme, primary), 0.5) !important;
    color: var(--mat-toolbar-container-text-color);
  }
  .mat-toolbar-row:nth-child(3) {
    background: rgba(mat.get-theme-color($theme, primary), 0.1) !important;
    color: var(--mat-toolbar-container-text-color);
  }
}

HTML:

<mat-toolbar class="alternate-theme-blue-navbar">
  <mat-toolbar-row>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Example user verified icon"
      >verified_user</mat-icon
    >
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Third Line</span>
    <span class="example-spacer"></span>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Example heart icon"
      >favorite</mat-icon
    >
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Example delete icon"
      >delete</mat-icon
    >
  </mat-toolbar-row>
</mat-toolbar>

Stackblitz Demo