0:00 Let's take a quick tour of our starting point. Creating color palettes from scratch will send you down a deceptively large rabbit hole. We'll skip that bit. We'll kick off the workshop with a little head start, a themes object with three custom colors. You can see we have a base color, a rainforest color, and a candy color.

0:17 Then we're extending our colors in the Tailwind config with these three colors. You can see that we're sticking with the 50-to-900 color-shade name strategy that Tailwind uses. This is not required. Because we want to implement the multi-theme strategy to an existing app, this is going to make things much easier on us to be able to swap the colors using the same names.

0:38 To create these colors, I've used an online tool called Huetone. We have our three colors ranging from 50 to 900. You can see these numbers here -- 20, 36 -- that are matching for each color shade. This is the APCA contrast, which is the perceived contrast algorithm.

0:54 Essentially by having numbers that match, you can imagine that switching colors will retain a consistent contrast when switching from theme to theme. All right. This is going to be our starting point to implement the theming strategy. As you can tell right now, we are not doing any theming at all. We have three colors. We simply extend our colors object with these three colors.

1:13 What we want is to be able to use the same color utility class across all themes. We should be able to redefine the value of the color based on the current active theme. To do this, we're going to leverage the power of CSS variables.