Introduction to Theme UI

Style Components Rendered By MDX with Theme UI in Gatsby

Add Dark Mode to a Gatsby Site with Theme UI

Cycle Through Multiple Theme UI Color Modes

Use and Modify a Theme UI Preset

Theme UI

[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.

John Otander: [00:00] Theme UI is a library for building themeable React apps. It's built with Styled System, which provides a constrained set of styling APIs based on props. You can think of it as Tachyons or Tailwind, but it's on steroids because style as a function is much more flexible than classes when it comes to component-based design.

[00:19] React prop can return multiple CSS declarations. They can also be dynamic in nature. Theme UI uses Emotion underneath the covers. It's a CSS and JS library that abstracts us away from a lot of the challenges of dealing with global CSS. This is particularly important with Theme UI because we don't want to leak styles.

[00:40] Theme UI is built to work with MDX out of the box. It uses presentational context in order to apply styling to child elements without leaking styles. It's inspired by Typography.js, but brings it to the next level. With Theme UI, you can use a Styles object in your configuration to apply theme-aware styles to ensure consistency. This allows you to target theme-aware styles different objects that will be rendered from your markdown, just like an h1.

[01:09] Theme UI adheres to the System UI Theme Specification. This ensures interoperability amongst other tools and improving the developer experience with reduced cognitive overhead. This ensures the implementation can be shared amongst things like an editor for the theme itself in the style guide, which displays its values.

[01:30] Theme UI also introduces the SX prop. It's similar to Emotion CSS prop, but it's theme-aware. This means you can references something like color primary in order to reach into your theme, look in colors, and try and find a primary value.

[01:46] All in all, Theme UI is a great fit for something that needs to be themeable or is content heavy. It has built-in color mode support, forces your styles to be consistent based on constraints, and doesn't leak global styles.

Course

Theme UI

Introduction to Theme UI

Share this video with your friends