This package contains a shared style sheet to be used by all IODP applications.

To include this style sheet in your application, you must include it in the styles section of the project's angular.json file like so:

"projects": {
    ...
    "architect": {
        "build": {
            ...
            "styles": [
                "src/styles.scss",
                "node_modules/@iodp/iodp-theme/styles.scss"
            ],
            ...
        }
        ...
    }
    ...
}

As this style sheet relies on the @iodp/material-color-constants package, you must also include an app-specific color palette file located at src/app-palette.scss. The contents of this file should look like the following:

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

$mat-primary-palette: $mat-green;

The $mat-green value should be changed to the appropriate pre-defined Angular Matrial palette value (for a list, see https://material.io/design/color/the-color-system.html#tools-for-picking-colors). Alternatively, you can define a custom palette like so:

$mat-primary-palette: (
    50 : #E4EEE9,
    100 : #BCD5C8,
    200 : #90B9A3,
    300 : #649D7E,
    400 : #428862,
    500 : #217346,
    600 : #1D6B3F,
    700 : #186037,
    800 : #14562F,
    900 : #0B4320,
    A100 : #7BFFA5,
    A200 : #48FF83,
    A400 : #15FF60,
    A700 : #00FB50,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);