Theming Gatsby Apps with Theme UI

[♪ żeh gentle instrumental music begins ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ žeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ zeh gentle instrumental music continues ♪ [♪ žeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music continues ♪ [♪ żeh gentle instrumental music ends ♪

Hey everyone. Welcome to Theming Gatsby apps with Theme UI. I am Paris Chandler. I am on the Developer Success Team at G2I. I'm a front end developer, I'm creator of BlackTech Twitter, and founder of BlackTech Pipeline.

So getting into it, first things first, what's Gatsby? Gatsby is a React-based framework that allows developers to quickly build up static websites and applications. And installing it is super simple, it takes three commands. You install the Gatsby CLI, create a Gatsby project, spin up your site with Gatsby develop, and then you can access your new site on localhost 8000. It's as simple as that. So the first thing you'll see is this landing page. And the cool thing about this are that these pages are optimized for ideal performance and accessibility. And it comes with a lot of configurations under the hood that you won't need to set up yourself.

Now getting into it, what is Theme UI? Theme UI is a styling library that allows developers to configure designs for components by giving them predefined values in a shared object. And the developers of Theme UI call this constraint-based design principles. In my own words, Theme UI is a template for configurable, reusable styles that'll help to build styling systems for your projects. These are, once again, super easy to install. So you just install the Theme UI Gatsby plugin, add it to your plugins array, create an src folder, and within that, create your Gatsby plugin theme folder, and within that, create an index.js file. Then you can export your Theme UI object into that. Ah, sorry. Alright, so this is an example of a Theme UI object. So you have your colors, your fonts, your font sizes and spacing, and these are the styles that are defined throughout your application. And if you don't feel like building out a Theme UI object from scratch, Theme UI has a custom theme tool that allows you to build out your object sort of by clicking, dragging, and dropping. It'll create your theme object for you, you can copy and paste it from there into your project. So there are two ways to access values in your theme object. So you can use the components that come with Theme UI and style them with the Sx prop. And if you don't want to use components, you'd need to use the JSX Pragma in order to use Sx prop, and the Sx prop is the only way to access your theme object values. So here, this is the Sx prop and how you'd access the styles within your object. So you'll notice that within the Sx prop, there are object keys that are strings and that's because they refer to the keys in your theme object. They refer to the keys in your theme object. So just to give you an idea of what it's like to use the Sx prop on a basic level, I've got a theme object here with a primary color of Rebecca purple and a secondary color of coral.

Below in my square component, I'm setting the background color to primary and the other to secondary. And this is how easy it is to refer to your theme object throughout your project. And this is an example of your primary and secondary values.

Then there are variants that allow you to define variations of styles for common components like buttons. So you have a button object with two objects in them. One is a primary object with a set of styles and the other is a secondary object with a set of styles. You can apply either variance by using the variant prop and this works really well for things like buttons or links.

Theme UI also has predefined breakpoints but you're able to override them with your own breakpoint values. And there's also color modes. So color modes allow you to create things like dark mode in your theme object. You create those modes by adding a nested mode object to your colors object and defining your mode styles in there. An important thing to note is that all colors defined in your colors object are your default colors, and all colors defined in your modes are your secondary styles.

So while that was really fast, let's just recap what we've learned. Theme objects are where your style values for your entire application live. It's a custom tool that will build out your, there's a custom tool that will build out your theme object for you to copy and paste. And remember to add your, remember to add and import your JSX pragma and use the SX prop to access your styles. And theme UI comes with tons of cool features such as variance, break points, color modes, and more. And again, I'm Paris Athena. I work at G2Y, and I'm founder of Blacktech Pipeline. And I hope to meet you soon.