diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index b4b0ee763415aaf03ed1f1fe56465cc0689a1f4a..1433bc74208db95bed0133c7614d97142b897ca1 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -15,6 +15,7 @@
 @import "mixins/screen-reader";
 @import "mixins/reset-text";
 @import "mixins/text-truncate";
+@import "mixins/color-scheme";
 
 // Utilities
 @import "mixins/utilities";
diff --git a/scss/mixins/_color-scheme.scss b/scss/mixins/_color-scheme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..de35c8aed38e936c97d436a21328b222d52650aa
--- /dev/null
+++ b/scss/mixins/_color-scheme.scss
@@ -0,0 +1,16 @@
+// Color schemes
+//
+// Shorthand mixins for scoping styles to a particular color scheme media query.
+// Learn more: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+
+@mixin dark-scheme {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+@mixin light-scheme {
+  @media (prefers-color-scheme: light) {
+    @content;
+  }
+}
diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index aa3c729a3e743fa1a480a19db58e8ec97b3035c4..69ae2e9436c28173fe8f2dec2957fadcb712f5ec 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -412,6 +412,27 @@ These Sass loops aren't limited to color maps, either. You can also generate res
 
 Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
 
+## Dark Mode
+
+If you are ready to implement a dark theme (or light theme), then two easy-to-use mixins are provided for your convenience: `dark-scheme()` and `light-scheme()`. They use WebKit's experiemental [`prefers-color-scheme`](https://caniuse.com/#feat=prefers-color-scheme) media directive to detect system color scheme preference (e.g. Dark Mode on iOS 13 or macOS Mojave). This doesn't work in IE and Edge <= 18.
+
+{{< highlight scss >}}
+// Default styles.
+// These styles outside apply to dark or light mode users, as well as users that don't support prefers-color-scheme.
+
+@include dark-scheme() {
+  // These styles only apply to users in dark mode.
+}
+
+@include light-scheme() {
+  // These styles only apply to users in light mode.
+  // These styles will not apply to users
+  // that don't support prefers-color-scheme.
+}
+{{< /highlight >}}
+
+Note that `light-scheme()` should only be used when the default theme is dark, and `dark-scheme()` should only be used when the default theme is light. Any styles put inside these mixins will only be effective when the user is in the respective light or dark mode.
+
 ## CSS variables
 
 Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping.