janw/tapedrive

 
body.darkened {
  background: $gray-900 !important;
 
  & > div.wrapper {
    @extend .shadow;
    max-width: $wrapper-max-width;
    margin: 0 auto;
    background: $gray-700;
    padding-bottom: 2rem;
    margin-bottom: 5rem;
    @media (min-width: $wrapper-max-width) {
      @include border-bottom-radius($border-radius);
    }
  }
 
  & .card, & .list-group-item, & .modal-content, & .dropdown-menu, & .form-signin {
    @extend .text-white-50;
    @extend .bg-dark;
  }
 
  & .site-title, & .nav-item a {
    @extend .text-white-50;
  }
 
  & .border-bottom, & .border-top, & .form-signin, & .img-logo {
    @extend .border-dark;
  }
 
  & .btn-outline-secondary {
    color: $gray-500;
    border-color: $gray-500;
  }
 
  & h1, & h2, & h3, & h4, & h5, & h6, & p, & .text-dark {
    @extend .text-white-50;
  }
 
  & .modal-footer, & .modal-header {
    border-color: $gray-600;
  }
 
  & .dropdown-item:hover, & .dropdown-item:focus {
    @extend .text-light;
    @extend .bg-dark;
  }
 
  & .site-title > .img-logo {
    filter: grayscale(1) brightness(70%);
  }
 
  & .form-control, & .checkbox, & input[type="file"] {
    @extend .bg-dark;
    border-color: $gray-900;
  }
}