CODEWITHSUNDEEP
angularangular-materialangular5
Codo
Codo

Reputation: 78855

How to set color of toggle buttons

I have group of toggle buttons. They are very light and disappear in the background on poor monitors with a high brightness level.

enter image description here

How can I properly style them? I would prefer to assign them the accent or primary colors, the way you can do it for regular buttons.

In may case, the primary and accent colors are dark. So they text should become white (with some transparency). For regular buttons, it automatically works.

<div class="output-size">
  <mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
  </mat-button-toggle-group>
</div>

Upvotes: 43

Views: 84972

Answers (8)

Erhan Erdoğan
Erhan Erdoğan

Reputation: 11

First, add a class to your mat-button-toggle component:

<mat-button-toggle class="custom-toggle" [checked]="isChecked">Option</mat-button-toggle>

Next, define this class in your CSS file and set the background color:

.custom-toggle.mat-button-toggle-checked {
  background-color: #3498db; /* Background color when checked */
  color: #ffffff; /* Change text color if desired */
}

In the example above, the custom-toggle class is a custom class for the mat-button-toggle component, and it applies the specified style rules when the button is checked. Using this class, you can define different background colors or other style properties for the checked and unchecked states.

You can customize the CSS rules further to meet your specific design requirements.

Upvotes: 1

mbah
mbah

Reputation: 11

just add this on your component style:

.mat-button-toggle-checked {
    background-color: var(--color-500); // set the wanted color
    color: white;
}

Upvotes: 0

Senthil Kumar
Senthil Kumar

Reputation: 183

You can use this Three CSS Classes .mat-button-toggle and .mat-button-toggle-checked for two state of styles

HTML Code

<mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
</mat-button-toggle-group>

CSS Code - You must use !important

.mat-button-toggle{
    background-color: #306cee;
    color: #ffffff;
}

.mat-button-toggle:hover {
    background-color: transparent;
    color: #1100ff !important;    
}

.mat-button-toggle-checked {
    background-color: #ec2c4c;
    color: #67ec79 !important;
}

Upvotes: 13

Santosh
Santosh

Reputation: 1056

Add the following styles in styles.scss 

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

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-yellow, A200, A100, A400);

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

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

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  .mat-button-toggle-checked {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
}

ps: I assumed you have selected scss and custom theme

Upvotes: 1

juliana fernandez
juliana fernandez

Reputation: 107

mat-button-toggle-group {
  box-shadow: none;
}

mat-button-toggle {
    border: 1px rgba(0,0,0,0) solid !important;
    margin-top: 5px !important;
    padding: 0 5px !important;
    z-index: 3 !important;
}

mat-button-toggle:hover {
    border: 1px #000 solid !important;
    background-color: #FFF !important;
    border-radius: 5px !important;
}

.mat-button-toggle-checked {
	  box-shadow: 0 0 30px #000 !important;
    border: 1px #000 solid !important;
    border-radius: 5px !important;
    background-color: #FFF !important;
}

.mat-button-toggle-input {
    background-color: none !important;
    padding-left: 32px !important;
}

if you only want to change the style of checked

Upvotes: 9

Sergiu Starciuc
Sergiu Starciuc

Reputation: 574

A workaround may be something like:

<mat-button-toggle-group>
  <mat-button-toggle value="letter">
    <button mat-button color="primary" style="pointer-events:none;">
      Letter
    </button>
  </mat-button-toggle>
  <mat-button-toggle value="legal">
    <button mat-button color="accent" style="pointer-events:none;">
      Legal
    </button>
  </mat-button-toggle>
</mat-button-toggle-group>

Upvotes: 0

Coderer
Coderer

Reputation: 27284

Customizing the presentation using your own theme SASS, as the other answer shows, is a great short-term solution and gives you a lot of power over the presentation. Ideally, this would become part of the core theme declarations, so that <mat-button-toggle-group color="primary"> (perhaps also <mat-button-toggle color="primary">) just works without additional steps.

If you want to make this simpler in the future, give a thumbs-up to this issue.

Upvotes: 4

Sashel Niles Gruber
Sashel Niles Gruber

Reputation: 1221

matButtonToggle does not support the color property like matButton.

You can use the css classes .mat-button-toggle and .mat-button-toggle-checked to style the different states.

With material theming you can extract whichever individual palettes you need from the theme and apply the backgrounds default-contrast color to the text color to achieve optimal contrast with light or dark colors.

Here is a Stackblitz with your mat-button-toggle-group example: Stackblitz angular-t1k1x6

Theming used:

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

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

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

Documents: Theming your Angular Material app

Upvotes: 85

Related Questions