From the course: React: Components, Context, and Accessibility

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Solution: Building a context-based theme system

Solution: Building a context-based theme system - React.js Tutorial

From the course: React: Components, Context, and Accessibility

Start my 1-month free trial Buy for my team

Solution: Building a context-based theme system

“

(upbeat music) - [Narrator] Now it's time to build the thing that every developer cares about more than anything, which is a way to set a different theme. So we can set light mode and dark mode for our project here. We start by creating the theme context with react.createcontext. Then we're creating a class which is going to help us to provide that data to anything that lives inside of it. So we need to create a toggle that's going to go back and forth between light and dark. This is going to call set state. We'll take in the previous state and then we will return an object. Here we'll say theme is previous state.theme. We'll set that equal to if this happens to be light, then we're going to set it to dark, otherwise we'll set it to light. All right, so now inside of our render, we have the value and we're wrapping the props.children with the theme context provider. So from here we're going to create a theme consumer, which is going to use the render props pattern. We're going to call…

Contents