0:00 Let's start by requiring the multiThemePlugin in our tailwind config file. Require('./plugins/multi-theme'), and at the bottom of the tailwind config file here in the plugins array, I can require the multiTheme plugin.

0:14 Here's the running app, and we are going to try to make the background split component here become theme-able. In components background decoration, I will find all instances of indigo like so and replace with primary.

0:29 When I hit save, the app should look very similar, which is a good sign. You might not notice the difference because I've based the base theme color very closely to the indigo color shades. This is really the theme-able colors at work.

0:42 In the parent most element, here I will add a data theme =, and let's go with candy. What we're expecting here when we switch back to the browser is to see a background use the candy color. Yeah, it's working. Obviously the other components are still using indigo, but it looks like our theming strategy is working really nicely.

1:01 For fun, let's try see. There's the left panel here and the right panel. Let's change the theme on the right panel only. Rain Forest. This is probably going to look terrible with pink and green side by side, but as you can see, this is working really well.

1:16 Let's undo all of that. We'll keep the colors to primary, so we should be back to our base theme. Yep. Now let's go in pages and underscore app. Here we will uncomment this theme switcher. If we look at the app, once again, we have this nice little dropdown menu with our different themes.

1:34 Before we use it, let's take a look at what the code inside of here is doing. All right, so we are setting the active theme to the base theme by default. Then we have this use effect that will append to the body elements, the data theme attributes with the active theme.

1:50 Let me open the dev tools here, and on the body tag here, you can see this data theme. Let's try switch it to rainforest. You can see the data theme change to rainforest and candy. We still have only the background split working and changing the themes because that's the only place we have implemented the primary colors.

2:11 Now let's go to town and replace every instance of indigo to our primary color. I'll do a site wide search and search for indigo, and maybe let's add a dash to make sure we only select utilities that use the word indigo. These are all pages or components, so it seems to me like it's safe to replace them.

2:30 I will replace all of these 43 instances with primary-. That sounds scary, but let's give it a shot. Ready? Yes. Boom. Should we take a look at the app? Are you scared? I'm not scared. All right, moment of truth. Let's switch to a rainforest theme.

2:50 You can already see the background color on hover is working, which gives me a lot of confidence that everything is working properly. Check this out. How cool is this? Everything is taking the correct theme and our plugin is working wonderfully.

3:12 Just like I said in the challenge intro, you could go in any components like the time picker, and then on the parent's div of that component, switch the theme to something else. Now no matter what the active theme is, our time picker will always remain candy.

3:30 I don't know about you, but I'm calling this a success. Our plugin is working really well. Let's keep going and make it more dynamic.