Theming

MDXP uses Theme-UI for styling, which allows you to modify any part of your presentation in a consistent manner, which ultimately results in having the same look and feel throughout your presentation.

A theme is just a plain old JavaScript object, with some properties that define your styles (colors, fonts, fontSizes, space, etc.) and some properties which apply those styles to your html and react components (styles). We strongly recommend you to go through Theme-UI's excellent documentation.

Custom Theme

To enable the use of a custom theme, you can simply pass the object to your Deck.

import React from 'react';
import ReactDOM from 'react-dom';
import Deck from '@mdxp/core';
import theme from './theme.js';
import MDXPresentation from './presentation.mdx';
ReactDOM.render(
  <Deck theme={theme}>
    <MDXPresentation />
  </Deck>,
  document.getElementById('root')
);

MDXP Styles

There are a few properties on your theme object, which get interpreted specially by MDXP.

• theme.googleFont : The contents of this property can be a URL or an array of URL's, and MDXP will add the appropriate <link /> tags to fetch the fonts from Google Fonts.
• theme.mdxp.slide : This style variant gets applied to the <Slide /> object that surrounds each of your slides. You can use it to set a default Typography for your presentation.
• theme.mdxp.note : This style variant gets applied to the <Note /> object that surrounds your presenter notes. You can use it to modify the look of your notes.
• theme.mdxp.presenter : This style variant gets applied to the presenter components. You can use this to change the styling of the buttons and timer of the presenter mode.
• theme.mdxp.block.* : You can create custom variants in this object and use them with the variant property of the Block component.
• theme.mdxp.flex.* : You can create custom variants in this object and use them with the variant property of the Flex component.
• theme.mdxp.grid.* : You can create custom variants in this object and use them with the variant property of the Grid component.
• theme.mdxp.styling.* : You can create custom variants in this object and use them with the variant property of the Styling component.

Syntax Highlighting

Syntax highlighting is not enabled by default, however it is quite easy to add it to your theme by using the prism package from theme-ui.

That's it, you now know almost everything there is to know about creating your presentations with MDXP. Head over to the API documentation to learn about all the components we already build for you, and don't forget to read about all the different things you can do when presenting!