RTL/src/app/shared/theme/styles/change-theme.scss

@import "constants";

@mixin change-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $testColor: mat-palette($mat-red, A200);

  .bg-primary {
    @include _mat-toolbar-color($primary);
  }

  .bg-accent {
    @include _mat-toolbar-color($accent);
  }

  .bg-warn {
    @include _mat-toolbar-color($warn);
  }

  .bg-test {
    @include _mat-toolbar-color($testColor);
  }

  .foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
    stroke: mat-color($foreground, text);
  }

  .mat-toolbar-row, 
  .mat-toolbar-single-row {
    height: $toolbar-height;
  }

  .lnd-info{
    border-bottom: 1px solid mat-color($foreground, divider);
  }

  a {
    color: white;
  }

  .active-link {
    background: mat-color($primary); 
    color: white; // mat-color($foreground, text); for dark theme but for light theme the foreground text color is black
  }

  .h-active-link {
    background: mat-color($primary, lighter) !important;
  }
  
  .ngx-charts {
    fill: mat-color($foreground, text);
    .bar {
      fill: mat-color($primary) !important;
      cursor: default;
    }
  }

  .mat-primary .mat-select, .mat-primary .mat-select-trigger, .mat-primary .mat-select-value, .mat-primary .mat-select-arrow {
    // color: white !important;    
  }
  
  .mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
  .mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
    background: none;
    font-weight: 900;
    font-size: 110%;
  }

  .material-icons.primary { color: mat-color($primary); }

  .material-icons.accent { color: mat-color($accent); }

  .validation-error-message {
    position: relative;
    margin-top: 0.5rem;
    width:100%;
    color: mat-color($accent);
  }

  .validation-error-icon {
    font-size: 16px;
    position: relative;
    top: 2px;
    left: 4px;
  }

  .genseed-message {
    width:10%;
    color: mat-color($accent);
    font-size: 120%;
  }

  .insecure-message {
    width:100%;
    color: mat-color($accent);
    font-size: 120%;
  }

  .mat-vertical-content {
    padding: 0 4px 0 12px;
  }

}