Angular Material Heighten Contrast Globally? - css

Question

I am trying to put together some basic reactive forms.
The problem we have is that our compliance department is not going to let us go through because all of the contrasts for material form fields are too transparent/light.
I am looking for a way to darken up all of the form fields, outlines, disabled text etc.
I have been trying to make it global by going into my primary stylesheet. However I cannot seem to figure out how to override material in this way.
I have tried the following within the scss:
.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
opacity: 1.0 !important;
}
.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
opacity: 1.0 !important;
}
Or higher in the themes:
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);
$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);
$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );
Neither of these approaches seem to effect the project and components in any way.
Is there a method I can use to darken the contrast of all form fields globally? Without resorting to directives or having to include the same manual css to every component.css ?
Thanks much.
EDIT: I am trying to overcome this very transparent.

Answer 1

You should be able to override most of the mat-form-field rules to meet your requirements. Here are some examples you can add to your top level style sheet for the 'fill' appearance:
.mat-form-field-appearance-fill {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.08);
}
}
.mat-form-field-appearance-fill.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
}
https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss
For appearance="outline"
.mat-form-field-appearance-outline {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.4);
}
}
.mat-form-field-appearance-outline.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.2);
}
}
https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html