diff --git a/docs/theming.md b/docs/theming.md
index bad1f48..f42f95c 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -125,6 +125,7 @@ The following keys are available for theming:
- `Slide`: CSS to apply to the wrapping Slide component
- `components`: object of MDX components to render markdown
- `Provider`: component for wrapping the entire app
+- `Presenter`: component for wrapping the presenter mode
- `googleFont`: CSS HREF for adding a Google Font `` tag
## Advanced Usage
diff --git a/packages/components/src/MDXDeck.js b/packages/components/src/MDXDeck.js
index cf2f4eb..89827b2 100644
--- a/packages/components/src/MDXDeck.js
+++ b/packages/components/src/MDXDeck.js
@@ -4,6 +4,7 @@ import { Router, globalHistory, navigate } from '@reach/router'
import { Global } from '@emotion/core'
import { Swipeable } from 'react-swipeable'
import merge from 'lodash.merge'
+import defaultTheme from '@mdx-deck/themes/base'
import Provider from './Provider'
import Slide from './Slide'
@@ -41,24 +42,17 @@ const getIndex = ({ basepath }) => {
return index
}
+const mergeThemes = themes =>
+ themes.reduce(
+ (acc, theme) =>
+ typeof theme === 'function' ? theme(acc) : merge(acc, theme),
+ {}
+ )
+
const mergeState = (state, next) =>
merge({}, state, typeof next === 'function' ? next(state) : next)
const useState = init => useReducer(mergeState, init)
-const getWrapper = mode => {
- switch (mode) {
- case PRESENTER:
- return Presenter
- case OVERVIEW:
- return Overview
- case GRID:
- return Grid
- default:
- return BaseWrapper
- break
- }
-}
-
export const MDXDeckContext = React.createContext()
const useDeckState = () => {
@@ -83,8 +77,9 @@ export const MDXDeckState = ({ children }) => {
}
export const MDXDeck = props => {
- const { slides, basepath } = props
+ const { slides, basepath, theme: baseTheme, themes = [] } = props
const { state, setState } = useDeckState(MDXDeckContext)
+ const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
const index = getIndex(props)
@@ -92,6 +87,20 @@ export const MDXDeck = props => {
return state.metadata[i] || {}
}
+ const getWrapper = mode => {
+ switch (mode) {
+ case PRESENTER:
+ return theme.Presenter || Presenter
+ case OVERVIEW:
+ return Overview
+ case GRID:
+ return Grid
+ default:
+ return BaseWrapper
+ break
+ }
+ }
+
const register = (index, meta) => {
setState({
metadata: {
@@ -155,7 +164,7 @@ export const MDXDeck = props => {
const Wrapper = getWrapper(state.mode)
return (
-
+
diff --git a/packages/components/src/Provider.js b/packages/components/src/Provider.js
index 04a9b93..7b4d996 100644
--- a/packages/components/src/Provider.js
+++ b/packages/components/src/Provider.js
@@ -1,23 +1,13 @@
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
-import merge from 'lodash.merge'
import { HeadProvider, UserHead } from './Head'
import { MDXProvider } from '@mdx-js/react'
-import defaultTheme from '@mdx-deck/themes/base'
import mdxComponents from './mdx-components'
const DefaultProvider = props => <>{props.children}>
-const mergeThemes = themes =>
- themes.reduce(
- (acc, theme) =>
- typeof theme === 'function' ? theme(acc) : merge(acc, theme),
- {}
- )
-
export const Provider = props => {
- const { headTags, theme: baseTheme, themes = [], mdx } = props
- const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
+ const { headTags, theme, mdx } = props
const {
Provider: UserProvider = DefaultProvider,
components: themeComponents = {},
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 3db55b2..a2572d8 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -1,4 +1,5 @@
export { MDXDeck, MDXDeckState } from './MDXDeck'
+export { default as Clock } from './Clock'
export { Head } from './Head'
export { Image } from './Image'
export { Notes } from './Notes'