cbsnexora/src/theme/_dark_content.scss

/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

@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;

      .img-container {
        max-width: 20rem;
        padding: 0;
        margin: 0;
        content: url('../assets/images/white-mifos.png');
      }

      .logo-section {
        margin: 4rem 0 3rem !important;
      }
    }

    .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-centers-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: 90rem;
      width: 90%;
      padding: 0;

      i,
      img:hover {
        cursor: pointer;
      }

      .header {
        background-color: mat.m2-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.m2-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;
  }

  // Override Material typography heading colors for dark theme
  h2.mat-h2,
  h3.mat-h3,
  h4.mat-h4 {
    color: rgb(255 255 255 / 87%) !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;
    }
  }

  .copy-label {
    color: var(--md-sys-color-on-surface-variant, #c4c6d0);

    p {
      color: white !important;
    }
  }

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

  // Home page logo styling for dark mode
  mifosx-home {
    [src*='mifos_lg-logo.jpg'],
    [src$='_home.png'] {
      content: url('../assets/images/white-mifos.png');
    }
  }

  // Table row hover effect for dark mode
  .mat-mdc-row:hover,
  tr.select-row:hover,
  .select-row:hover {
    background-color: rgb(255 255 255 / 8%) !important;
  }

  // Documents section dark theme styling
  mifosx-entity-documents-tab {
    .document-card {
      background: #2d2d2d;
      border-color: #444;
      box-shadow: 0 1px 4px rgb(0 0 0 / 30%);

      &:hover {
        box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
      }
    }

    .thumb {
      background: #1a1a1a;
    }

    .preview-overlay {
      background: rgb(45 45 45 / 95%);
      color: #0098ff;
    }

    .placeholder {
      color: #b0b0b0;

      fa-icon {
        color: #888;
      }
    }

    .card-body {
      .title {
        color: rgb(255 255 255 / 87%);
      }

      .meta {
        color: #aaa;
      }

      .description {
        color: rgb(255 255 255 / 70%);
      }
    }

    .empty-state {
      background: #2d2d2d;
      border-color: #555;
      color: rgb(255 255 255 / 70%);

      .muted {
        color: #888;
      }
    }
  }

  // Notes section dark theme styling
  mifosx-entity-notes-tab {
    .tab-container {
      h3 {
        color: rgb(255 255 255 / 87%);
      }
    }

    .note-card {
      background-color: #2d2d2d;
      border-color: #444;
      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);

      &:hover {
        box-shadow: 0 4px 8px rgb(0 0 0 / 50%);
        border-color: #555;
      }
    }

    .note-content {
      color: rgb(255 255 255 / 87%);
    }

    .note-footer {
      border-top-color: #444;
    }

    .note-meta {
      color: #aaa;
    }

    .created-by {
      color: #0098ff;
    }

    .created-date {
      color: #bbb;
    }

    .empty-state {
      background-color: #2d2d2d;
      color: rgb(255 255 255 / 70%);
      border-color: #555;
    }
  }

  // Configuration wizard dark theme styling
  mifosx-configuration-wizard {
    .config-wizard-content {
      .description {
        color: white !important;
      }

      .progress-section {
        .progress-label {
          color: white !important;
        }
      }
    }
  }
}