From 6b680d25d31ef2b9aaf13ec4a8e577917a71a542 Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Sun, 21 Apr 2019 20:59:42 -0400
Subject: [PATCH] Add example for themes

---
 examples/README.md           |  1 +
 examples/themes/deck.mdx     | 23 +++++++++++++
 examples/themes/package.json | 13 +++++++
 examples/themes/theme.js     | 67 ++++++++++++++++++++++++++++++++++++
 packages/mdx-deck/README.md  |  1 +
 5 files changed, 105 insertions(+)
 create mode 100644 examples/themes/deck.mdx
 create mode 100644 examples/themes/package.json
 create mode 100644 examples/themes/theme.js

diff --git a/examples/README.md b/examples/README.md
index e158a03..0eace77 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -11,6 +11,7 @@
 - [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
 - [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
 - [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
+- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
 
 <!--
 - [useSteps](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/use-steps)
diff --git a/examples/themes/deck.mdx b/examples/themes/deck.mdx
new file mode 100644
index 0000000..1b4dad3
--- /dev/null
+++ b/examples/themes/deck.mdx
@@ -0,0 +1,23 @@
+import { ThemeName } from './theme'
+export { theme } from './theme'
+
+# Hello <ThemeName />!
+
+---
+
+This deck has a custom Provider component
+that lets you switch between all the different themes.
+
+---
+
+```jsx
+import React from 'react'
+
+export default ({ children }) => {
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+```
diff --git a/examples/themes/package.json b/examples/themes/package.json
new file mode 100644
index 0000000..cc8f5c3
--- /dev/null
+++ b/examples/themes/package.json
@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@mdx-deck/themes-example",
+  "version": "2.3.2",
+  "scripts": {
+    "start": "mdx-deck deck.mdx",
+    "build": "mdx-deck build deck.mdx",
+    "help": "mdx-deck"
+  },
+  "devDependencies": {
+    "mdx-deck": "^2.3.2"
+  }
+}
diff --git a/examples/themes/theme.js b/examples/themes/theme.js
new file mode 100644
index 0000000..a242982
--- /dev/null
+++ b/examples/themes/theme.js
@@ -0,0 +1,67 @@
+import React, { useState, useContext } from 'react'
+import { ThemeProvider } from 'emotion-theming'
+import { MDXProvider } from '@mdx-js/react'
+import * as themes from '@mdx-deck/themes'
+
+const names = Object.keys(themes)
+
+const DefaultProvider = props => <>{props.children}</>
+
+const Context = React.createContext()
+
+const Provider = props => {
+  const [name, setTheme] = useState(names[0])
+  const cycle = e => {
+    const i = (names.indexOf(name) + 1) % names.length
+    setTheme(names[i])
+  }
+
+  const baseTheme = themes[name]
+  const theme = typeof baseTheme === 'function' ? baseTheme({}) : baseTheme
+  const Root = theme.Provider || DefaultProvider
+
+  return (
+    <div>
+      <Context.Provider value={name}>
+        <ThemeProvider theme={theme}>
+          <MDXProvider components={theme.components}>
+            <Root>{props.children}</Root>
+          </MDXProvider>
+        </ThemeProvider>
+      </Context.Provider>
+      <div
+        css={{
+          position: 'fixed',
+          right: 0,
+          bottom: 0,
+          margin: 16,
+        }}
+      >
+        <label>
+          Theme
+          <select
+            value={name}
+            onChange={e => {
+              setTheme(e.target.value)
+            }}
+          >
+            {names.map(name => (
+              <option key={name}>{name}</option>
+            ))}
+          </select>
+          <button onClick={cycle}>Next</button>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export const ThemeName = props => {
+  const context = useContext(Context)
+
+  return <>{context}</>
+}
+
+export const theme = {
+  Provider,
+}
diff --git a/packages/mdx-deck/README.md b/packages/mdx-deck/README.md
index ca311ba..7461fd3 100644
--- a/packages/mdx-deck/README.md
+++ b/packages/mdx-deck/README.md
@@ -320,6 +320,7 @@ The following examples will open in CodeSandbox.
 - [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
 - [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
 - [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
+- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
 
 ---