Theming Gatsby Apps with Theme UI

Rate this content
Bookmark

There are many CSS-in-JS libraries for us to choose from. Imagine being able to take your favorite parts of those libraries and using them in one. Learn about the power of Theme UI.

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

Gatsby is a React-based framework that enables developers to quickly build static websites and applications. It offers optimized performance and accessibility, with a simple setup process involving three commands.

To install Gatsby, you need to run three commands: install the Gatsby CLI, create a Gatsby project, and use 'Gatsby develop' to spin up your site, which can then be accessed at localhost 8000.

Theme UI is a styling library that utilizes constraint-based design principles to allow developers to configure designs for components using predefined values in a shared object. It simplifies creating reusable and configurable style systems for projects.

To install Theme UI in a Gatsby project, install the Theme UI Gatsby plugin, add it to your plugins array, create a 'src' folder with a 'Gatsby plugin theme' folder inside it, and then create an 'index.js' file where you export your Theme UI object.

To create a Theme UI object, define styles such as colors, fonts, font sizes, and spacing within an index.js file under your Gatsby plugin theme folder. This object will contain all the style definitions used throughout your application.

The SX prop in Theme UI is used to access and apply styles from your theme object to components. It allows you to refer directly to the keys in your theme object, such as colors or fonts, to style components effectively.

Variants in Theme UI allow you to define different styles for common components, such as buttons or links. You can create style variations within your theme object and apply them using the 'variant' prop on your components.

Color modes in Theme UI enable the creation of themes like dark mode. You can define different color styles under modes nested within your colors object. These modes allow you to switch styles, providing default and secondary styling options.

Pariss Athena
Pariss Athena
6 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The video covers how to theme Gatsby apps with Theme UI, a styling library that uses predefined values to configure component designs. It explains how to install Theme UI in a Gatsby project and create a Theme UI object with styles like colors, fonts, and spacing. The SX prop is highlighted as a way to access styles from the theme object for components. The video also discusses variants for defining styles for common components and color modes for creating themes like dark mode. Key topics include Gatsby framework, Theme UI installation, SX prop usage, style variants, color modes, breakpoints, and reusable styles.

1. Introduction to Gatsby and Theme UI

Short description:

Welcome to Theming Gatsby apps with Theme UI. Gatsby is a React-based framework for building static websites and applications. Theme UI is a styling library that allows developers to configure designs for components using predefined values. It provides a template for configurable, reusable styles and is easy to install. You can access values in your theme object using the Sx prop.

[♪ ż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.

2. Using Theme UI in Your Project

Short description:

In Theme UI, you can easily refer to your theme object throughout your project. Variants allow you to define styles for common components like buttons. You can override predefined breakpoints and create color modes. Theme objects are where your style values for your entire application live. Remember to add and import your JSX pragma and use the SX prop to access your styles. Theme UI offers many features such as variance, breakpoints, and color modes.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
Styles and Theming with Restyle in React Native
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Styles and Theming with Restyle in React Native
Top Content
Today's Talk focuses on styles and theming in React Native, specifically from the perspective of the arrive app. The challenges faced with managing colors and font styles are addressed by Restyle, which provides a type-enforced system for building UI components with themability. The implementation of color palettes, spacing, and dark mode is discussed, along with the benefits of using Restyle's predefined components. TypeScript's autocompletion and other advantages are highlighted, and listeners are encouraged to explore the project on GitHub for more features.
Zero-runtime CSS-in-TypeScript with vanilla-extract
React Finland 2021React Finland 2021
29 min
Zero-runtime CSS-in-TypeScript with vanilla-extract
Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Gatsby v4's New Rendering Modes
React Advanced Conference 2021React Advanced Conference 2021
24 min
Gatsby v4's New Rendering Modes
Gatsby V4 introduces deferred static generation (DSG), combining the benefits of static site generation (SSG) and server-side rendering (SSR). This approach allows for faster builds and a more deterministic cache. Gatsby V4 also includes features such as parallel query running and LMDB for enhanced performance. The focus is on integrations and improving the developer experience (DX) in the future.

Workshops on related topic

Intermediate Gatsby
React Summit Remote Edition 2021React Summit Remote Edition 2021
207 min
Intermediate Gatsby
Workshop
Sid Chatterjee
Sid Chatterjee
With Gats v3 out and freshly released, learn how to build modern, performant and accessible default websites from one of the maintainers of the project, Sid Chatterjee.