Add example for themes

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)

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}
+    </>
+  )
+}
+```

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"
+  }
+}

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,
+}

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)
 
 ---