Implemented color-scheme mix-ins

[josephgeis]

Closes #29551

Adds two new mix-ins dark-scheme and light-scheme that take a block and wrap them in a media query for prefers-color-scheme.

[MartijnCuppens]

I'm ok with this. Would add two more things:

• This should be mentioned in our theming documentation: https://twbs-bootstrap.netlify.com/docs/4.3/getting-started/theming/
• We should mention this doesn't work in IE and Edge <= 18

[josephgeis]

Sounds good. I can add them to the docs tomorrow when I have the chance.

[MartijnCuppens]

Hi @juniorRubyist,

Could you have a look at updating the docs?

[ysds]

I'm not very interested in this. This is a just shorthand of the same fixed phrase no matter who writes.　Your request is the same as adding like follows:

@mixin reduce-motion {
  @media (prefers-reduced-motion: reduce) {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}

[josephgeis]

@ysds I think that a shorthand for this would make the code cleaner and create less mistakes. (That second example is just flat out redundant.) If you think about it, you have a mixin for the breakpoints. media-breakpoint-up(md) beats having to write @media (min-width: map-get($grid-breakpoints, md)).

[josephgeis]

@MartijnCuppens Sorry bout that. I pushed changes to the docs.

[MartijnCuppens]

If you think about it, you have a mixin for the breakpoints. media-breakpoint-up(md) beats having to write @media (min-width: map-get($grid-breakpoints, md))

We use these mixins quite a lot in our codebase, and we also have media-breakpoint-down() media-breakpoint-between() mixins which are a little more complex, so it makes sense to have the up variant.

I think I'm gonna agree with @ysds here, we got to watch out we don't add too many mixins we don't use ourselves.