gns3-web-ui/src/theme.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);
}