Skip to content
Snippets Groups Projects
_material-theme.scss 2.77 KiB
@import '~@angular/material/theming';
@import './variables/colors';

// Plus imports for other components in your app.

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://www.google.com/design/spec/style/color.html

$vitamui-primary: (
    50: var(--vitamui-primary),
    100: var(--vitamui-primary),
    200: var(--vitamui-primary),
    300: var(--vitamui-primary),
    400: var(--vitamui-primary),
    500: var(--vitamui-primary),
    600: var(--vitamui-primary),
    700: var(--vitamui-primary),
    800: var(--vitamui-primary),
    900: var(--vitamui-primary),
    A100: var(--vitamui-primary),
    A200: var(--vitamui-primary),
    A400: var(--vitamui-primary),
    A700: var(--vitamui-primary),
  contrast: (
    50: $light-primary-text,
    100: $light-primary-text,
    200: $light-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $light-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$vitamui-secondary: (
    50: var(--vitamui-secondary),
    100: var(--vitamui-secondary),
    200: var(--vitamui-secondary),
    300: var(--vitamui-secondary),
    400: var(--vitamui-secondary),
    500: var(--vitamui-secondary),
    600: var(--vitamui-secondary),
    700: var(--vitamui-secondary),
    800: var(--vitamui-secondary),
    900: var(--vitamui-secondary),
    A100: var(--vitamui-secondary),
    A200: var(--vitamui-secondary),
    A400: var(--vitamui-secondary),
    A700: var(--vitamui-secondary),
  contrast: (
    50: $light-primary-text,
    100: $light-primary-text,
    200: $light-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $light-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$app-primary: mat-palette($vitamui-primary);
$app-accent:  mat-palette($vitamui-secondary);

// The warn palette is optional (defaults to red).
$app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);