Skip to content

akryvomaz/jss-angular-material

Repository files navigation

JSS Material Design styles for Angular

Build Status npm version

This is the copy of Angular Material style theme based on JSS.

More information about Angular Material theme.

Supported Angular Material version - 5.2.4.

Features

  • Dynamic Angular Material styles.
  • Access to Angular Material styles from JS.
  • Overriding default Angular Material styles.

Installation

npm install -S jss-angular-material

Example

import { NgModule } from '@angular/core';
import { StyleSheet } from 'jss';
import { Observable } from 'rxjs/Observable';

import {
    createMaterialCoreStyles,
    createMaterialThemeStyles,
    matPalette,
    matLightTheme,
    Palette,
    Theme,

} from 'jss-angular-material';

@NgModule({})
export class JssModule {
    constructor() {
        const typographyConfig: TypographyConfig = null; // use the default typography config
        const coreOverrides: Object = {}; // do not override any core styles (optional parameter)
        const dynamicCoreStyles = false; // static core styles

        // create Angular Material core css from provided config and attach it to the head of document
        createMaterialCoreStyles(typographyConfig, coreOverrides, dynamicCoreStyles).attach();

        // https://material.io/guidelines/style/color.html#color-color-palette
        const primary: Palette = matPalette(primaryPalette, 500, 100, 900);
        const accent: Palette = matPalette(accentPalette, 500, 100, 900);
        const warn: Palette = matPalette(warnPalette, 500, 100, 900);

        const theme: Theme = matLightTheme(primary, accent, warn);

        const stream$ = Observable.create(observer => observer.next('red'));

        // Angular Material styles to override.
        const themeOverrides: Object = {
            '.mat-snack-bar-container': stream$,
            '.mat-toolbar': {
                background: 'green'
            }
        };

        // to support rxjs observables, styles have to be dynamic
        const dynamicThemeStyles: boolean = true;

        // create Angular Material theme css from provided config and attach it to the head of document
        createMaterialThemeStyles(theme, themeOverrides, dynamicThemeStyles).attach();
    }
}

const primaryPalette: Palette = {
    50: '#E3F2FD',
    100: '#BBDEFB',
    200: '#90CAF9',
    300: '#64B5F6',
    400: '#42A5F5',
    500: '#2196F3',
    600: '#1E88E5',
    700: '#1976D2',
    800: '#1565C0',
    900: '#0D47A1',
    contrast: {
        50: '#E3F2FD',
        100: '#BBDEFB',
        200: '#90CAF9',
        300: '#64B5F6',
        400: '#42A5F5',
        500: '#2196F3',
        600: '#1E88E5',
        700: '#1976D2',
        800: '#1565C0',
        900: '#0D47A1'
    }
};

const accentPalette: Palette = {
    50: '#FAFAFA',
    100: '#F5F5F5',
    200: '#EEEEEE',
    300: '#E0E0E0',
    400: '#BDBDBD',
    500: '#9E9E9E',
    600: '#757575',
    700: '#616161',
    800: '#424242',
    900: '#212121',
    contrast: {
        50: '#FAFAFA',
        100: '#F5F5F5',
        200: '#EEEEEE',
        300: '#E0E0E0',
        400: '#BDBDBD',
        500: '#9E9E9E',
        600: '#757575',
        700: '#616161',
        800: '#424242',
        900: '#212121'
    }
};

const warnPalette: Palette = {
    50: '#FFEBEE',
    100: '#FFCDD2',
    200: '#EF9A9A',
    300: '#E57373',
    400: '#EF5350',
    500: '#F44336',
    600: '#E53935',
    700: '#D32F2F',
    800: '#C62828',
    900: '#B71C1C',
    contrast: {
        50: '#FFEBEE',
        100: '#FFCDD2',
        200: '#EF9A9A',
        300: '#E57373',
        400: '#EF5350',
        500: '#F44336',
        600: '#E53935',
        700: '#D32F2F',
        800: '#C62828',
        900: '#B71C1C'
    }
};

Testing

npm test

License

MIT

About

JSS Material Design styles for Angular

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published