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

John Otander: [00:00] Theme-ui comes with a collection of presets. We can yarn add @theme-ui/presets in order to pull them in.

[00:07] Next, we can open up our theme file and start from scratch. The theme-ui documentation lists out the available presets. We'll go a system pronounced. That means in our theme file, we'll need to import it and then export it.

[00:23] Now, see the system styles being picked up. It comes with multiple color modes. We're able to cycle through them. We can also import other theme-ui presets.

[00:34] One example will be tosh. That's an early Macintosh throwback. Let's go back to the system preset. Since a preset is just a theme object, we can modify on the spot if you want to extend it.

[00:49] We currently have the dark color mode activated. Let's change its background color to be tomato. We've now imported the theme UI system preset and modified its dark color mode background color.

Course

Theme UI

Use and Modify a Theme UI Preset

Share this video with your friends