diff --git a/snippets/prefersDarkColorScheme.md b/snippets/prefersDarkColorScheme.md
new file mode 100644
index 000000000..f698ad001
--- /dev/null
+++ b/snippets/prefersDarkColorScheme.md
@@ -0,0 +1,17 @@
+---
+title: prefersDarkColorScheme
+tags: browser,intermediate
+---
+
+Returns `true` if the user color scheme preference is `dark`, `false` otherwise.
+
+Use `window.matchMedia()` with the appropriate media query to check the user color scheme preference.
+
+```js
+const prefersDarkColorScheme = () =>
+  window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+```
+
+```js
+prefersDarkColorScheme(); // true
+```
diff --git a/snippets/prefersLightColorScheme.md b/snippets/prefersLightColorScheme.md
new file mode 100644
index 000000000..c28c6b720
--- /dev/null
+++ b/snippets/prefersLightColorScheme.md
@@ -0,0 +1,17 @@
+---
+title: prefersLightColorScheme
+tags: browser,intermediate
+---
+
+Returns `true` if the user color scheme preference is `light`, `false` otherwise.
+
+Use `window.matchMedia()` with the appropriate media query to check the user color scheme preference.
+
+```js
+const prefersLightColorScheme = () =>
+  window && window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
+```
+
+```js
+prefersLightColorScheme(); // true
+```