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

@import "constants";

@mixin change-theme($theme, $alternate-theme) {
  $primary: map-get($theme, primary);
  $primary-lighter: mat-color(mat-palette($primary, lighter));
  $primary-darker: mat-color(mat-palette($primary, darker));
  $primary-node-toolbar : mat-color(mat-palette($primary, A700));
  $accent: map-get($theme, accent);
  $accent-color: mat-color(mat-palette($accent));
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $foreground-color: mat-color($foreground, text);
  $background: map-get($theme, background);
  $alternate-primary: map-get($alternate-theme, primary);

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

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

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

  .btn-primary-darker {
    background-color: $primary-darker;
    color: $accent-color;
    border-radius: 1.6rem;
    text-transform: capitalize;
  }

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

  .toolbar-dropdown-menu {
    @include _mat-toolbar-color($alternate-primary);
  }

  &.night {
    .selected-color {
      border-color: $primary-lighter;
    }
  }
  &.day {
    .ng-fa-icon, .mat-nested-tree-node-parent .mat-icon {
      color: rgba(0, 0, 0, 0.6);
    }
    .selected-color {
      border-color: $primary-darker;
    }
  }
  
  &.small-font {
    .mr-4 {
      margin-right: 1rem !important;
    }
    .mat-menu-item, .mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
      min-height: $tree-node-height * 0.7;
      height: $tree-node-height * 0.7;
    }
    .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) {
      font-size: 1.2rem * 1.1;
    }
    .validation-error-icon {
      font-size: 1.2rem * 1.2;
    }
    .genseed-message {
      font-size: 1.2rem * 1.2;
    }
    .insecure-message {
      font-size: 1.2rem * 1.2;
    }
    .page-title {
      font-size: 1.2rem * 1.1;
      & .page-title-img {
        width: 2rem; 
        height: 2rem; 
        font-size: 1.6rem * 1.1;
      }
    }
    .fa-icon-small, .top-icon-small {
      font-size: 1.4rem;
    }
    .mat-icon-button .top-toolbar-icon.icon-pinned {
      padding-top: 1rem;
    }
    .top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
      width: 2rem; 
      height: 2rem;
      font-size: 1.5rem;
    }
    .horizontal-button .sidenav-img svg {
      width: 2.5rem; 
      height: 2.5rem;
      font-size: 2.2rem;
    }
  }
  &.regular-font {
    .inner-sidenav-content {
      padding-top: 1.5rem;
    }
    .mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
      height: $tree-node-height;
    }
    .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) {
      font-size: 1.4rem * 1.1;
    }
    .validation-error-icon {
      font-size: 1.4rem * 1.2;
    }
    .genseed-message {
      font-size: 1.4rem * 1.2;
    }
    .insecure-message {
      font-size: 1.4rem * 1.2;
    }
    .page-title {
      font-size: 1.4rem * 1.1;
      & .page-title-img {
        width: 2rem; 
        height: 2rem; 
        font-size: 1.6rem * 1.1;
      }
    }
    .mat-button .mat-icon-button .top-toolbar-icon.icon-pinned {
      font-size: 1.4rem;
    }
    .fa-icon-small, .top-icon-small {
      font-size: 1.8rem;
    }
    .top-toolbar-icon.icon-pinned {
      font-size: 1.8rem;
    }
    .top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
      width: 2.5rem; 
      height: 2.5rem;
      font-size: 1.8rem;
    }
    .horizontal-button .sidenav-img svg {
      width: 3rem; 
      height: 3rem;
      font-size: 2.5rem;
    }
  }
  &.large-font {
    .mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
      height: $tree-node-height;
    }
    .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) {
      font-size: 1.6rem * 1.1;
    }
    .validation-error-icon {
      font-size: 1.6rem * 1.2;
    }
    .genseed-message {
      font-size: 1.6rem * 1.2;
    }
    .insecure-message {
      font-size: 1.6rem * 1.2;
    }
    .page-title {
      margin-top: 0.5rem;
      font-size: 1.6rem * 1.1;
      & .page-title-img {
        width: 3rem; 
        height: 3rem; 
        font-size: 2.5rem * 1.1;
      }
    }
    .fa-icon-small, .top-icon-small {
      font-size: 2.2rem;
    }
    .top-toolbar-icon.icon-pinned {
      font-size: 2rem;
    }
    .top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
      width: 3rem; 
      height: 3rem;
      font-size: 2rem;
    }
    .horizontal-button .sidenav-img svg {
      width: 3.5rem; 
      height: 3.5rem;
      font-size: 3rem;
    }
  }

  .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: mat-color($primary);
  }

  .active-link, .active-link .fa-icon-small {
    color: mat-color($primary); 
    font-weight: 500;
    cursor: pointer;
    fill: mat-color($primary); 
  }

  .mat-tree-node:hover, .mat-nested-tree-node-parent:hover  {
    color: mat-color($primary); 
    cursor: pointer;
    background: rgba(0, 0, 0, 0.04);
    & .ng-fa-icon, & .mat-icon {
      color: mat-color($primary);
    }
    & .sidenav-img svg {
      fill: mat-color($primary);
    }
  }

  .mat-tree-node .sidenav-img, .mat-nested-tree-node .sidenav-img, .mat-nested-tree-node-parent .sidenav-img,
  .page-title .page-title-img, .horizontal-button .sidenav-img svg, svg.top-icon-small {
    fill:  $foreground-color;
  }

  .h-active-link {
    border-bottom: 2px solid mat-color($accent);
  }
  
  .ngx-charts {
    fill: mat-color($foreground, text);
    .bar {
      fill: mat-color($primary) !important;
      cursor: default;
    }
  }

  .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;
  }

  .validation-error-icon {
    position: relative;
    top: 2px;
    left: 0.4rem;
  }

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

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

  .page-title {
    color: mat-color($foreground);
  }

  .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);
  }

  .mat-vertical-content {
    padding: 0 0.4rem 0 1.2rem;
  }

  .row-disabled {
    background-color: gray;
    .mat-icon {
      cursor: not-allowed;
    }
  }

  .mat-menu-panel {
    min-width: 6.4rem;
  }
  
  .horizontal-button {
    height: $toolbar-height;
    border-radius: 0;
    &:hover {
      background: mat-color($primary, darker);
      color: mat-color($accent);
    }
  }

  .horizontal-button-show {
    color: mat-color($accent);
    background: mat-color($primary, lighter);
    border-radius: 12rem;
    &:hover {
      background: mat-color($accent);
      color: mat-color($primary, darker);
    }
  }

}