angular material changing default font color
I believe this post answers your question: https://stackoverflow.com/a/46157803/10730815. Basically, you need to build a custom foreground map and merge it into your theme. Combining your code snippet and the ones in the post above gives something like this for your styles.scss:
@import '~@angular/material/theming';
@include mat-core();
$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);
@function my-mat-light-theme-foreground($color) {
@return (
base: $color,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba($color, 0.38),
disabled-button: rgba($color, 0.38),
disabled-text: rgba($color, 0.38),
hint-text: rgba($color, 0.38),
secondary-text: rgba($color, 0.54),
icon: rgba($color, 0.54),
icons: rgba($color, 0.54),
text: rgba($color, 0.87),
slider-off: rgba($color, 0.26),
slider-off-active: rgba($color, 0.38),
slider-min: rgba($color, 0.38)
);
};
$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));
@include angular-material-theme($my-app-theme-custom);
/* For the non-Angular Material items */
body {
color: white;
}
Related videos on Youtube
Moblize IT
We at http://moblize.it build chat bots, mobile apps and do enterprise integrations
Updated on June 04, 2022Comments
-
Moblize IT almost 2 years
i am using angular material and a bit lost at theming. I am using the prebuilt indigo-pink theme which is included in my styles.scss as below
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Based on the doc i created a new file called theme.scss and included it in the angular.json after styles.scss. The theme.scss looks like below
@import '~@angular/material/theming'; @include mat-core(); $sg-app-primary: mat-palette($mat-indigo); $sg-app-accent: mat-palette($mat-pink, A200, A100, A400); $sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent); @include angular-material-theme($sg-app-theme);
My Requirement I just need to change default font color to white rather black everywhere. I dont need to change anything else at all. I have copied the primary and accent pallete just from example. so feeling even they are not required to be changed.
-
Christian Matthew over 2 yearsthis is out of date but i am trying to figure out how to update it. I will say it seems like not a good way to do this because of the light and dark theme breakage.