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

    Use and Modify a Theme UI Preset

    John OtanderJohn Otander
    gatsbyGatsby
    reactReact

    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.

    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 comes with a collection of presets. We can yarn add @theme-ui/presets in order to pull them in.

    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.

    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.

    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.

    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.