0:00 Our plugin is definitely not finished yet but it already contains all of the theming functionality. I think it's a good time to try it out in a real app to get some gratification on the work we've done. We're going to work with this calendar app right here. You can select some days and see the availability on the right, as you can see.

0:19 When you find a date that you find convenient, you can confirm this and then have a little form. Then, you submit the form and you get a nice confirmation screen. Everything from the background to the calendar days, the selection buttons, the buttons, follows that brand color. This is where we're going to use our theming strategy to swap that brand color.

0:42 Let's take a look at the code base. Currently, everything in this app is using the Indigo color, site wide. This is what we want to try to replace with our primary themable color. If I open the tailwind config file, you'll see that we're already using a couple of plugins.

0:58 Here, in the plugins directory, BGStripes is a fancy CSS variable composition technique, which is what creates this nice animated background stripes pattern. Then, the square diagonal plugin extends the width with a mathematical equation and that width allows us to set the perfect width for this ribbon.

1:18 Finally, inside this plugin directory, we have our multitheme plugin. This is the exact code that we had in the previous lesson where we stopped. We're setting up the CSS variables at the different scopes and then extend the tailwind theme colors. Feel free to poke around the code base and take a look at things, but let me outline the challenge to complete here.

1:37 Your first step is to go in the tailwind config file and here, you're going to require the multitheme plugin and register it in the plugins array down here. By the way, you can find the instructions for this challenge in the readme file here. Once you've registered the plugin, I think it's a good idea to start with one component and try to do the conversion.

1:56 We're going to take this background pattern here, which has the split background aligned with the card split, and we're going to change the color from Indigo to the themeable color here. In components, you will find background decoration.

2:11 Again, it explains to you find all instances of Indigo, replace with a primary color, and try to add a data theme candy attributes and see what happens. If you got that working, take a deep breath and go and find and replace every instance of Indigo to primary on the entire code base.

2:27 That feels kind of scary, but remember our plugin is registered and it should generate the correct CSS variables and tailwind utilities for it to work. Finally, and this is the fun part, you should go in pages and underscore app, and down here, you will see that we have a theme switcher component, which is commented out.

2:45 Check out the code for this component if you're curious. Go ahead and uncomment it here in this underscore app file and check out what happens in the app. One more thing you can try just for fun. Remember, our themes are nestable and you can override a theme within another theme.

2:59 So, maybe try to replace one component with a different theme by adding a data attribute to that component. All right, have some fun and see you in the next one.