Change Mat form field Input color

Question

I am working on angular material Is there anyway i can change the color of the mat input form without creating a new theme file ? I have the deeppurple-ember theme running right now. I just want to change the color of the primary color to a dark green instead of the default purple.

I created a sample scss file, but since it is a basic file i am losing all the graphic functionality that comes with the prebuilt theme.

This is what i have

@import '~@angular/material/theming';
@include mat-core();

  $primary: mat-palette($mat-green,200);
  $accent: mat-palette($mat-red,200);

  $theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

This is my input form in the prebuilt theme

<mat-form-field class="a">
<input matInput placeholder="Search" style="display:inline; width:200px">
</mat-form-field>

Css file

.a{
  color:#129D90;
}

This changes the font of the input field but not the color of the underline and the form label.

I am sure there must be some way of changing the color of the label and the underline without changing the entire theme of my application.

I was able to change the color of font, i want to change the color of the underline and the form label (which is "Search") in this scenario. — Harsha Jasti
– Harsha Jasti, Commented Jul 12, 2018 at 19:20
you need to custom built it. since deeppurple-amber, indigo-pink pink-bluegrey, purple-green are only default colors — yer
– yer, Commented Jul 12, 2018 at 19:21

yer · Accepted Answer · 2018-07-12 19:26:30Z

1

Your custom built theme works perfectly fine. You just need to import custom file into related
component.scss file instead of importing it globally.

answered Jul 12, 2018 at 19:26

yer

1,5322 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Zgoda · Accepted Answer · 2018-09-05 17:18:17Z

You've almost created it exactly right, you're just missing the part where you create $mat-green and $mat-red, like so:

$mat-green: (
    50 : #f2f8ef,
    100 : #dfedd8,
    200 : #c9e2be,
    300 : #b3d6a4,
    400 : #a3cd91,
    500 : #93c47d,
    600 : #8bbe75,
    700 : #80b66a,
    800 : #76af60,
    900 : #64a24d,
    A100 : #ffffff,
    A200 : #daffcd,
    A400 : #b4ff9a,
    A700 : #a1ff80,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-red: (
    50 : #f9e0e0,
    100 : #f0b3b3,
    200 : #e68080,
    300 : #db4d4d,
    400 : #d42626,
    500 : #cc0000,
    600 : #c70000,
    700 : #c00000,
    800 : #b90000,
    900 : #ad0000,
    A100 : #ffd7d7,
    A200 : #ffa4a4,
    A400 : #ff7171,
    A700 : #ff5858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

See it running in this StackBlitz Demo.

Collectives™ on Stack Overflow

Change Mat form field Input color

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related