# Theming mdx-deck uses [emotion][] for styling, making practically any part of the presentation themeable. ## Built-in Themes mdx-deck includes several built-in themes to change the look and feel of the presentation. Export `theme` from your MDX file to enable a theme. ```mdx export { dark as theme } from 'mdx-deck/themes' # Dark Theme ``` View the [List of Themes](themes.md). ## Custom Themes A custom theme can be provided by exporting `theme` from the MDX file. ```mdx export { default as theme } from './theme' # Hello ``` The theme should be an object with fields for fonts, colors, and CSS for individual components. ```js // Example theme.js export default { // add a custom font font: 'Roboto, sans-serif', // custom colors colors: { text: '#f0f', background: 'black', }, } ``` ## Composing Themes Multiple themes can be used together. For example, this allows the use of a syntax highlighting theme, along with a color theme, and a separate typography theme. To compose themes together export a `themes` array instead of a single theme. ```mdx import { syntaxHighlighter } from 'mdx-deck/themes' import customTheme from './theme' export const themes = [syntaxHighlighter, customTheme] # Cool. :sunglasses: ``` Please note that themes are deep merged together and the last theme specified will override fields from themes before it. ### Google Fonts Themes can specify a `googleFont` field to automatically add a `` tag to the document head. Alternatively, use the `` component to add a custom `` tag. ### Syntax Highlighting By default fenced code blocks do not include any syntax highlighting. Themes can provide a set of custom MDX components, including a replacement for the default `code` component that can add syntax highlighting with libraries like [react-syntax-highlighter][]. MDX Deck includes two themes for adding syntax highlighting with [react-syntax-highlighter][]: `syntaxHighlighter` and `syntaxHighlighterPrism`. Since MDX supports using React components inline, you can also import a syntax highlighting component directly, if you prefer. ### Styling Elements Each element can be styled with a theme. Add a style object (or string) to the theme to target specific elements. ```js // example theme export default { h1: { textTransform: 'uppercase', letterSpacing: '0.1em', }, blockquote: { fontStyle: 'italic', }, } ``` See the [reference](#reference) below for a full list of element keys. ## Reference The following keys are available for theming: - `font`: base font family - `monospace`: font family for `
` and ``
- `colors`: object of colors used for MDX components
  - `text`: root foreground color
  - `background`: root background color
  - `code`: text color for `
` and ``
  - `codeBackground`: background color for `
` and ``
- `css`: root CSS object
- `heading`: CSS for all headings
- `h1`: CSS for `
`
- `h2`: CSS for `
`
- `h3`: CSS for `
`
- `h4`: CSS for `
`
- `h5`: CSS for `
`
- `h6`: CSS for `
`
- `p`: CSS for `
`
- `a`: CSS for ``
- `ul`: CSS for `