ngx-admin/src/app/@theme/components/header/header.component.scss

@import '../../styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';

@include nb-install-component() {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .left {
    order: 0;
    flex-direction: row;
  }
  .right {
    order: 1;
    flex-direction: row-reverse;
  }

  .header-container {
    display: flex;
    align-items: center;

    .navigation {
      padding-right: nb-theme(padding);
      font-size: 2.5rem;
    }

    .logo {
      padding: 0 nb-theme(padding);
      font-size: 1.75rem;
      font-weight: nb-theme(font-weight-bolder);
      border-left: 1px solid nb-theme(separator);

      span {
        font-weight: nb-theme(font-weight-normal);
      }
    }

    .theme-switch {
      margin: 0 6rem;
      width: 12rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;

      & > span {
        font-size: 1.125rem;
        font-weight: nb-theme(font-weight-bold);
        transition: opacity 0.3s ease;

        &.light {
          color: nb-theme(color-fg-text);
        }

        &.cosmic {
          color: nb-theme(color-fg);
        }

        @include nb-for-theme(cosmic) {
          &.light {
            color: nb-theme(color-fg);
          }

          &.cosmic {
            color: nb-theme(color-white);
          }
        }

        &:active {
          opacity: 0.78;
        }
      }
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 4rem;
      height: 1.75rem;
      margin: 0;

      input {
        display: none;

        &:checked + .slider::before {
          transform: translateX(2.25rem);
        }
      }

      .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 1.75rem;
        background-color: nb-theme(layout-bg);
      }

      .slider::before {
        position: absolute;
        content: '';
        height: 1.75rem;
        width: 1.75rem;
        border-radius: 50%;
        background-color: nb-theme(color-success);
        transition: 0.2s;

        box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);

        @include nb-for-theme(cosmic) {
          @include btn-hero-primary-gradient();
        }
      }
    }
  }

  .toggle-layout /deep/ a {
    text-decoration: none;
    line-height: 1;

    i {
      color: nb-theme(color-success);
      font-size: 1.75rem;

      @include nb-for-theme(cosmic) {
        color: nb-theme(link-color-active);
        text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
      }
    }
  }
}