shhdharmen

@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/typography/typography-utils';


@mixin _mat-toolbar-color($palette) {
  background: mat-color($palette);
  color: mat-color($palette, default-contrast);
}

shhdharmen

// We can use relative imports for imports from the cdk because we bundle everything
// up into a single flat scss file for material.
@import '../../cdk/overlay/overlay';
@import '../../cdk/a11y/a11y';
@import '../../cdk/text-field/text-field';

// Core styles that can be used to apply material design treatments to any element.
@import 'style/elevation';
@import 'ripple/ripple';
@import 'option/option-theme';

shhdharmen

<mat-toolbar [color]="themeColor">
	Toolbar
</mat-toolbar>
<mat-sidenav-container class="example-container">
	<mat-sidenav #sidenav mode="side" opened>
		Sidenav content</mat-sidenav>
	<mat-sidenav-content>
		<ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

shhdharmen

@import '~@angular/material/theming';
@mixin sidenav-component-theme($theme) {
  // retrieve variables from theme 
  // (all possible variables, use only what you really need)
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

shhdharmen

// import custom component themes
// unofficial naming convention to support nice ordering of files in IDE 
// to see theme under the original style file of the component
@import './app/shared/components/sidenav/sidenav.component.scss-theme.scss';
// you only have to add additional components here (instead of in every theme class)
@mixin custom-components-theme($theme) {
    @include sidenav-component-theme($theme);
}

shhdharmen

<h2 mat-dialog-title [attr.color]="data.themeColor">Install Angular</h2>
<mat-dialog-content class="mat-typography">
  <div class="mat-dialog-content-body">
  Your content will go here.
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

shhdharmen

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {

shhdharmen

@import '~@angular/material/theming';
@mixin dialog-component-theme($theme) {
    // retrieve variables from theme 
    // (all possible variables, use only what you really need)
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    .custom-dialog {

shhdharmen

import { Injectable, NgZone } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable({ providedIn: 'root' })
export class NotificationService {
  constructor(
    private readonly snackBar: MatSnackBar,
    private readonly zone: NgZone
  ) { }

shhdharmen

@mixin notification-theme($notifications-theme) {
    $default-color: map-get($notifications-theme, default);
    $info-color: map-get($notifications-theme, info);
    $success-color: map-get($notifications-theme, success);
    $warn-color: map-get($notifications-theme, warning);
    $error-color: map-get($notifications-theme, error);
    .default-notification-overlay,
    .info-notification-overlay,
    .success-notification-overlay,
    .warning-notification-overlay,