From 2d2f5b3dfd901bca22133ae25fdcce7afb4042c7 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 11 Jan 2021 21:02:26 -0800
Subject: [PATCH] Add color-scheme mixin

---
 scss/_mixins.scss                       |  1 +
 scss/mixins/_color-scheme.scss          | 17 +++++++++++++++++
 site/content/docs/5.0/customize/sass.md | 22 ++++++++++++++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 scss/mixins/_color-scheme.scss

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 7b06cd8198c9..eec085789a75 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -10,6 +10,7 @@
 
 // Helpers
 @import "mixins/breakpoints";
+@import "mixins/color-scheme";
 @import "mixins/image";
 @import "mixins/resize";
 @import "mixins/visually-hidden";
diff --git a/scss/mixins/_color-scheme.scss b/scss/mixins/_color-scheme.scss
new file mode 100644
index 000000000000..303fed72d2b1
--- /dev/null
+++ b/scss/mixins/_color-scheme.scss
@@ -0,0 +1,17 @@
+// scss-docs-start mixin-color-scheme
+@mixin color-scheme($name) {
+  @if $name == dark {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  } @else if $name == light {
+    @media (prefers-color-scheme: light) {
+      @content;
+    }
+  } @else {
+    @media (prefers-color-scheme: #{$name}) {
+      @content;
+    }
+  }
+}
+// scss-docs-end mixin-color-scheme
diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md
index 0e0d3fe2432a..98a6429fb30e 100644
--- a/site/content/docs/5.0/customize/sass.md
+++ b/site/content/docs/5.0/customize/sass.md
@@ -276,3 +276,25 @@ $border-width: 0;
   border-radius: subtract($border-radius, $border-width);
 }
 ```
+
+## Mixins
+
+Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.
+
+### Color schemes
+
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
+
+{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
+
+```scss
+.custom-element {
+  @include color-scheme(dark) {
+    // Insert dark mode styles here
+  }
+
+  @include color-scheme(custom-named-scheme) {
+    // Insert custom color scheme styles here
+  }
+}
+```