$body-bg: #222222; $dark: #292929; $secondary: #343a40; $accent: #b58e51; $disabled: #455a64; $custom-colors:( "accent": $accent ); $enable-shadows: true; $btn-box-shadow: none; $component-active-bg: $accent; $input-color: $accent; $input-bg: $secondary; $input-border-color: $secondary; $input-group-addon-bg: $disabled; //$input-group-addon-color: $secondary; $input-group-addon-border-color: $disabled; $form-select-indicator-color: $accent; $form-switch-color: $accent; $form-switch-bg-image: url("data:image/svg+xml,"); $form-check-input-border: 1px solid $accent !default; $list-group-action-color: $accent; $list-group-bg: $secondary; $list-group-hover-bg: $secondary; $list-group-action-hover-color: #adb5bd; $alert-bg-scale: 0%; $alert-border-scale: -10%; $alert-color-scale: -100%; $nav-tabs-border-color: $accent; $nav-tabs-link-active-border-color: $accent $accent $body-bg; $nav-tabs-link-active-color: $accent; $nav-tabs-link-hover-border-color: $secondary $secondary $nav-tabs-border-color; $nav-link-color: white; $nav-link-hover-color: $accent; // Configuration @import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/variables"; $theme-colors: map-merge($theme-colors, $custom-colors); @import "../../node_modules/bootstrap/scss/mixins"; @import "../../node_modules/bootstrap/scss/utilities"; //All other bootstrap imports @import "bootstrap_imports.scss"; .modal-dialog-scrollable .modal-body { &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: $secondary; } &::-webkit-scrollbar { width: 12px; background-color: $dark; } &::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: $accent; } }