12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
05 : 14 : 04 : 37
Become a member
to unlock all features

    Use and Modify a Theme UI Preset

    John OtanderJohn Otander

    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.



    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




    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.