How to set global style for disabled mat-form-field in Angular 16

Question

I want to change the color of disabled mat-form-field from the global configuration in angular material 16. (is it possible to do it on the root level by defining it in the config?)

I have created a custom material theme and custom material typography. like this:

@use "@angular/material" as mat;
@use "sass:map";
@import '@angular/material/theming';
@include mat.core();


/* Styles to be applied to Buttons */
$custom-button: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 16px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Styles to be applied to input-fields */
$custom-input: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 14px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Merge custom configs into existing config */
$custom-typography: map.merge(
    mat.define-typography-config(
        $font-family: 'Public Sans, sans-serif',
        $button: $custom-button
    ),
    (
        'input': $custom-input
    )
);

/* Custom theme colors */
$md-primary: (
    50: #e2e7eb,
    100: #b6c4ce,
    200: #869cae,
    300: #55748d,
    400: #305774,
    500: #0c395c,
    600: #0a3354,
    700: #082c4a,
    800: #062441,
    900: #031730,
    A100: #699fff,
    A200: #367fff,
    A400: #035eff,
    A700: #0054e8,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #ffffff,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #ffffff,
        A400: #ffffff,
        A700: #ffffff,
    ),
);
$md-accent: (
    50: #f2f8fa,
    100: #d4edf2,
    200: #b6e2eb,
    300: #99d7e3,
    400: #7ccce1,
    500: #1078c0,
    600: #0f6fb9,
    700: #0e66b1,
    800: #0c5da9,
    900: #0a549f,
    A100: #5e9fce,
    A200: #85b8d8,
    A400: #acd2e3,
    A700: #c0dbe7,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #000000,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #000000,
    ),
);

$arinspect-app-primary: mat-palette($md-primary);
$arinspect-app-accent: mat-palette($md-accent);
$arinspect-app-warn: mat-palette($mat-red);

$custom-theme: mat.define-dark-theme(
    (
        color: (
            primary: $arinspect-app-primary,
            accent: $arinspect-app-accent,
        ),
        typography: typography.$custom-typography,
    )
);

The material colors and font stylings are working fine but when any of the mat-form-fields is disabled, then material defaults the color to rgba(0,0,0,0.36) as you can see in the material HTML dom, it is using --mdc-filled-text-field-disabled-input-text-color for disabled input text . I want to change because the contrast of this does not look good. And I want to change it to a custom color or maybe increase the opacity to make it a little dark.

The thing is that I want to do this via configuration and not use ::ng-deep in the component level.

I could do it from the ::ng-deep but as this is soon to be deprecated by the angular team, so maybe we can do a better solution.

Answer 1

You can just add the below CSS at the bottom of the theme.scss to modify the default colors wherever needed! This is just one styles, you can lookup the variables and modify them using this method!

:root {
  --mdc-filled-text-field-disabled-container-color: gray !important;
}

full code

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography: mat.define-typography-config(),
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($theme);

:root {
  --mdc-filled-text-field-disabled-container-color: gray;
}

Stackblitz Demo