@if $enable-dark-mode {
  @include color-mode(dark, true) { 
  @each $color, $value in $dark-grays-rgb {
    --#{$prefix}gray-#{$color}-rgb: #{$value} ;
  }    
  @each $color, $value in $theme-dark-colors-rgb {
    --#{$prefix}#{$color}-rgb: #{$value} ;
  }    
  --#{$prefix}dark-rgb: #{to-rgb(map-get($theme-dark-colors, 'dark'))};
  --#{$prefix}light-rgb: #{to-rgb(map-get($theme-dark-colors, 'light'))};

  --#{$prefix}heading-color: #{map-get($dark-grays, '900')};

  // -------- New ---------
  @each $color, $value in $theme-dark-colors {
    --#{$prefix}#{$color}: #{$value};
    /* ------------------------------ Colored Link ------------------------------ */
    --#{$prefix}colored-link-hover-color-#{$color}: #{if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage))};
  }
  @each $color, $value in $dark-grays {
    --#{$prefix}gray-#{$color}: #{$value};
     /* ------------------------------ Colored Link ------------------------------ */
     --#{$prefix}colored-link-hover-color-#{$color}: #{if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage))};
  }
  --#{$prefix}white: #{map-get($dark-grays, 'white')};
  --#{$prefix}black: #{map-get($dark-grays, 'black')};
 

  //--------------------------
  --#{$prefix}body: #{$body-dark};
  --#{$prefix}body-color: #{$body-color-dark};
  --#{$prefix}body-bg: #{$body-bg-dark};
  --#{$prefix}border-color: #{$border-color-dark};

  --#{$prefix}link-color: #{$link-color-dark};
  --#{$prefix}link-hover-color: #{$link-hover-color-dark};

  /* --------------------------------- Shadow --------------------------------- */
  --#{$prefix}box-shadow: #{$box-shadow-dark};
  --#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};
  --#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};
  --#{$prefix}box-shadow-inset: #{$box-shadow-inset-dark};

  /* ---------------------------------- Form ---------------------------------- */
  --#{$prefix}input-bg: #{$input-bg-dark};
  --#{$prefix}input-color: #{$input-color-dark};
  --#{$prefix}input-border-color: #{$input-border-color-dark};
  --#{$prefix}input-focus-border-color: #{$input-focus-border-color-dark};
  --#{$prefix}input-placeholder-color: #{$input-placeholder-color-dark};

  --#{$prefix}form-check-input-border-color: #{$form-check-input-border-color-dark};

  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};

  /* --------------------------------- Navbar --------------------------------- */
  --#{$prefix}bg-navbar-glass: #{$bg-navbar-glass-dark};

  --#{$prefix}navbar-dark-color: #{$navbar-dark-color-dark};
  --#{$prefix}navbar-dark-hover-color: #{$navbar-dark-hover-color-dark};
  --#{$prefix}navbar-dark-active-color: #{$navbar-dark-active-color-dark};
  --#{$prefix}navbar-dark-disabled-color: #{$navbar-dark-disabled-color-dark};
  --#{$prefix}navbar-dark-toggler-border-color: #{$navbar-dark-toggler-border-color-dark};

  --#{$prefix}navbar-light-color: #{$navbar-light-color-dark};
  --#{$prefix}navbar-light-hover-color: #{$navbar-light-hover-color-dark};
  --#{$prefix}navbar-light-active-color: #{$navbar-light-active-color-dark};
  --#{$prefix}navbar-light-disabled-color: #{$navbar-light-disabled-color-dark};
  --#{$prefix}navbar-light-toggler-border-color: #{$navbar-light-toggler-border-color-dark};

  --#{$prefix}navbar-light-brand-color: #{$navbar-light-brand-color-dark};
  --#{$prefix}navbar-light-brand-hover-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-dark-brand-color: #{$navbar-dark-brand-color-dark};
  --#{$prefix}navbar-dark-brand-hover-color: #{$navbar-dark-active-color};

  // --------------------------- nav dropdown ------------------------------------
  --#{$prefix}nav-dropdown-link-hover-bg: #{$nav-dropdown-link-hover-bg-dark} !important;

  /* -------------------------------------------------------------------------- */
  /*                               Navbar Vertical                              */
  /* -------------------------------------------------------------------------- */

  /* --------------------------------- Default -------------------------------- */
  --#{$prefix}navbar-vertical-default-link-color: #{$navbar-vertical-default-link-color-dark};
  --#{$prefix}navbar-vertical-default-link-hover-color: #{$navbar-vertical-default-link-hover-color-dark};
  --#{$prefix}navbar-vertical-default-link-active-color: #{$navbar-vertical-default-link-active-color-dark};
  --#{$prefix}navbar-vertical-default-link-disable-color: #{$navbar-vertical-default-link-disable-color-dark};
  --#{$prefix}navbar-vertical-default-hr-color: #{$navbar-vertical-default-hr-color-dark};
  --#{$prefix}navbar-vertical-default-scrollbar-color: #{$navbar-vertical-default-scrollbar-color-dark};

  /* ----------------------------- Navbar Card ---------------------------- */
  --#{$prefix}navbar-vertical-card-hr-color: #{$navbar-vertical-card-hr-color-dark};
  --#{$prefix}navbar-vertical-card-bg-color: #{$navbar-vertical-card-bg-color-dark};

  /* -------------------------------------------------------------------------- */
  /*                           End Navbar Vertical                              */
  /* -------------------------------------------------------------------------- */

  /* ------------------------------ Reveal Button ----------------------------- */
  --#{$prefix}btn-reveal-color: #{$btn-reveal-color-dark};
  --#{$prefix}btn-reveal-bg: #{$btn-reveal-bg-dark};
  --#{$prefix}btn-reveal-border-color: #{$btn-reveal-border-color-dark};

  /* ------------------------------ Falcon Button ----------------------------- */

  --#{$prefix}btn-falcon-background: #{$btn-falcon-background-dark};
  --#{$prefix}btn-disabled-color: #{$btn-disabled-color-dark};
  --#{$prefix}btn-falcon-box-shadow: #{$btn-falcon-box-shadow-dark};
  --#{$prefix}btn-falcon-hover-box-shadow: #{$btn-falcon-hover-box-shadow-dark};

  --#{$prefix}btn-falcon-default-color: #{$btn-falcon-default-color-dark};
  --#{$prefix}btn-falcon-default-hover-color: #{$btn-falcon-default-hover-color-dark};
  --#{$prefix}btn-falcon-default-active-background: #{$btn-falcon-default-active-background-dark};
  --#{$prefix}btn-falcon-default-active-border: #{$btn-falcon-default-active-border-dark};


  
  @each $color, $value in $theme-dark-colors {

    /* ------------------------------ Falcon button ----------------------------- */

    --#{$prefix}btn-falcon-#{$color}-color: var(--#{$prefix}#{$color});
    --#{$prefix}btn-falcon-#{$color}-hover-color: #{shift-color($value, -17%)};
    --#{$prefix}btn-falcon-#{$color}-active-background: #{shade-color($dark, 40%)};
    --#{$prefix}btn-falcon-#{$color}-active-color: #{shift-color($value, -17%)};

    /* ---------------------------------- Alert --------------------------------- */
    .alert-#{$color}{
      --#{$prefix}alert-bg: #{rgba(shift-color($value, 60%), 0.6)} ;
      --#{$prefix}alert-border-color: #{shift-color($value, -$alert-border-scale)};
      --#{$prefix}alert-color: #{shift-color($value, -$alert-color-scale)};
      --#{$prefix}alert-link-color-#{$color}: #{tint-color($value, 20%)};
    }

    /* ------------------------------- List Group ------------------------------- */
    --#{$prefix}list-group-item-background-#{$color}: #{shift-color($value, -$list-group-item-bg-scale)};
    --#{$prefix}list-group-item-color-#{$color}: #{shift-color($value, -$list-group-item-color-scale)};
      
    /* ---------------------------------- Badge --------------------------------- */
    --#{$prefix}badge-subtle-#{$color}-background-color: #{shift-color($value, 80%)};
    @if $color == 'secondary' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, 6.4%)};
    } @else if $value == 'warning' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, -20%)};
    } @else if $value == 'danger' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, -36%)};
    } @else {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, -36%)};
    }
  }

  --#{$prefix}transparent-50: #{$transparent-50-dark};

  --#{$prefix}code-color: #{$code-color-dark};
  
  /* --------------------------------- Avarar --------------------------------- */
  --#{$prefix}avatar-status-border-color: #{$avatar-status-border-color-dark};
  --#{$prefix}avatar-name-bg: #{$avatar-name-bg-dark};
  --#{$prefix}avatar-button-bg: #{$avatar-button-bg-dark};
  --#{$prefix}avatar-button-hover-bg: #{$avatar-button-hover-bg-dark};
  
  /* ------------------------------ Notification ------------------------------ */
  --#{$prefix}notification-bg: #{$notification-bg-dark};
  --#{$prefix}notification-title-bg: #{$notification-title-bg-dark};
  --#{$prefix}notification-unread-bg: #{$notification-unread-bg-dark};
  --#{$prefix}notification-unread-hover-bg: #{$notification-unread-hover-bg-dark};
  --#{$prefix}notification-indicator-border-color: #{$notification-indicator-border-color-dark};

  /* --------------------------------- Kanban --------------------------------- */
  --#{$prefix}kanban-bg: #{$kanban-bg-dark};
  --#{$prefix}kanban-item-bg: #{$kanban-item-bg-dark};
  --#{$prefix}kanban-item-color: #{$kanban-item-color-dark};
  --#{$prefix}kanban-btn-add-hover-bg: #{$kanban-btn-add-hover-bg-dark};
  --#{$prefix}kanban-draggable-source-dragging-bg: #{$kanban-draggable-source-dragging-bg-dark};
  --#{$prefix}kanban-bg-attachment-bg: #{$kanban-bg-attachment-bg-dark};
  --#{$prefix}kanban-footer-color: #{$kanban-footer-color-dark};
  --#{$prefix}kanban-nav-link-card-details-color: #{$kanban-nav-link-card-details-color-dark};
  --#{$prefix}kanban-nav-link-card-details-hover-bg: #{$kanban-nav-link-card-details-hover-bg-dark};

  /* --------------------------- Gradient Background -------------------------- */
  --#{$prefix}bg-shape-bg: #{$bg-shape-bg-dark};
  --#{$prefix}bg-shape-bg-ltd: #{$bg-shape-bg-ltd-dark};
  --#{$prefix}bg-shape-bg-dtl: #{$bg-shape-bg-dtl-dark};

  --#{$prefix}line-chart-gradient: #{$line-chart-gradient-dark};
  --#{$prefix}card-gradient: #{$card-gradient-dark};
  --#{$prefix}bg-circle-shape: #{$bg-circle-shape-dark};
  --#{$prefix}bg-circle-shape-bg: #{$bg-circle-shape-bg-dark};
  --#{$prefix}modal-shape-header: #{$modal-shape-header-dark};
  --#{$prefix}modal-shape-header-after: #{$modal-shape-header-after-dark};
  --#{$prefix}modal-shape-header-bg: #{$modal-shape-header-bg-dark};

  
  /* ------------------------------ Full Calendar ----------------------------- */
  --fc-button-list-day-cushion: #{$fc-button-list-day-cushion-dark};
  --fc-page-bg-color: #{$fc-page-bg-color-dark};
  --fc-neutral-bg-color: #{$fc-neutral-bg-color-dark};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$prefix}flatpickr-calendar-bg: #{$flatpickr-calendar-bg-dark};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$prefix}leaflet-bar-bg: #{$leaflet-bar-bg-dark};
  --#{$prefix}leaflet-popup-content-wrapper-bg: #{$leaflet-popup-content-wrapper-bg-dark};

  /* --------------------------------- Choices -------------------------------- */
  --#{$prefix}choices-item-has-no-choices-bg: #{$choices-item-has-no-choices-bg-dark};
  --#{$prefix}bg-choices-close-button: #{$bg-choices-close-button-dark};

  /* -------------------------------- Thumbnail ------------------------------- */
  --#{$prefix}thumbnail-bg: #{$thumbnail-bg-dark};

  /* ---------------------------------- Chat ---------------------------------- */
  --#{$prefix}chat-contact-bg: #{$chat-contact-bg-dark};

  /* --------------------------------- Tinymce -------------------------------- */
  --#{$prefix}tinymce-bg: #{$tinymce-bg-dark};

  /* --------------------------------- Swiper --------------------------------- */
  --#{$prefix}swiper-nav-bg: #{$swiper-nav-bg-dark};

  /* --------------------------------- Rater --------------------------------- */
  --#{$prefix}star-rating-bg-image: #{url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==')};


  /* --------------------------------- Wizard --------------------------------- */
  --#{$prefix}theme-wizard-nav-item-circle-bg: #{$theme-wizard-nav-item-circle-bg-dark};

  /* -------------------------------- Card Span ------------------------------- */
  --#{$prefix}card-span-img-bg: #{$card-span-img-bg-dark};
  --#{$prefix}card-span-img-box-shadow: #{$card-span-img-box-shadow-dark};
  --#{$prefix}card-span-img-hover-box-shadow: #{$card-span-img-hover-box-shadow-dark};
  --#{$prefix}card-bg: #{$card-bg-dark};

  /* ------------------------------ showcase-page ------------------------------ */
  --#{$prefix}setting-toggle-shadow: #{$setting-toggle-shadow-dark};

  /* -------------------------------- Scrollbar ------------------------------- */
  --#{$prefix}scrollbar-bg: #{$scrollbar-bg-dark};
  --#{$prefix}simplebar-bg: #{$simplebar-bg-dark};


  /* ------------------------------- Falcon Pill ------------------------------ */
  --#{$prefix}nav-pills-falcon-active-bg-color: #{$nav-pills-falcon-active-bg-color-dark};

  /* ------------------------------- Custom disabled button ------------------------------ */
  --#{$prefix}btn-disabled-custom-background: #{$btn-disabled-custom-background-dark};
  --#{$prefix}btn-disabled-custom-color: #{$btn-disabled-custom-color-dark};

  /* ------------------------------- Dropdown Caret ------------------------------ */
  --#{$prefix}dropdown-caret-bg: #{$card-bg-dark};
  /* ------------------------------- Divider Content ------------------------------ */
  --#{$prefix}divider-content-bg: #{$card-bg-dark};

   /* -------------------------------- Accordion ------------------------------- */
  .accordion{
    --#{$prefix}accordion-border-color: #{$accordion-border-color-dark};
    --#{$prefix}accordion-bg: #{$accordion-bg-dark};
    --#{$prefix}accordion-color: #{$accordion-color-dark};
    --#{$prefix}accordion-button-icon: #{escape-svg($accordion-button-icon-dark)};
    --#{$prefix}accordion-button-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
    --#{$prefix}accordion-btn-color: #{$accordion-button-color-dark};
  }

  /* -------------------------------- Dropdown -------------------------------- */

  .dropdown-menu{
    --#{$prefix}dropdown-bg: #{map-get($dark-grays, '200')};
    --#{$prefix}dropdown-color: #{map-get($dark-grays, '300')};
    // --#{$prefix}dropdown-border-color: #{rgba($white, 0.075)};
    --#{$prefix}dropdown-box-shadow: #{$box-shadow};
    --#{$prefix}dropdown-link-color: #{map-get($dark-grays, '900')};
    --#{$prefix}dropdown-link-hover-color: #{lighten(map-get($dark-grays, '900'), 5%)};
    --#{$prefix}dropdown-link-hover-bg: #{rgba(map-get($dark-grays, '100'), 0.4)};
    --#{$prefix}dropdown-link-active-color: #{$component-active-color};
    --#{$prefix}dropdown-link-active-bg: #{$component-active-bg};
    --#{$prefix}dropdown-link-disabled-color: #{map-get($dark-grays, '600')};
    --#{$prefix}dropdown-header-color: #{map-get($dark-grays, '600')};
  }
  /* ------------------------------- Pagination ------------------------------- */
  .pagination{
    --#{$prefix}pagination-color: #{$white};
    --#{$prefix}pagination-bg: #{$dark};
    --#{$prefix}pagination-border-color: #{map-get($dark-grays, '200')};
    --#{$prefix}pagination-hover-color: #{$white};
    --#{$prefix}pagination-disabled-bg: #{$dark};
    --#{$prefix}pagination-disabled-border-color: #{map-get($dark-grays, '200')};
  }

  /* ---------------------------------- Card ---------------------------------- */
  &.card,.card{
    --#{$prefix}card-border-color: #{rgba($white, 0.125)};
    --#{$prefix}card-cap-bg: #{rgba(map-get($dark-grays, '200'), 0.03)};
    --#{$prefix}card-bg: #{$card-bg-dark};
  }

  /* --------------------------------- Popover -------------------------------- */
  .popover{
    --#{$prefix}popover-bg: #{$dark};
    --#{$prefix}popover-border-color: #{rgba($white, .2)};
    // --#{$prefix}popover-box-shadow: #{$box-shadow};
    --#{$prefix}popover-header-bg: #{map-get($theme-dark-colors, 'light')};
    --#{$prefix}popover-header-border-bottom-color: #{tint-color($dark, 16%)}; //black
  
    --#{$prefix}popover-arrow-color: #{$dark};
    --#{$prefix}popover-arrow-outer-color: #{fade-in(rgba($white, .2), .05)};
  }
  .offcanvas{
    --#{$prefix}offcanvas-bg: #{$dark};
  }
  /* ---------------------------------- Toast --------------------------------- */
  .toast {
    --#{$prefix}toast-bg: #{rgba(map-get($dark-grays, '300'), 0.3)};
    --#{$prefix}toast-header-bg: #{rgba(map-get($dark-grays, '300'), 0.3)};

  }
    /* ------------------------------- List Group ------------------------------- */
    .list-group{
      --#{$prefix}list-group-bg: var(--#{$prefix}card-cap-bg);
      --#{$prefix}list-group-action-hover-color: #{map-get($dark-grays, '700')};
      --#{$prefix}list-group-action-hover-bg: #{map-get($dark-grays, '100')};
      // -- new 5.2 -----
      --#{$prefix}list-group-disabled-bg: var(--#{$prefix}card-cap-bg);
    }
  
  
    /* ---------------------------------- Table --------------------------------- */
    .table{
      --#{$prefix}table-border-color: #{map-get($dark-grays, '100')};
      --#{$prefix}table-striped-bg: #{map-get($dark-grays, '100')};
      --#{$prefix}table-color: #{map-get($dark-grays, '500')};
  
    }
    @each $color, $value in $theme-colors {
      .table-#{$color}{
        --#{$prefix}table-bg: #{shift-color($value, -$table-bg-scale)};
        --#{$prefix}table-color: #{color-contrast(opaque(map-get($dark-grays, '200'), $value))};
        --#{$prefix}table-hover-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-hover-bg-factor))};
        --#{$prefix}table-hover-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-hover-bg-factor)))};
        --#{$prefix}table-striped-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-striped-bg-factor))};
        --#{$prefix}table-striped-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-striped-bg-factor)))};
        --#{$prefix}table-active-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-active-bg-factor))};
        --#{$prefix}table-active-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-active-bg-factor)))};
        --#{$prefix}table-border-color: #{rgba(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-border-factor)), 0.05)};
      } 
    }
  /* ---------------------------------- Modal --------------------------------- */
  .modal{
    --#{$prefix}modal-bg: #{$card-bg-dark};
  }
}}