66 lines
1.9 KiB
SCSS
66 lines
1.9 KiB
SCSS
// define a real custom palette (using http://mcg.mbitson.com)
|
|
$openslides-blue: (
|
|
50: #e6eff2,
|
|
100: #c1d6e0,
|
|
200: #98bbcb,
|
|
300: #6fa0b6,
|
|
400: #508ba6,
|
|
500: #317796,
|
|
600: #2c6f8e,
|
|
700: #002a42,
|
|
800: #00253c,
|
|
900: #001f33,
|
|
A100: #9fd7ff,
|
|
A200: #6cc2ff,
|
|
A400: #39acff,
|
|
A700: #1fa2ff,
|
|
contrast: (
|
|
50: #ffffff,
|
|
100: #ffffff,
|
|
200: #ffffff,
|
|
300: #ffffff,
|
|
400: #ffffff,
|
|
500: #ffffff,
|
|
600: #ffffff,
|
|
700: #ffffff,
|
|
800: #ffffff,
|
|
900: #ffffff,
|
|
A100: #000000,
|
|
A200: #000000,
|
|
A400: #000000,
|
|
A700: #000000
|
|
)
|
|
);
|
|
|
|
// Generate paletes using: https://material.io/design/color/
|
|
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
|
|
$openslides-primary: mat-palette($openslides-blue);
|
|
|
|
$openslides-accent: mat-palette($mat-light-blue);
|
|
|
|
$openslides-warn: mat-palette($mat-red);
|
|
|
|
// Create the theme object (a Sass map containing all of the palettes).
|
|
$openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
|
|
|
|
// Create Sass color vars (for using in scss files).
|
|
// This will be set dynamically with the selecting theme
|
|
// $os-primary: mat-color($openslides-primary);
|
|
// $os-accent: mat-color($openslides-accent);
|
|
// $os-warn: mat-color($openslides-warn);
|
|
|
|
$os-outline: mat-color($mat-grey, 300);
|
|
$os-background: mat-color($mat-grey, 100);
|
|
|
|
/** This is the workaround to set a custom background-color
|
|
* In the first step the color must be merged, in order to have to a map.
|
|
* The components will get a value from this map.
|
|
*/
|
|
$background: map-get($openslides-theme, background);
|
|
$background: map_merge($background, (background: $os-background));
|
|
|
|
/**
|
|
* Merge the theme with the custom-background.
|
|
*/
|
|
$openslides-theme: map_merge($openslides-theme, (background: $background));
|