Dark theme

We have the much-upvoted gitlab#14531 (closed) in gitlab repo, but worth discussing how this will work on gitlab-ui's side.

Questions to answer

• Should all SCSS vars be declared here and then inherited in gitlab?
• Should utility mixins/classes keep their names and have their rules change, or we serve different markup to users with dark theme?
• Do we need to add any theme-support pieces in JS/Vue?
• What kind of regression prevention can we add? Will visual tests of light + dark mode components be adequate?
• Are there any other considerations for 'themes' other than light/dark? We likely don't need to worry at this stage, but worth considering so we don't end up in a boolean trap if we add other themes later

Random notes and resources

Jeremy Keith writeup. This one uses custom properties (which we can't and probably shouldn't), but includes this great snippet from Melanie Richards for images (we could also use this for labels):

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}