0:00 In the CSS file, I will start by defining the root scope variables. I'll open an @layer base here and target the root selector. Inside I want to define a --primary-500: CSS variable, and up here we have the color that we want to apply to it, so I'll copy that and paste that here.

0:21 The variable is defined, but nothing yet is consuming it, and that's what we're going to do in the config file. Down here I'll uncomment the primary object to extend a colors object and for the 500 shade I will here consume the CSS variable, which you can do. Remember with 'var(--primary-500)'.

0:41 When I save, you can notice that the 500 shade now has taken place. Before we implement the theme scopes, let's recreate the process for the 50 to 900 shades. Since I'm already in the config file, I'll replicate this a couple of time. Let's go with 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

1:03 Of course we need to define the CSS variable at the root scope here. What I'll do is grab the key value pairs inside the base object here. Let me paste that here for now, and we'll do some multi cursor magic. We want each CSS variable to be named --primary- and the shade number.

1:21 We are in CSS here, not JavaScript. I'll remove the quotes. If I've done things correctly, when I hit save, we should see the entire color spread happening. Look at this. Beautiful. Obviously the three spreads are using the base color only since this is the only color we've defined.

1:37 We now need to figure out how to define our theme scope. The theme scope can be any CSS selector. It can be a class name, but it can also be a data attribute. Let's take a look at the html. If we pay close attention to the html markup we need to style, you will see that we have these data theme attributes here.

1:56 We have one set to base, and then we have one set to rainforest, and finally one set to candy. We can use this data theme attribute as the scope for each of our themes. Let's try that. You need square brackets in CSS to target an attribute.

2:14 Here I'll go data-theme="rainforest" . Once again, I will grab the values from 50 to 900 for that theme. Paste them there and do some multi precursor magic --primary and convert these to valid CSS. Check it out. Now the rainforest color spread is happening, and I will duplicate this to do the candy.

2:40 This time I will try to only grab the hex values and with a bit of luck with multi cursor, I should be able to replace them like so. Nice. Now we have the three color spread. Let's recap because this is important. We are defining at the root scope CSS variable with a default value, which is our base theme.

3:02 Then within theme scope, data theme rainforest and candy, we redefined the values for the same CSS variables. We generate new tailwind color utilities in our config file. If I use text primary, it's going to use that CSS variable for the color, and same for background color.

3:20 By default, everywhere in the site will have the base theme color. Even if there is no data attribute here. If I can remove that, nothing will change. If I was to obtain another theme scope like candy, you can see that now the CSS variables have been redefined within this block of html.

3:37 Whenever we are using bg-primary or text-primary, these values have been changed and you could indefinitely nest this. If I go to the 500 value here, and here adds a data theme equals rainforest. Check this out. Shade 500 is now rainforest.

3:57 You can see that this is super powerful and gives you a lot of flexibility on what parts of your html inherit what values. Let me go back to base here. At this point you might think that the challenge is complete, but there's a little problem.

4:10 Check this out. In our CSS, we've defined the base color for the root scope and then theme scopes for rainforest and candy. We don't have a theme scope for the base theme. Now, I just showed you how I could override the base theme with the candy theme, but let's try the opposite.

4:26 Let's go in the data theme, candy attribute, and inside of there go find the 300 shade this time and try to add a data-theme="base". As you can see, the 300 shade has not moved to another color. There is nothing that sets data theme base as a theme scope.

4:45 Actually, if we want to be able to override a specific theme with the base theme, we also need to create a scope for the base theme. That's really quick and easy because I already have the variables here. Before rainforest, let me duplicate that one, and I will change the name to base and change the values to the base values.

5:07 You can see now that our 300 shade has been overriding the candy theme, so everything is working properly.