mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-01-03 03:26:42 +00:00
135 lines
4.6 KiB
SCSS
135 lines
4.6 KiB
SCSS
@import '~@angular/material/theming';
|
|
@import '~material-design-icons/iconfont/material-icons.css';
|
|
@import '~typeface-roboto/index.css';
|
|
@include mat-core();
|
|
$mat-theme-ignore-duplication-warnings: true;
|
|
|
|
$primary: mat-palette($mat-cyan, 700, 500, 900);
|
|
$accent: mat-palette($mat-blue-grey, A200, A100, A700);
|
|
|
|
// Dark theme
|
|
$dark-theme: mat-dark-theme($primary, $accent);
|
|
$dark-palette: mat-palette($mat-blue-grey, 900, A100, A400);
|
|
$dark-background: mat-dark-theme($dark-palette, $primary);
|
|
|
|
$mat-dark-theme-background: (
|
|
status-bar: black,
|
|
app-bar: map_get($mat-blue-grey, 900),
|
|
background: map_get($mat-blue-grey, 900),
|
|
hover: rgba(white, 0.04),
|
|
card: map_get($mat-blue-grey, 900),
|
|
dialog: map_get($mat-blue-grey, 900),
|
|
disabled-button: $white-12-opacity,
|
|
raised-button: map-get($mat-grey, 800),
|
|
focused-button: $white-6-opacity,
|
|
selected-button: map_get($mat-grey, 900),
|
|
selected-disabled-button: map_get($mat-grey, 800),
|
|
disabled-button-toggle: black,
|
|
unselected-chip: map_get($mat-grey, 700),
|
|
disabled-list-option: black,
|
|
);
|
|
|
|
$dark-theme: map-merge(
|
|
$dark-theme,
|
|
(
|
|
background: $mat-dark-theme-background,
|
|
)
|
|
);
|
|
|
|
.dark-theme {
|
|
@include angular-material-theme($dark-theme);
|
|
@include mat-core-theme($dark-theme);
|
|
@include mat-autocomplete-theme($dark-theme);
|
|
@include mat-button-theme($dark-theme);
|
|
@include mat-button-toggle-theme($dark-theme);
|
|
@include mat-card-theme($dark-theme);
|
|
@include mat-checkbox-theme($dark-theme);
|
|
@include mat-chips-theme($dark-theme);
|
|
@include mat-table-theme($dark-theme);
|
|
@include mat-datepicker-theme($dark-theme);
|
|
@include mat-dialog-theme($dark-theme);
|
|
@include mat-expansion-panel-theme($dark-theme);
|
|
@include mat-form-field-theme($dark-theme);
|
|
@include mat-grid-list-theme($dark-theme);
|
|
@include mat-icon-theme($dark-theme);
|
|
@include mat-input-theme($dark-theme);
|
|
@include mat-list-theme($dark-theme);
|
|
@include mat-menu-theme($dark-theme);
|
|
@include mat-paginator-theme($dark-theme);
|
|
@include mat-progress-bar-theme($dark-theme);
|
|
@include mat-progress-spinner-theme($dark-theme);
|
|
@include mat-radio-theme($dark-theme);
|
|
@include mat-select-theme($dark-theme);
|
|
@include mat-sidenav-theme($dark-theme);
|
|
@include mat-slide-toggle-theme($dark-theme);
|
|
@include mat-slider-theme($dark-theme);
|
|
@include mat-stepper-theme($dark-theme);
|
|
@include mat-tabs-theme($dark-theme);
|
|
@include mat-toolbar-theme($dark-background);
|
|
@include mat-tooltip-theme($dark-theme);
|
|
@include mat-snack-bar-theme($dark-theme);
|
|
color: white !important;
|
|
}
|
|
|
|
// Light theme
|
|
$light-theme: mat-light-theme($primary, $accent);
|
|
$light-palette: mat-palette($mat-blue, 900, A100, A400);
|
|
$light-background: mat-light-theme($light-palette, $primary);
|
|
|
|
$mat-light-theme-background: (
|
|
status-bar: black,
|
|
app-bar: map_get($mat-blue, 900),
|
|
background: white,
|
|
hover: rgba(white, 0.04),
|
|
card: white,
|
|
dialog: white,
|
|
disabled-button: $white-12-opacity,
|
|
raised-button: white,
|
|
focused-button: $white-6-opacity,
|
|
selected-button: map_get($mat-blue, 900),
|
|
selected-disabled-button: map_get($mat-blue, 800),
|
|
disabled-button-toggle: black,
|
|
unselected-chip: map_get($mat-blue, 700),
|
|
disabled-list-option: black,
|
|
);
|
|
|
|
$light-theme: map-merge(
|
|
$light-theme,
|
|
(
|
|
background: $mat-light-theme-background,
|
|
)
|
|
);
|
|
|
|
.light-theme {
|
|
@include mat-core-theme($light-theme);
|
|
@include mat-autocomplete-theme($light-theme);
|
|
@include mat-button-theme($light-theme);
|
|
@include mat-button-toggle-theme($light-theme);
|
|
@include mat-card-theme($light-theme);
|
|
@include mat-checkbox-theme($light-theme);
|
|
@include mat-chips-theme($light-theme);
|
|
@include mat-table-theme($light-theme);
|
|
@include mat-datepicker-theme($light-theme);
|
|
@include mat-dialog-theme($light-theme);
|
|
@include mat-expansion-panel-theme($light-theme);
|
|
@include mat-form-field-theme($light-theme);
|
|
@include mat-grid-list-theme($light-theme);
|
|
@include mat-icon-theme($light-theme);
|
|
@include mat-input-theme($light-theme);
|
|
@include mat-list-theme($light-theme);
|
|
@include mat-menu-theme($light-theme);
|
|
@include mat-paginator-theme($light-theme);
|
|
@include mat-progress-bar-theme($light-theme);
|
|
@include mat-progress-spinner-theme($light-theme);
|
|
@include mat-radio-theme($light-theme);
|
|
@include mat-select-theme($light-theme);
|
|
@include mat-sidenav-theme($light-theme);
|
|
@include mat-slide-toggle-theme($light-theme);
|
|
@include mat-slider-theme($light-theme);
|
|
@include mat-stepper-theme($light-theme);
|
|
@include mat-tabs-theme($light-theme);
|
|
@include mat-toolbar-theme($light-background);
|
|
@include mat-tooltip-theme($light-theme);
|
|
@include mat-snack-bar-theme($light-theme);
|
|
}
|