title: Making dark themed inputs for Bootstrap 4
body: <p>TL;DR - how can I nest validation states using a SASS mixin?</p>
  
  <p>Long version - </p>
  
  <p>I'm having a few difficulties using Bootstrap 4's SASS to generate a dark theme. Some variable replacements are obvious, but others are causing issues. The one I am currently stuck on is form inputs. Bootstrap's SASS will spit out white-background inputs by default. I override this background with a variable I have collected, and set the border to be 50% of the body's text colour (it will have contrast still, but not be stark).</p>
  
  <p>At the time of compile (which is a dynamic process handed over to the back end), the compile engine "cannot" know if the theme is intended to be dark or not dark, so I leave it to the designer to add a "content-dark" class to a container that should have the dark theme (usually but not necessarily the body).</p>
  
  <p>So far so good! Then it occurred to me that focus looked funny, because my more specific rule is enforcing my new border color over top of the SASS-calculated one. Including the whole "focus" mixin doesn't work because it reverts the background to white again. I locate the individual "bit" that does the work and move it into my new nested rule.</p>
  
  <p>HOWEVER, the mixin for validation is much more complex, so I was willing to try out the full mixin... with the idea (unfortunately a bit convoluted) of letting it do its thing and then adjusting my background-color to be even more specific again (yay specificity war). However, my knowledge of SASS is dodgy and this isn't working:</p>
  
  <pre><code>.content-dark {
      select.form-control, .form-control {
          background-color: $nav-background;
          color: darken($body-color, 33%);
          border: 1px solid darken($body-color, 50%);
          &amp;:focus {
              border-color: $input-focus-border-color;
          }
          @include form-validation-state("valid", $form-feedback-valid-color);
          @include form-validation-state("invalid", $form-feedback-invalid-color);
      }
  }
  </code></pre>
  
  <p>The input background is correctly dark, the border is GENERALLY correctly a contrasting (but not bold) color, and focus is correctly a luminous blue. But validation states don't work. They're still not nested, meaning the border is not updating even if the "glow" is.</p>
  
  <p>I'm looking for the best way to have dark-themed validation states (the nesting is required; a separate compile would solve the problem but I don't have that option).</p>