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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!