Theme UI
Use and Modify a Theme UI Preset
Theme UI has a collection of 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.