@import "../mixins";
.cory-mat-theme-dark-matrix {
$mat-matrix: (
50 : #e0ffe0,
100 : #b3ffb3,
200 : #80ff80,
300 : #4dff4d,
400 : #26ff26,
500 : #00ff00,
600 : #00ff00,
700 : #00ff00,
800 : #00ff00,
900 : #00ff00,
A100 : #ffffff,
A200 : #f2fff2,
A400 : #bfffbf,
A700 : #a6ffa6,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$mat-matrikxlow: (
50 : #e7f9e7,
100 : #c2f0c2,
200 : #99e699,
300 : #70db70,
400 : #52d452,
500 : #33cc33,
600 : #2ec72e,
700 : #27c027,
800 : #20b920,
900 : #14ad14,
A100 : #e0ffe0,
A200 : #adffad,
A400 : #7aff7a,
A700 : #60ff60,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$mat-matrixwarm: (
50 : #f9e0e0,
100 : #f0b3b3,
200 : #e68080,
300 : #db4d4d,
400 : #d42626,
500 : #cc0000,
600 : #c70000,
700 : #c00000,
800 : #b90000,
900 : #ad0000,
A100 : #ffd7d7,
A200 : #ffa4a4,
A400 : #ff7171,
A700 : #ff5858,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$mat-matrixaccent: (
50 : #f9e7f9,
100 : #f0c2f0,
200 : #e699e6,
300 : #db70db,
400 : #d452d4,
500 : #cc33cc,
600 : #c72ec7,
700 : #c027c0,
800 : #b920b9,
900 : #ad14ad,
A100 : #ffe0ff,
A200 : #ffadff,
A400 : #ff7aff,
A700 : #ff60ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$primary: mat-palette($mat-matrix);
$accent: mat-palette($mat-matrikxlow);
$warn: mat-palette($mat-matrixaccent);
$white: map_get($mat-matrix, 500);
$white2: map_get($mat-matrixaccent, 500);
$foreground: (
base: $white, //white,
divider: rgba($white, 0.12), //$white-12-opacity,
dividers: rgba($white, 0.12), //$white-12-opacity,
disabled: rgba($white, 0.8), // rgba(white, 0.3),
disabled-button: rgba($white, 0.3), // rgba(white, 0.3),
disabled-text: rgba($white, 0.3), // rgba(white, 0.3),
hint-text: rgba($white, 0.3), // rgba(white, 0.3),
secondary-text: rgba($white, 0.3), // rgba(white, 0.3),
icon: $white, // white,
icons: $white, // white,
text: $white, // white,
slider-min: white,
slider-off: $white, //rgba(white, 0.3),
slider-off-active: $white, //rgba(white, 0.3),
);
$background: (
status-bar: black,
app-bar: rgba(black, 0.90), //map_get($mat-grey, 900),
background: rgba(black, 0.80), //#303030,
hover: rgba(map_get($mat-matrix, A700), 0.4), //rgba(white, 0.04),
card: rgba(black, 0.80), //map_get($mat-grey, 800),
dialog: rgba(black, 0.80), //map_get($mat-grey, 800),
disabled-button: rgba(map_get($mat-matrix, A700), 0.12), // $white-12-opacity,
raised-button: rgba(black, 0.80), //map-get($mat-grey, 800),
focused-button: rgba(map_get($mat-matrix, A700), 0.06), //$white-6-opacity,
selected-button: rgba(black, 0.90), //map_get($mat-grey, 900),
selected-disabled-button: rgba(black, 0.80), //map_get($mat-grey, 800),
disabled-button-toggle: rgba(black, 1.00), //map_get($mat-grey, 1000),
// unselected-chip: map_get($mat-grey, 700),
// disabled-list-option: black,
unselected-chip: rgba(black, 0.90), // map_get($mat-grey, 300),
disabled-list-option: rgba(black, 0.80), // map_get($mat-grey, 200),
);
$theme_highlight: (
primary: $warn,
accent: $primary,
warn: $accent,
is-dark: true,
foreground: $foreground,
background: $background,
);
$theme: (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $foreground,
background: $background,
);
$theme_reverse: (
primary: $accent,
accent: $primary,
warn: $warn,
is-dark: true,
foreground: $foreground,
background: $background,
);
// @mixin angular-material-theme($theme) {
// this is new again
// @include mat-ripple-theme($theme_reverse);
// @include mat-option-theme($theme_reverse);
// @include mat-optgroup-theme($theme_reverse);
// @include mat-pseudo-checkbox-theme($theme_reverse);
@include mat-autocomplete-theme($theme_reverse);
// card
@include mat-card-theme($theme_reverse);
@include mat-checkbox-theme($theme_reverse);
@include mat-chips-theme($theme_reverse);
@include mat-dialog-theme($theme_reverse);
@include mat-grid-list-theme($theme_reverse);
@include mat-icon-theme($theme_reverse);
@include mat-list-theme($theme_reverse);
@include mat-menu-theme($theme_reverse);
@include mat-radio-theme($theme_reverse);
@include mat-select-theme($theme_reverse);
$background_sidenav: map-merge($background, (
card: white
));
@include mat-sidenav-theme((
primary: $accent,
accent: $primary,
warn: $warn,
is-dark: true,
foreground: $foreground,
background: $background_sidenav,
));
@include mat-slider-theme($theme_reverse);
@include mat-tabs-theme($theme_reverse);
@include mat-tooltip-theme($theme_reverse);
// background: linear-gradient(darken($color, 10%), $color);
@include mat-button-toggle-theme($theme_reverse);
@include mat-input-theme($theme_reverse);
@include mat-slide-toggle-theme($theme_reverse);
@include mat-progress-bar-theme($theme_highlight);
@include mat-progress-spinner-theme($theme_highlight);
@include mat-toolbar-theme($theme_reverse);
//@include mat-button-theme($theme_reverse);
@include mat-expansion-panel-theme($theme);
@include mat-form-field-theme($theme);
@include mat-paginator-theme($theme);
@include mat-stepper-theme($theme);
@include mat-snack-bar-theme($theme_highlight);
@include mat-datepicker-theme($theme_reverse);
@include cory-mat-theme-container(mat-color($primary));
@include cory-mat-theme-toolbar('dark', $theme);
@include cory-mat-theme-button('dark', $theme_reverse);
@include cory-mat-theme-link(map_get($mat-matrixaccent, 500), map_get($mat-matrixaccent, A400));
@include cory-mat-autofill();
background-color: rgba(0, 0, 0, 0.5);
background: radial-gradient(circle, rgba(black, 0.9), rgba(black, 0.8));
// @include cory-mat-theme('dark', $primary, $accent);
}
