command-center/public/css/dark.scss

$dark-bg: #0f0f0f;
$dark-primary: #172236;
$dark-primary-hover: #1f2d47;
$dark-secondary: #1E2D48;
$dark-blue: #3a4b6b;
$dark-blue-hover: #44587c;
$dark-blue-light: #6a7996;
$dark-headtbl: #283957;
$dark-text: #d6dbe4;
$dark-subtext: #959ca8;
$primary: #0049af;
$success: #50cd89;
$info: #7239ea;
$warning: #FEB82F;
$danger: #f1416c;
$secondary: #aaa;

.ant-switch-checked{
    background: $dark-blue !important;
}
.ant-switch-unchecked{
    background:#007bff !important;
}

body.darkMode {
    overflow-x: hidden;

    &.main {
        background: $dark-bg;
    }
}


.darkMode {

  .ant-table-wrapper .ant-table-thead,
  .ant-table-wrapper .ant-table-thead tr {
    background: $dark-blue;
  }
  .ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td {
    background: $dark-blue;
    color: $dark-text;
    border-bottom: 1px solid $dark-blue-light;
  }
  
  .ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover {
    background: $dark-blue;
    color: $dark-text;
  }
  
  .ant-table-wrapper .ant-table-column-sorter-up.active, .ant-table-wrapper .ant-table-column-sorter-down.active {
    color: $dark-text;
  }
  
  .ant-table-wrapper .ant-table-thead th.ant-table-column-sort {
    background: $dark-blue;
    color: $dark-text;
  }

  .ant-table-wrapper .ant-table-tbody >tr >th,
  .ant-table-wrapper .ant-table-tbody >tr >td {
    background: $dark-primary;
    color: #fff;
    border-bottom:1px solid #00000047;
  }
  .ant-table-cell-row-hover {
    background: $dark-bg !important;
  }

    .content{
        background: #0c111c !important;
    }
    .bg-nav {
      filter: brightness(18%);
    }
    .navbar {
        background: transparent;
        // backdrop-filter: blur(6px);
        // box-shadow: 0px 0px 27px $dark-bg;

        &.navScroll {
            background: #00000030;
            box-shadow: 0px 0px 27px #74747430;
            transition: .3s ease-in-out;
            
            .nav-logo .titleText,
            .nav-logo .version {
                color: #fff;
            }
            .nav-account .container-account .account .text .name,
            .nav-account .container-account .account .text .role {
              color: $dark-text;
            }
            .ant-menu-submenu-horizontal {
                .ant-menu-submenu-title {
                  display: flex !important;
                  justify-content: start !important;
                  align-items: center !important;
                
                  .ant-menu-title-content a {
                    font-size: 12px;
                    color: #fff;
                  }
                  .ant-menu-item-icon svg {
                    width: 16px;
                    fill: #fff;
                  }
                }
              
                &.ant-menu-submenu-open,
                &.ant-menu-submenu-active {
                  .ant-menu-title-content a {
                    font-size: 12px;
                    color: #E7FF56;
                  }
                  .ant-menu-item-icon svg {
                    width: 16px;
                    fill: #E7FF56;
                  }
                }
            }
        }
        .btnNotif {
            background: $dark-blue;
        }
        .ant-menu-overflow-item.ant-menu-item {
          background : transparent !important;
        }
    }
    .ant-drawer-content {
        background: $dark-bg !important;
    }
    .ant-drawer-header-title {
        border-bottom: 1px solid $dark-blue;
        
        .ant-drawer-close svg {
            fill: $dark-text;
        }
        .ant-drawer-title {
          color: $dark-text;
        }
    }
    .ant-drawer-body {
        ul.navNotif {
          li {
            .date {
              span {
                background: $dark-bg;
              }
            }
        
            .notification {
              &.notif-unread {
                border: #446fc0;
                background: #354a72;
        
                .icon {
                  background: #446fc0;
                }
                .title,
                .subtitle {
                  color: $dark-text;
                }
              }
              &.notif-read {
                border: 1px solid #949aa3;
                background: #49515f;
        
                .icon {
                  background: #949aa3;
                }
                .title,
                .subtitle {
                  color: $dark-text;
                }
              }
        
              .containerIcon {
                position: relative;
                width: 15%;
              }
              .desc {
                position: relative;
                width: 85%;
              }
        
              .icon {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                width: 40px !important;
                height: 40px !important;
                border-radius: 12px;
                font-size: 22px;
                color: #fff;
              }    
              .title {
                font-size: 14px;
                font-weight: 600;
              }  
              .subtitle {
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
    }
    .menuOutline {
        color: $dark-text;
    }
    .titleText {
        color: $dark-text;
    }
    .navbar .nav-logo .version {
        color: #fff;
    }
    .toggle-icon {
        background: $dark-blue;
    }
    // .navbar .nav-logo {
    //     background: $dark-secondary;
    // }
    // .navbar .nav-logo img {
    //     filter: brightness(0) invert(1);
    // }
    .navbar .nav-title {
        background: $dark-blue;
    }
    .navbar .nav-title .title {
        color: $dark-text;
    }
    .navbar .nav-title .title::after {
        background: $dark-text;
    }
    .navbar .nav-title .sub-title {
        color: $dark-subtext;
    }
    .nav-account,
    .nav-account .container-account .account {
        background: $dark-secondary;
    }
    .nav-account .detail-account .header .text .name,
    .nav-account .container-account .account .text .name {
        color: $dark-text;
    }

    .nav-account .detail-account .header .text .role,
    .nav-account .container-account .account .text .role {
        color: $dark-subtext;
    }

    .nav-account .container-account .second-account i,
    .nav-account .container-account .account i,
    .nav-account .detail-account .header i {
        font-size: 28px;
        color: var(--dark-grey);
    }
    .userOutline {
        background: $dark-blue !important;
        color: $dark-text;
    }

    .nav-account .detail-account {
        background: $dark-secondary;
        box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    }
    .nav-account .detail-account .header::after {
        background: $dark-blue;
    }
    .nav-account .detail-account button {
        color: $dark-text;
    }
    .nav-account .detail-account button:hover {
        background: $dark-blue;
        color: $dark-subtext;
        transition: all 0.2s ease;
    }
    .containerSignOut {
      
        &::before {
          background: $dark-blue;
        }  
    }

    .btnMenuHide {
      background: #ffffff30;
      color: #fff;
    }
    .menuInline {
      position: absolute;
      top: 0;
      left: 0;
      width: 280px;
      height: 100vh;
      background: #172236cb;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      box-shadow: 0px 0px 27px #49494930;
      z-index: 999999;
      transition: .4s;
    
      &.out {
        transform: translateX(-120%);
        transition: .4s;
      }
    }
    
    .backdropMenu {
      background: #17223680;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .sidebar {
        background: $dark-primary;
        border: 1px solid $dark-secondary;
    }
    .sidebar .bg-sidebar {
       display: none;
    }
    .sidebar .nav-links .nav-icon svg {
        fill: $dark-text !important;
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
    }
      
    .sidebar.close .nav-links .nav-menu.active i {
        background: $dark-blue;
        color: $dark-subtext;
    }
      
    // .sidebar.close:hover .nav-links .nav-menu.active,
    // .sidebar .nav-links .nav-menu.active {
    //     background: $dark-blue;
    // }
      
    .sidebar .nav-links .nav-menu i.arrow {
        color: $dark-blue;
    }
    .sidebar.close:hover .nav-links li a .link_name,
    .sidebar .nav-links li a .link_name,
    .sidebar.close:hover .nav-links li .list-link-head .link_name,
    .sidebar .nav-links li .list-link-head .link_name {
        color: $dark-text !important;
    }
    .sidebar .nav-links .nav-menu .submenu .submenu-link a {
        color: $dark-subtext;
    }
      
    .sidebar .nav-links .nav-menu .submenu .submenu-link.active {
        background: $dark-blue;
    }
      
    .sidebar .nav-links .nav-menu .submenu .submenu-link a::before {
        background: $dark-blue;
    }
    .sidebar .nav-links .nav-menu .submenu .submenu-link.active a::before {
        background: $dark-text;
    }
    .submenu-level3 {
        ::before {
          transition: all 0.2s ease;
        }
        a {
          color: $dark-text;
        }
      
    }

    .floating-label {
        background: $dark-primary;
        color: $dark-text;
    }

    .form-control {
        color: $dark-text;
        background-color: $dark-primary;
        border: 2px solid $dark-blue;

        &::placeholder {
            color: $dark-text;
        }
    }

    .ant-picker-input input {
        color: $dark-text;

        &::placeholder {
            color: $dark-text;
        }
    }

    .dashCard {
        background: $dark-primary !important;
        border: 1px solid $dark-blue !important;
        box-shadow: 2px 10px 30px rgba(221, 221, 221, 0) !important;
    }

    .roomsCard,
    .card-table {
      background: $dark-primary !important;
      box-shadow: 2px 10px 30px rgba(24, 24, 24, 0.2) !important;
    }

    .cards {
        background: $dark-primary !important;
        border: 1px solid $dark-primary !important;
        box-shadow: 2px 10px 30px rgba(24, 24, 24, 0.2) !important;
    }

    .card {
        background: $dark-primary !important;
        border: 1px solid $dark-secondary !important;
        box-shadow: 2px 10px 30px rgba(221, 221, 221, 0) !important;
    }

    .cardDark {
        background: $dark-primary;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;

        .text-primary {
            color: $dark-text !important;
        }
        .text-muted {
            color: $dark-subtext !important;
        }
        .separator {
            border-color: $dark-blue-hover;
        }
    }
    .card-footer {
        background: $dark-primary !important;
        border-top: 1px solid $dark-blue-hover !important;
        border-bottom-left-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
    }

    .wave
    .wave:before,
    .wave:after {
        background-color: $dark-primary;
    }
    .wave.wave-danger {
        background-color: rgba(17, 25, 40, 1) !important;
    }

    h1, h2, h3, h4, h5, h6, a {
        color: $dark-text;
    }

    .text-primary,
    .text-dark,
    .text-dark-grey,
    .text-danger {
        color: $dark-text !important;
    }
    .text-muted {
        color: $dark-subtext !important;
    }

    .rdt_Table,
    .rdt_TableHead {
        background: $dark-primary;
        border-radius: 24px;

        .sc-hmdomO {
            background: $dark-headtbl;
            border-radius: 12px !important;
            color: $dark-text;
        }
    }
    
    // bg head tbl
    .rdt_TableHeadRow {
      background: $dark-headtbl !important;
    
      // color head
      .sc-cwHptR {
          color: $dark-text !important;
      }
    }

    .rdt_TableRow {
        background: $dark-primary;
        border-bottom: 1px solid $dark-blue !important;
    }
      
    .rdt_TableRow:hover {
        border: none;
        outline: none;
        background-color: $dark-primary-hover !important;
    }

    .rdt_TableCell {
        color: $dark-text !important;
    }

    .rdt_Pagination {
        background: $dark-primary;
        border-radius: 20px;
        margin-top: .5rem;
        color: $dark-text;

        select {
            border: 1px solid $dark-blue;
            outline: none;
            border-radius: 10px;

            option {
                background: $dark-blue;
                color: $dark-text;
            }
        }

        .fimDOL button svg {
            fill: $dark-text !important;
        }
    }

    .btn-danger {
        background: $dark-blue !important;
        border: 1px solid $dark-primary !important;
        color: $dark-text !important;

        svg {
            fill: $dark-text !important;
        }
    }
    .btn-light-primary,
    .btn-light-danger {
        background: $dark-blue-light !important;
        border: 1px solid $dark-primary !important;
        color: $dark-text !important;

        svg {
            fill: $dark-text !important;
        }
    }

    .ant-dropdown-menu,
    .ant-dropdown-arrow::before,
    .ant-dropdown-arrow::after {
        background: $dark-blue;
    }

    .ant-dropdown-menu-item {

        &:hover {
            background: $dark-blue-hover !important;
        }

        .dropdown-item {
            color: $dark-text !important;

            svg {
                fill: $dark-text !important;
            }
        }
    }

    .searchInput {
        background-color: $dark-blue !important;
        border: 1px solid $dark-blue;
    }
      
    .searchInput:focus {
        background-color: $dark-blue !important;
    }

    .icon-search svg {
        color: $dark-text !important;
    }

    .ant-select-disabled {
        background: $dark-primary;
        border: 0;
      
        .ant-select-selector {
            background: $dark-primary !important;
            color: $dark-text !important;
        }
    }

    .ant-select-selector,
    .ant-select-selection-item,
    .ant-select-selection-placeholder {
        background: $dark-primary !important;
        color: $dark-text !important;
    }

    .ant-select-arrow svg,
    .ant-select-clear svg {
        color: $dark-text !important;
    }

    .ant-select-dropdown {
        background: $dark-blue;

        .ant-select-item-option-content {
            color: $dark-text;
        }

        .ant-select-item-option-active {
            background: $dark-blue-hover;
        }
    }
    
    .ant-menu-item-selected {
        background: $dark-blue-hover !important;
    }

    .ant-menu-sub {
        background: $dark-blue !important;
    }
      
    .ant-menu-submenu-vertical {
        .ant-menu-submenu-title {
          display: flex !important;
          justify-content: start !important;
          align-items: center !important;
        
          .ant-menu-title-content a {
            font-size: 12px;
            color: $dark-text;
          }
          .ant-menu-item-icon svg {
            width: 16px;
            fill: $dark-text;
          }
      
          i {
            color: $dark-text !important;
          }
        }
    }

    .ant-menu-inline {
      .ant-menu-item {
        .ant-menu-title-content a {
          font-size: 12px;
          color: #fff;
        }
        .ant-menu-item-icon svg {
          width: 16px;
          fill: #fff;
        }
      }
      .ant-menu-submenu-inline {
        .ant-menu-title-content a {
          font-size: 12px;
          color: #fff;
        }
        .ant-menu-item-icon svg {
          width: 16px;
          fill: #fff;
        }
      }
      .ant-menu-sub {
        background: #172236cb !important;
      }
    }
      
      
    .ant-menu-item {
        display: flex !important;
        justify-content: start !important;
        align-items: center !important;
      
        .ant-menu-title-content {
          font-size: 12px;
          color: $dark-text;
        }
        .ant-menu-item-icon svg {
          width: 16px;
          fill: $dark-text;
        }
    }

    section {
        background: $dark-primary !important;
        box-shadow: 2px 10px 30px rgba(59, 62, 107, 0.473) !important;
    }

    .bg-primary {
        background: #1788df !important;
    }
    .bg-success {
        background: #10bb82 !important;
    }
    .bg-warning {
        background: #e2a52a !important;
    }
    .bg-danger {
        background: #d83b62 !important;
    }
    .bg-secondary {
        background: #9b9b9b !important;
    }

    .btn-light-primary,
    .btn-secondary {
        background: $dark-blue !important;
        color: $dark-text !important;
        border: 1px solid $dark-blue !important;
        transition: .3s !important;

        &:hover {
            background: $dark-blue !important;
            color: $dark-text !important;
            border: 1px solid $dark-blue-light !important;
            transition: .3s !important;
        }
    }

    .containers,
    .dashboard {
      
        .headContent {
            background: #0c111c !important;

            .containerTitle {
              background: #0c111c !important;
            }

            &::after {
              background: $dark-blue;
            }

            .headTitle {
                .content {
                  .title {
                    color: $dark-subtext;
                  }
                  .title::after {
                    background: $dark-subtext;
                  }
                  .sub-title {
                    color: $dark-subtext;
                  }
                }
                .title-text {
                  color: $dark-text;
                }
              }
        }

        .headCard {
            border-bottom: 1px solid $dark-blue !important;
        }
      
        .bodyContent {

            .containerTitle {
                border-bottom: 1px solid $dark-blue;

                .container {
                    margin-top: -38px;
                    border-top: 1px solid $dark-blue-hover;
                    border-right: 1px solid $dark-blue-hover;
                    border-left: 1px solid $dark-blue-hover;
                    background: $dark-primary;
          
                    .title {
                        background: $dark-primary;
                        color: $dark-text;
                    }
                }
          
                .subtitle {
                  font-size: 12px;
                  font-weight: 300;
                  line-height: 18px;
                  margin-top: 8px;
                  margin-bottom: 2rem;
                  text-align: center;
                }
          
                .action {
                  position: relative;
                  display: flex;
                  justify-content: end;
                  align-items: center;
                  width: 210px;
                }
              }
          
          .header {
      
            ul {
      
              li {
                background: $dark-blue;
                color: $dark-text;
              }
            }
      
          }
      
          .content {
            background: $dark-blue;
      
            .title span {
              color: $dark-text;
            }
            .date {
              color: $dark-text;
            }
            .action {
                color: $dark-text;
        
                svg {
                  fill: $dark-text
                }
            }
          }
      
        }
    }

    .containerList {
    
        .contentList {
          border: 1px solid $dark-blue-hover !important;
    
          .name {
    
            .text {
    
              a {
                color: $dark-text !important;
    
                &:hover {
                  color: #eeeeee !important;
                }
              }
            }
          }
    
          .text {
            color: $dark-text !important;
          }
          .subtext {
            color: $dark-subtext !important;
          }

          .ant-progress-text {
            color: $dark-text !important;
          }
        }
    }

    .containerEmployee {
      .titleList {
        color: $dark-text !important;
        background: $dark-blue !important;
      }
      .employeeList {
        .contentList {
          border-bottom: 1px solid $dark-blue !important;
          color: $dark-text !important;
    
          .jamMasuk {
            svg {
              color: $dark-text !important;
            }
          }
          .jamPulang {
  
            svg {
              color: $dark-text !important;
            }
          }
        }
      }
    }
      
    .contentDetail {
        background: $dark-blue;
      
        .icon {
          background: $dark-primary-hover;
          img {
            filter: invert(1)
          }
        }
      
        .title,
        .subtitle {
          color: $dark-text;
        }
    }

    .containerTimeline {
      
      &::after {
        background-color: $dark-secondary;
      }

      .cards {
        background: $dark-blue !important;
      }
      
      .tlContent {
        .containers {
          .highlight {
            box-shadow: 2px 10px 30px rgba(27, 27, 27, 0.2);
    
            .count {
              color: #f2f2f2;
    
              &::after {
                background: #f2f2f2;
              }
            }
            .time {
              span {
                color: #f2f2f2;
              }
            }
  
            .btnDetail {
              color: #f2f2f2;
              background: #ffffff35;
              backdrop-filter: blur(4px);
  
              &:hover {
                backdrop-filter: blur(12px);
                box-shadow: 2px 10px 30px rgba(80, 80, 80, 0.2);
              }
            }
          }
          .text {
            .title,
            .desc {
              color: $dark-text;
            }
          }
        }
  
        .containerImg {
  
          &::-webkit-scrollbar {
            height: 2px;
          }
          
          &::-webkit-scrollbar-thumb {
            background: $dark-primary;
            border: none;
          }
          
          &::-webkit-scrollbar-track {
            background: $dark-primary-hover;
          }
        }
    
        &:nth-child(odd),
        &:nth-child(even) {
            .cards::after {
              background: $dark-blue;
            }
        }
  
        &:nth-child(even)::before,
        &:nth-child(odd)::before {
          background: $dark-secondary;
        }
        &:nth-child(even)::after,
        &:nth-child(odd)::after {
          background-color: $dark-blue-light;
          border: 4px solid $dark-secondary;
        }
      } 
    }

    .rooms {
      .bodyContentRooms {
        .headCardRooms {
          .titleRooms {
            color: $dark-text;
          }
          .subtitleRooms {
            color: $dark-text;
          }
        }

        .containerDescRooms {
          .containerBrg {
            .barang {
              background: $dark-blue;
              .iconBrg {
                background: $dark-primary;

                img {
                  filter: brightness(0) invert(1);
                }
              }
              .namaBrg {
                color: $dark-text;
              }
            }
          }
        }
      }
    }

    .ant-row.paginate {
      background: $dark-blue;
      padding: 4px 12px;

      li, button, a, span, 
      .ant-pagination-item-ellipsis {
        color: $dark-text;
      }

      .ant-pagination-item-active {
        background: $dark-blue-light;
        border: 1px solid $dark-text;
        border-radius: 10px;
      }
    }

    .containerCard {
      background: $dark-blue;
      .description {
          .code,
          .desc,
          .name {
              color: $dark-text;
          }
      }
  
      .result {
          .date,
          .hasil,
          .descHasil {
            color: $dark-text;
          }
      }
  }
}

@media screen and (max-width: 640px) {
  .darkMode {
    .nav-account,
    .nav-account .container-account .account {
        background: transparent;
    }
  }
}