diff --git a/docs/api.md b/docs/api.md
index fcba98e..39d6e0f 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -101,4 +101,20 @@ export default props => {
 }
 ```
 
+## `useTheme` Hook
+
+The `useTheme` hook returns the current [theme](theming.md).
+
+```jsx
+// example
+import React from 'react'
+import { useTheme } from '@mdx-deck/components'
+
+export default props => {
+  const theme = useTheme()
+
+  return <h2 style={{ border: `1px solid ${theme.colors.text}` }}>Hello</h2>
+}
+```
+
 [provider component]: advanced.md#custom-provider-component
diff --git a/packages/components/src/AspectRatioSlide.js b/packages/components/src/AspectRatioSlide.js
index eabc6b7..2a7c71d 100644
--- a/packages/components/src/AspectRatioSlide.js
+++ b/packages/components/src/AspectRatioSlide.js
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { ThemeContext } from '@emotion/core'
 import styled from '@emotion/styled'
 import FluidFontSize from './FluidFontSize'
+import useTheme from './useTheme'
 
 const getPadding = ratio =>
   ratio > 1 ? (1 / ratio) * 100 + '%' : ratio * 100 + '%'
@@ -36,7 +36,7 @@ const Inner = styled.div(
 )
 
 export default props => {
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
   if (!theme.aspectRatio) {
     return <>{props.children}</>
   }
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index a2572d8..5ef846e 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -7,6 +7,7 @@ export { Steps } from './Steps'
 export { Appear } from './Appear'
 export { withContext, useDeck } from './context'
 export { default as useSteps } from './useSteps'
+export { default as useTheme } from './useTheme'
 
 export { Slide } from './Slide'
 export { Zoom } from './Zoom'
diff --git a/packages/components/src/useTheme.js b/packages/components/src/useTheme.js
new file mode 100644
index 0000000..b50f02b
--- /dev/null
+++ b/packages/components/src/useTheme.js
@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { ThemeContext } from '@emotion/core'
+
+export default () => useContext(ThemeContext)