Customizing the default font color in Angular Material

Question

Customizing the default font color in Angular Material

I am currently navigating through theming in Angular Material and feeling a bit disoriented. I have implemented the prebuilt indigo-pink theme by importing it into my styles.scss as shown below:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Following the documentation, I created a new file named theme.scss and included it in the angular.json after styles.scss. Here is how my theme.scss looks:

@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 Objective All I want to do is change the default font color to white instead of black everywhere. I do not intend to modify anything else. I simply copied the primary and accent palette from the example, so I also feel they might not need any alterations.

css angular angular-material angular-material-theming

Answer 1

Answer №1

It appears that your query has been addressed in this post: . Essentially, you will need to create a customized foreground map and integrate it into your theme. By combining the code snippet provided and the information from the aforementioned post, you can achieve something similar to the following 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;
}

Answer 2

It appears that your query has been addressed in this post: . Essentially, you will need to create a customized foreground map and integrate it into your theme. By combining the code snippet provided and the information from the aforementioned post, you can achieve something similar to the following 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;
}

Answer 3

Answer №2

Utilize utility functions that allow you to input primary, accent, and warn palettes while automatically generating background and foreground colors.

These convenient functions are included in the scss provided by angular material file, making it easy to incorporate them into your theme configurations.

Take a look at the following code snippets for reference, showcasing how they effortlessly include foregrounds and backgrounds for light and dark themes. It's truly impressive work by the team behind this functionality.

 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}


@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

Answer 4

Utilize utility functions that allow you to input primary, accent, and warn palettes while automatically generating background and foreground colors.

These convenient functions are included in the scss provided by angular material file, making it easy to incorporate them into your theme configurations.

Take a look at the following code snippets for reference, showcasing how they effortlessly include foregrounds and backgrounds for light and dark themes. It's truly impressive work by the team behind this functionality.

 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}


@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

Answer 5

Answer №3

After experimenting with Angular 15 and avoiding custom functions, I discovered a solution that worked well for me.

@use '@angular/material' as mat;

...

$newFontColor: green;

// Accessing color parameter from our theme
$palette-color : map-get($mat-indigo, color);
// Extracting background parameter from color parameter
$foreground: map-get($palette-color, foreground);
$foreground: map_merge($foreground, (text: $newFontColor);
// Adjusting foreground parameter for palette
$palette-color: map_merge($palette-color, (foreground: $foreground));
// Updating palette for theme
$light-theme: map_merge($light-theme, (color: $palette-color));

@include mat.all-component-themes($light-theme);

I found guidance in this article that helped me connect the dots.

Answer 6

After experimenting with Angular 15 and avoiding custom functions, I discovered a solution that worked well for me.

@use '@angular/material' as mat;

...

$newFontColor: green;

// Accessing color parameter from our theme
$palette-color : map-get($mat-indigo, color);
// Extracting background parameter from color parameter
$foreground: map-get($palette-color, foreground);
$foreground: map_merge($foreground, (text: $newFontColor);
// Adjusting foreground parameter for palette
$palette-color: map_merge($palette-color, (foreground: $foreground));
// Updating palette for theme
$light-theme: map_merge($light-theme, (color: $palette-color));

@include mat.all-component-themes($light-theme);

I found guidance in this article that helped me connect the dots.

Customizing the default font color in Angular Material

Answer №1

Answer №2

Answer №3

Similar questions

Angular 8: Setting the Default Dropdown Option to the Newest Value in the Updated ArrayList

The dimensions of the background for a span element

Issue with host-context scss rules not appearing in final production version

"Troubleshoot: Why is the Position Absolute Not Functioning in

Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

Maximizing space efficiency in Bootstrap 5

Ensure that the buttons are arranged in a single row and have horizontal overflow in the mobile version

What is the method for inserting a vertical line between two div elements?

Aligning Checkbox Labels for Web Forms

How can I add a dropdown filter to column values in ag-grid?

Tips on transforming button-controlled tab pages in Bootstrap 2 to Bootstrap 3

Displaying a dynamic progress bar across all elements in fullscreen mode

Add a touch of shadow to a stationary top banner as you scroll through the page

The dropdown in the Material UI GridList appears excessively wide

What is the best way to refine the dataSource for a table (mat-table) using ngx-daterangepicker-material?

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

What is the best way to resolve the CSS border styling issue surrounding the anchor element?

Tips for Resizing and Reviving Divs with jQuery

Saving data outside of the Angular 5 subscribe method involves storing the information in a

in Vue.js, extract the style of an element and apply it to a different element