1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Introduction to Theme UI

    John OtanderJohn Otander
    gatsbyGatsby
    reactReact

    Theme UI is a library created by Brent Jackson for building themeable React apps with Gatsby. It's built with Styled System which provides a constrained set of styling APIs based on props. It uses Emotion underneath which abstracts us away from a lot of the challenges when dealing with global CSS.

    Theme UI uses "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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    John Otander: 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.

    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.

    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.

    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.

    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.

    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.