Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
Angular material select compoent has a transparent background color when using custom theme
Reproduction
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
@include mat.core();
// Note: Color palettes are generated from primary: #232e62, secondary: #cc862a, tertiary: #44263e, neutral: #929093
$_palettes: (
primary: (
0: #000000,
10: #1258,
20: #142778,
25: #213484,
30: #2e4090,
35: #3b4c9c,
40: #4758a9,
50: #6171c4,
60: #7b8be0,
70: #95a6fd,
80: #b9c3ff,
90: #dee1ff,
95: #f0efff,
98: #fbf8ff,
99: #fefbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #2b1700,
20: #482900,
25: #573300,
30: #673d00,
35: #774800,
40: #875200,
50: #a96800,
60: #c88120,
70: #e79b39,
80: #ffb866,
90: #ffddba,
95: #ffeedf,
98: #fff8f4,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #390035,
20: #56124f,
25: #631f5b,
30: #712b67,
35: #7f3774,
40: #8c4381,
50: #a95c9b,
60: #c675b6,
70: #e48fd2,
80: #ffacec,
90: #ffd7f2,
95: #ffebf6,
98: #fff7f9,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #000c61,
20: #1a2678,
25: #273384,
30: #333f90,
35: #404b9c,
40: #4c57a9,
50: #6570c4,
60: #7f8ae0,
70: #9aa5fd,
80: #bcc2ff,
90: #dfe0ff,
95: #f0efff,
98: #fbf8ff,
99: #fffbff,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #1a1b23,
20: #2f3038,
25: #3a3b43,
30: #45464f,
35: #51525b,
40: #5d5e67,
50: #767680,
60: #90909a,
70: #abaab4,
80: #c6c5d0,
90: #e3e1ec,
95: #f1effa,
98: #fbf8ff,
99: #fefbff,
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);
$goldstar-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
brand-family: 'Comic Sans',
bold-weight: 900,
),
));
html, body {
@include mat.core-theme($goldstar-theme);
@include mat.all-component-themes($goldstar-theme);
@include mat.color-variants-backwards-compatibility($goldstar-theme);
@include mat.system-level-colors($goldstar-theme);
@include mat.system-level-typography($goldstar-theme);
}
.mat-mdc-snack-bar-container {
&.snack-success {
--mdc-snackbar-container-color: #f6ffed;
--mat-mdc-snack-bar-button-color: #000000;
--mdc-snackbar-supporting-text-color: #000000;
--mat-snack-bar-button-color: rgb(0, 0, 0);
}
&.snack-warn {
--mdc-snackbar-container-color: #fffbe6;
--mat-mdc-snack-bar-button-color: #000000;
--mdc-snackbar-supporting-text-color: #000000;
--mat-snack-bar-button-color: rgb(0, 0, 0);
}
&.snack-error {
--mdc-snackbar-container-color: #ffccc7;
--mat-mdc-snack-bar-button-color: #000000;
--mdc-snackbar-supporting-text-color: #000000;
--mat-snack-bar-button-color: rgb(0, 0, 0);
}
}
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
border-right-style: hidden;
}
// afdded to temporarily fix issue
- {
--mat-select-panel-background-color: #fff;
}
Expected Behavior
Background should be white if theme-type is light
Actual Behavior
Background color is transparent
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):
@angular-devkit/architect 0.1800.1
@angular-devkit/build-angular 18.0.1
@angular-devkit/core 18.0.1
@angular-devkit/schematics 18.0.1
@angular/cli 18.0.1
@schematics/angular 18.0.1
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Chrome Browser
Windows 10