From 081e65eed288bc4d50f7f4966fa90138938fbbc0 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 4 May 2020 12:50:35 +0300
Subject: [PATCH] Add color scheme matcher snippets for browser

---
 snippets/prefersDarkColorScheme.md  | 17 +++++++++++++++++
 snippets/prefersLightColorScheme.md | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 snippets/prefersDarkColorScheme.md
 create mode 100644 snippets/prefersLightColorScheme.md

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
+```