cbsnexora/src/theme/_dark_content.scss

@use '@angular/material' as mat;
@use 'sass:map';

@mixin account-view-component-dark-theme($theme) {
  $primary: map.get($theme, primary);

  mifosx-login {
    .login-container {
      background-color: #424242;
      box-shadow: 1px 1px 50px white;
    }

    .cover {
      .cover-content {
        color: white;

        .cover-description {
          .cover-link {
            color: white !important;

            &:hover {
              color: #d3d3d3;
            }
          }
        }
      }
    }
  }

  mifosx-login-form {
    color: white;
  }

  mifosx-view-bulk-import {
    .cover {
      background-color: #424242;
      margin-top: 1%;
    }
  }

  mifosx-clients {
    .status {
      color: white;
    }
  }

  mifosx-clients-view,
  mifosx-fixed-deposit-account-view,
  mifosx-loans-view,
  mifosx-shares-account-view,
  mifosx-recurring-deposits-account-view,
  mifosx-savings-account-view {
    .account-card {
      margin: 0 auto;
      max-width: 80rem;
      width: 90%;
      padding: 0;

      i,
      img:hover {
        cursor: pointer;
      }

      .header {
        background-color: mat.get-color-from-palette($primary, 500);
        padding: 1%;
      }

      .header-title-group {
        .account-card-title {
          color: white;
          width: 90%;
        }

        p {
          color: white;
        }

        .account-overview {
          border: none;
          max-width: 240px;
          font-size: 14px;

          tr:nth-child(even) {
            background-color: transparent !important;
          }
        }
      }

      .profile-image-container {
        margin: 1%;

        .profile-image {
          object-fit: cover;
          border-radius: 20px;
        }

        .signature {
          background-color: mat.get-color-from-palette($primary, 500);
        }
      }

      .account-actions {
        align-self: flex-end;
        margin: 0 1%;

        i {
          margin-bottom: 2px;
          margin-right: 4px;
        }
      }

      .navigation-tabs {
        background-color: #303135;
        color: white;
        overflow: auto;
      }

      .content {
        .savings-account-tables {
          padding: 1%;
          margin: 1%;

          .table-headers {
            margin: 0;
            padding: 6px;
          }

          td {
            padding: 3px;
          }
        }
      }
    }
  }

  fa-icon,
  mat-icon,
  mat-checkbox {
    color: white;
  }
}

body.dark-theme {
  table {
    tbody {
      tr:nth-child(even) {
        background-color: #303135 !important;
      }
    }
  }
}

.dark-theme {
  .sticky {
    background-color: #303135 !important;
  }

  // Override the background color of the label text for dark theme
  .mat-option-text,
  .mat-input-element,
  .mat-form-field-label {
    color: white !important;
  }

  mifosx-popover,
  .mat-menu-content,
  .mat-dialog-container {
    background-color: #303135;
    color: white;
  }

  // Override the background color of the calendar for dark theme
  .mat-calendar,
  .mat-calendar-body-cell,
  .mat-calendar-body-label,
  .mat-calendar-table,
  .mat-list-item.active {
    background-color: #303135;
    border: none;
  }

  .mat-tab-label-active {
    border-bottom: lightgray;
  }

  // Changing the logo color for dark mode
  .img-button,
  .app-user-photo,
  .profile-image {
    filter: invert(100%);
  }

  a:any-link {
    color: #0098ff !important;
  }

  span.breadcrumb-link {
    a {
      color: #0098ff !important;
    }
  }

  div.alert {
    color: #303135;
  }

  a.mat-tab-link,
  a.tab-link {
    color: white !important;
  }

  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow:
      0 5px 5px -3px rgb(0 0 0 / 20%),
      0 8px 10px 1px rgb(0 0 0 / 14%),
      0 3px 14px 2px rgb(0 0 0 / 12%);
    display: table;
    background-color: white;
    color: #303135;
  }

  #footer {
    color: white;

    .mat-checkbox {
      color: white !important;
    }

    .versions {
      color: white !important;
    }

    .business-date {
      color: #0098ff;
    }
  }

  .external-asset-owner-status {
    color: white;
  }
}