[Theme UI](https://theme-ui.com) is a library created by [Brent Jackson](https://jxnblk.com) for building themeable React apps with [Gatsby](https://gatsbyjs.org). It's built with [Styled System](https://styled-system.com) which provides a constrained set of styling APIs based on props. It uses [Emotion](https://emotion.sh) and [MDX](https://mdxjs.com) underneath which abstracts us away from a lot of the challenges when dealing with global CSS and styling content.

Theme UI uses ["presentational context"](https://johno.com/presentational-context) to allow a component to apply styling to child elements without introducing global styles. You can use a styles object in your configuration to apply theme-aware styles to ensure consistency.

[Theme UI](https://theme-ui.com) is a library created by [Brent Jackson](https://jxnblk.com) for building themeable React apps with [Gatsby](https://gatsbyjs.org). It's built with [Styled System](https://styled-system.com) which provides a constrained set of styling APIs based on props. It uses [Emotion](https://emotion.sh) underneath which abstracts us away from a lot of the challenges when dealing with global CSS.

Theme UI uses ["presentational context"](https://johno.com/presentational-context) to allow a component to apply styling to child elements without introducing global styles. You can use a `styles` object in your configuration to apply theme-aware styles to ensure consistency.

Introduction to Theme UI

[Theme UI](https://theme-ui.com) provides a wrapper around the MDXProvider so you can add styling to components that are rendered in your MDX documents. The styling you add will not be leaked as global styles since it relies on React Context and Emotion. The values set in the `styles` object are [theme-aware](https://theme-ui.com/theming) so you can ensure consistency when applying color and typographic styles to your content.

This lesson uses `gatsby-plugin-theme-ui` in order to seamlessly integrate Theme UI into a Gatsby site.

Style Components Rendered By MDX with Theme UI in Gatsby

Theme UI has built-in [color mode support](https://theme-ui.com/color-modes/) that makes it straightforward to add a dark mode to your Gatsby project. You can use the `useColorMode` hook to retrieve the active color palette and set it to a predefined dark color palette.

Add Dark Mode to a Gatsby Site with Theme UI

If you want to offer more than two color modes in your Theme UI-based site you can create a button that can activate all color modes. In this lesson we'll add two new color modes, for a total of four, and then use the `useThemeUI` hook to create an array of color modes to cycle through.

Cycle Through Multiple Theme UI Color Modes

Theme UI has a collection of [presets](https://theme-ui.com/presets) you can import into your app and even extend. In this lesson we'll replace an existing theme file with a preset and then extend it.

Theme UI

Instructor

Course content (5 lessons)

Instructor