Angular Material Style concerns

Question

I am trying to create some styling changes for Angular Material controls. From reading the Angular Material documentation, I am aware that the way to do this is to create a Sass file with some specific declarations in order to change the colors used in a theme.

Unfortunately, there is a lot that is unclear about what you can change in Angular Material controls, or exactly what selectors you need to change in order to change specific things. There are no examples of what to change in the _theming.scss file, and there are no examples that give any real idea what to change, or what to put in the custom mixins that you can add.

For example: it is unclear exactly where you change the color for "primary". There is an entry in the SCSS file

 $primary: map-get($theme, primary);

but where is the actual color that $theme or primary is set to???

Also: I would like to be able to make custom color changes to specific controls that are not primary, accent, warn, etc. but using custom definitions. I would also like to change control attributes other than color -- like the width of a control, its alignment, maybe add borders, other things. I can find absolutely no documentation on how to make these kinds of changes.

Can someone please advise? I need more information on making custom styles for Angular Material components and controls.

UPDATE: In light of Valeriy Katkov's comments, I am including part of the contents of my _theming.scss file -- which is radically different from the one he provided (the Angular folks apparently made radical changes not only to code, but to styling in their different versions!). I can only include part of it because the file is too large, and there seems to be no way to attach the full contents to this question.

It is clear that making styling changes is not going to be a simple process at all. The way to do this, apparently, is to dig into a maze of SCSS and (sometimes) CSS files in order to find what you need to change. This is, in my opinion, a major inadequacy in the Angular platform. At the very least, there should be a list available of the different Material component selectors and a single place where they can be accessed.

// Import all the theming functionality.
// We can use relative imports for imports from the cdk because we bundle everything
// up into a single flat scss file for material.
// We want overlays to always appear over user content, so set a baseline
// very high z-index for the overlay container, which is where we create the new
// stacking context for all overlays.
$cdk-z-index-overlay-container: 1000 !default;
$cdk-z-index-overlay: 1000 !default;
$cdk-z-index-overlay-backdrop: 1000 !default;

// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

// Default backdrop animation is based on the Material Design swift-ease-out.
$backdrop-animation-duration: 400ms !default;
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;


@mixin cdk-overlay() {
  .cdk-overlay-container, .cdk-global-overlay-wrapper {
    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  // The overlay-container is an invisible element which contains all individual overlays.
  .cdk-overlay-container {
    position: fixed;
    z-index: $cdk-z-index-overlay-container;

    &:empty {
      // Hide the element when it doesn't have any child nodes. This doesn't
      // include overlays that have been detached, rather than disposed.
      display: none;
    }
  }

  // We use an extra wrapper element in order to use make the overlay itself a flex item.
  // This makes centering the overlay easy without running into the subpixel rendering
  // problems tied to using `transform` and without interfering with the other position
  // strategies.
  .cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: $cdk-z-index-overlay;
  }

  // A single overlay pane.
  .cdk-overlay-pane {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $cdk-z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

Answer 1

The best source of angular material theming information I've found is the theme file itself node_modules\@angular\material\_theming.scss. Of course it's assumed that you already looked at Theming guide and Custom Component Theming guide, if no, you are welcome.

Let's look at an app theme setup:

// src/theme.scss

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

$typography: mat-typography-config();
@include mat-core($typography);

$background: (
    status-bar: map_get($mat-grey, 300),
    app-bar:    map_get($mat-grey, 100),
    background: #f4f4f4,
    hover:      rgba(black, 0.04),
    card:       white,
    dialog:     white,
    disabled-button: rgba(black, 0.12),
    raised-button: white,
    focused-button: $dark-focused,
    selected-button: map_get($mat-grey, 300),
    selected-disabled-button: map_get($mat-grey, 400),
    disabled-button-toggle: map_get($mat-grey, 200),
    unselected-chip: map_get($mat-grey, 300),
    disabled-list-option: map_get($mat-grey, 200)
);

$foreground: (
    base:              black,
    divider:           $dark-dividers,
    dividers:          $dark-dividers,
    disabled:          $dark-disabled-text,
    disabled-button:   rgba(black, 0.26),
    disabled-text:     $dark-disabled-text,
    hint-text:         $dark-disabled-text,
    secondary-text:    $dark-secondary-text,
    icon:              #848484,
    icons:             #848484,
    text:              #212121,
    slider-min:        rgba(black, 0.87),
    slider-off:        rgba(black, 0.26),
    slider-off-active: rgba(black, 0.38)
);

$theme: (
    primary: mat-palette($mat-blue, 600),
    accent: mat-palette($mat-teal),
    warn: mat-palette($mat-red),
    is-dark: false,
    foreground: $foreground,
    background: $background,
    details: $background
);

// You can use a single theme configuration for all material components
// @include angular-material-theme($theme);
// @include angular-material-typography($typography);

// Or setup them separately, in this case don't forget to
// include themes for all components which your app uses
@include mat-core-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-toolbar-typography($theme);

As you see, $theme and $typography are just objects where colors and other properties of the theme are stored. There are several pre-configured setups in _theme.scss like $mat-dark-theme-foreground object or mat-light-theme() function.

At the bottom of src/theme.scss file mat-toolbar theme and typography are configured. You can use a single theme for all components or different ones if it's required. Don't forget to include themes for all components you use.

Regarding other properties like border-width for example, as I know there's no a build-in way to configure them except override a style. For example if you want to increase a checkbox border width:

.mat-checkbox-frame {
  border-width: 3px !important;
}

This file src/theme.scss should be imported in you styles.scss file, or you can add it to styles section of your angular.json.

// src/styles.scss
@import 'theme.scss';
...