Welcome to the Multi-Theme Strategy Workshop!

In this workshop, we are going to combine two superpowers:

1. CSS Custom Properties, aka CSS Variables  
2. Tailwind's JavaScript Plugin API

These are the two key ingredients that will let us build a comprehensive CSS-only theming strategy.

We'll start with a little primer on CSS variables, and then jump right into building our theming implementation.

Let's have some fun!

In this workshop, we will learn how to use CSS Custom Properties and Tailwind's JavaScript Plugin API to build a comprehensive CSS-only theming strategy.

Intro to the Multi-Theme Strategy Workshop

0:00 Welcome to the Multi-Theme Strategy Workshop. Together, we'll combine two superpowers together, CSS custom properties, also known as CSS variables, and Tailwind's JavaScript Plugin API.

0:11 These are the two key ingredients that will let us build a comprehensive CSS-only theming strategy. We'll start with a little primer on CSS variables and then jump right into building a theming implementation. All right. Let's have some fun.

In this workshop, we’ll explore the best way to support advanced theming beyond just dark mode. Your new superpower will be the ability to bring multi-theme support to any new or existing project using Tailwind CSS.

By the end of the workshop, you will have a **fully functional Tailwind CSS plugin** that can bring **multi-theme support to any project** using Tailwind CSS. Your team will be able to reuse this plugin from project to project, saving you hours of development.

### Topics we will cover 

Together, we’ll build a reusable multi-theme strategy. Step by step.

* Defining colors as CSS variables 
* Generate new themable color utility classes 
* Create a Tailwind CSS plugin that orchestrates our theming strategy 
* Support nested color theme objects 
* … and much more!

### By the end of this workshop, you will:

* Understand how to use **CSS variable scopes** to create a theming hierarchy. This is the superpower that makes creating CSS-only theming implementations possible. 
* Leverage the **Tailwind CSS Plugin API** to package all the moving parts of a theming implementation. The Plugin API unlocks the full power of JavaScript to help you generate advanced and reusable CSS functionality.

This workshop's approach is to start with the basics and gradually build upon them, focusing on fundamental concepts before moving to more robust approaches.

Incrementally Introducing Complexity

0:00 A quick note about our approach in this workshop. We're going to start simple and build upon our foundation step by step. We'll do a bunch of copy/pasting around, write repetitive code, and that's all right. We'll improve our code reusability later. We'll also write some naive code first and make it more robust later. Go with the flow. Take it step by step.

0:18 We're building fundamental concepts first and keeping things intentionally simple. No clever loops or recursion before we need to. Trust me, they're coming. All right. I just wanted to make this clear before we get started. Let's go.

We start with definitions for three sets of colors that are extended in the Tailwind config, but they don’t do any theming yet.

Our App’s Tailwind Configuration Starting Point

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.

CSS variables are essential for building a theming strategy. This lesson provides a brief explanation on how to define and consume variables.

Test your understanding of CSS variables by experimenting with different color options and see how it impacts your website design.

Redefining CSS Variables in Different Scopes

0:00 The solution is pretty simple here. All I had to do is in the square--pink class, redefine the --color variable, and assign it the color of deeppink, and now the square is pink. Pretty straightforward, right? This CSS variable scoping is a foundational piece of our theming strategy, so I need to make sure that you're comfortable with it.

A Primer on CSS Variables

0:00 A really quick primer on CSS variables because this knowledge is essential to our theming strategy. You can define a CSS variable with dash dash and the variable name that you want and then assign a value to it. You can then consume that variable by using the var function and the variable name inside of it.

0:16 Note that our variable name here will be available within the scope to which it's been defined. Here we're using the root scope, which is the entire document. It's available everywhere. A great feature of CSS variables is they can be redefined within any CSS selector. Here I'm going to redefine the variable name to the deep pink color within the button pink selector.

0:38 Now in the button class here, the variable name consumed here will still hold a value defined as the root scope. Inside a button pink class the variable name color will have been updated. Here's a little challenge for you. We've got these two shapes here. The first one with a class of square and the second one with a class of square but also square dash dash pink.

0:58 Your job is to make the second square, well, pink. We're defining this dash dash color variable at the root scope where we use that teal color. Then in the square class below here we consume that color to apply it to the background color property. Now your job is to redefine this CSS variable inside the square pink class to make the second square here pink.

One way to challenge yourself when using Tailwind CSS is to try applying colors to elements without modifying any HTML markup.

Scoping CSS variables and extending the Tailwind config file are key steps in the journey to a comprehensive theming strategy.

Creating Multiple Color Spreads with CSS Variables

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.

Create Themable Color Shades with CSS Variables

0:00 Let's create themeable color shades. We'll use the same color name across all themes. Let's choose a name that is not tied to a specific color or field. We'll call it primary. 

0:10 Here's your first challenge. We have these three-color spreads here, and they're currently using the three colors that we have extended our Tailwind config with. If I look at the HTML, you can see that these colors are using text-base, bg-base, and then rainforest, and later candy.

0:26 Without touching any of the markup below, we're going to use the primary color for all of these three spreads. We want them, without changing the HTML, to start looking like the ones on top. You can see here, if I highlight the word primary, everything is using these primary background and text colors.

0:45 Let me give you a couple of tips to get going and then you're off to your first challenge. The first thing you'll want to do is, in the CSS file, create CSS variables for our primary color shades. You can name these primary-50 to primary-900. I suggest you start with just primary-500, and then repeat the exact same process.

1:03 You'll find these theme values in the Tailwind config file right here, but for convenience, I've put the 500 value for each theme down here. You'll first want to define these CSS variables within the root selector.

1:16 Before anything works, you'll need to go in the Tailwind config file and extend the colors object with a new primary object. You can see it's already there, commented out. If you've done that right, you should see the 500 shades take place here.

1:30 Finally, back in the CSS file, you'll want to redefine the CSS variable within the theme scopes. To figure out what these theme scopes are, you're going to have to look at the HTML. Remember, you can't touch that HTML markup, but looking at it, you will find a clue to what you can use to create your theme scopes.

The themable colors have broken support for opacity. Converting hex to RGB channels is a key step in fixing it.

Explore converting a hex value into RGB channels, and how they can be composed with <alpha-value> in order to support opacity in Tailwind themes. 

Compose RGB Channels with alpha-value for Opacity Support

0:00 Let's start by converting the hex value to R, G, and B channels. Unless you want to do some base 16 math in your head, you can use an online tool for that or inside VS Code, there is this neat little extension called Hex to RGBA that I could use here. This will transform to a format which is not what we want, but it gets us halfway there.

0:20 Check this out, I'm going to select all of the hex colors and I will convert them to RGBA, all at once. Then, we actually don't want the RGB or RGBA function. All we want is a space separated string of R, G, and B. When I save this, this is going to break our design, because we actually don't have the composed color. We just have the channels for now.

0:43 Step two is to now update in our Tailwind config the way we consume these CSS variables. We only have that part. We want to wrap this in an RGB function and compose with the transparency alpha-value.

0:56 Once again, multi cursor to the rescue. This is a very good skill to have in this workshop. We're going to open the RGB function and let me close it at the end. RGB is going to be that part and we're going to compose that with the alpha-value provided by Tailwind. When I save this, we should have full support for opacity, which is fantastic.

1:18 If I inspect the bg-primary-600 class, you can see that now we are composing this tw-bg-opacity variable. Then, the background color is using this, applying our RGB individual channels within the CSS variable and composing that with the opacity variable, which is the alpha-value that we've used.

Implementing Color Opacity with CSS Variables

0:00 We are creating new themable colors, but it looks like in the process, we've broken support for color opacity. Check this out.

0:06 Here, we've got some default Tailwind colors showing at various degrees of color opacity, and you can see everything look as it should, but below here with the same code using our themable colors, things are obviously not working.

0:19 To understand why it's not working, we need to figure out how opacity is handled. If you think about it, there is no such thing in CSS as text opacity or background opacity. Tailwind CSS cleverly leverages CSS variables to compose this opacity within the color.

0:34 Let's hover a default color like bg-teal-600. You'll see that it sets a tw-bg-opacity variable set to 1, which is 100 percent opacity. Then the background color is set to that color, and it composes the opacity here in the alpha modifier.

0:51 That was the 100 percent color here. If you look at the 70 percent color, this is the same bg-teal-600 with opacity of 1, and then the bg-opacity-70 down there, can you guess what it does? All it does is set and redefine the tw-bg-opacity variable to .7 or 70 percent. Now when we apply this bg-teal-600, the opacity will be .7 or 70 percent.

1:17 This is the same mechanism that we've used with our colors, where we would redefine the color variable within the theme scope. Here, the opacity variable is redefined when we apply a bg-opacity class. This is super clever, and Tailwind CSS is full of these CSS variable composition techniques under the hood.

1:34 If I scroll down to the multi-theme colors that we've implemented, let's see what happen if I hover the primary background color. There is no tw-opacity variable. It just applies the CSS variable as the background color.

1:48 If I go to the 70-percent opacity here, the bg-opacity class here sets the tw-bg-opacity variable to .7, but the bg-primary-600 color doesn't use it at all. It just sets the background color to our CSS variable, so of course, nothing is going to change when this class is applied.

2:07 When we define colors as CSS variables, all we give Tailwind is this variable name, which is a placeholder that can contain any value, and Tailwind is not able to extract these R, G, and B channels, so we're going to have to do this manually.

2:20 In other terms, in our CSS file, instead of defining colors as hex value, we are going to want to convert these to R, G, and B channels. Not the RGB color, just the individual channels.

2:32 Your job in this challenge is to transform all of these hex values into R, G, B channels, literally a string of R, space, G, space, B. Once you've done that, in the config file, you will be able to compose these R, G, B channels with Tailwind's alpha-value, which is the exposed equivalent of these tw-opacity variables Tailwind has internally.

2:55 You'll be able to create an RGB function with the R, G, and B channels and then compose the alpha-values like this in each of these values. Good luck.

The Tailwind CSS plugin API allows for sharing functionality between multiple projects, making it easier to reuse code and streamline development.


We will use the addBase function from Tailwind’s plugin API to inject styles into our base layer and apply our uppercase text transformation to the body.

Building an Example All Caps Plugin for Tailwind CSS

0:00 We'll need the plugin function from Tailwind CSS. The first thing I'll do here is const plugin and require tailwindcss/plugin. Then inside of my plugin's array here I can call this plugin function. This function actually gives me another function, which is where I can grab things such as addBase, addComponents, addUtilities. Here we want to add to the base layer, so I'll choose addBase.

0:25 We'll use that helper function to inject styles to the base layer. We want to target the body. Remember it's CSS in JavaScript syntax, textTransform. The value will be a string of uppercase. We can see our styles have been properly injected. The plugin is working.

0:43 That addBase function here is exactly what we're going to use to inject our theme styles -- our CSS variables that we've defined in the previous lessons.

Improve Your Developer Workflow with Tailwind CSS Plugins

0:00 We've already laid out the foundations of a theming strategy. We can probably improve our developer experience here. We're defining our CSS variable in a CSS file. Then we're generating new color utilities in the Tailwind config file. That would be nice if we could do both things within the same file.

0:16 What if we want to support theming in another project using Tailwind CSS? Do we repeat this process for each new project? Surely there must be a better way. That way is the Tailwind plugin API. Tailwind CSS offers a powerful plugin API that lets you author your CSS with the full power of JavaScript. It also allows you to reuse functionality across projects.

0:37 Here's your challenge for this one. We're going to start creating a plugin. In our config file here, we have this plugins array. You're going to pass here a plugin that will generate the following CSS, target the body tag, and set text transform to uppercase.

0:53 We want this heading tag here and the paragraph to be uppercase as a verification that the plugin is working and injecting the styles like it should. Good luck.

We can advance our theming strategy by taking the CSS variable declarations out of the CSS file and move them inside our plugin.

Let’s move all of the CSS variable declarations being injected into our base layer from a CSS file into a Tailwind CSS plugin with help from some tools.

Transform CSS into CSS in JS for use in a Tailwind CSS Plugin

0:00 I will grab all the CSS variable declarations here, the root scope, and the theme scopes. In the config file, I could replace the body selector here with all of this -- of course, it's all broken -- and start the conversion to a CSS in JavaScript Object. This is a pretty tedious task.

0:21 One tool that's pretty handy for this is this transform.tools that lets you transform all sorts of things. I can literally paste the CSS that I've copied here. It's going to convert all of this. I don't need the converted variable, but I can grab everything that's inside of it.

0:37 Let me replace that CSS with the CSS in JavaScript syntax. Because we are injecting this CSS in the base layer, we're essentially doing exactly what the CSS file was doing. I can go and delete all of that CSS injected to the base layer. When I save, you can see that everything still works.

0:58 Just to show you I'm not playing tricks on you, if I comment out the add-base declaration here and save, all the colors are gone because the CSS is being injected from our plugin API. What this means is we're not doing any work in our CSS file anymore. All of our work is happening in the Tailwind config file. Eventually, we'll move that into its own plugin file.

Moving CSS Variable Declarations into a Tailwind CSS Plugin

0:00 Now that we have a working plugin, let's move our theming strategy into the plugin. For this challenge, you're going to take the CSS variable declarations in the CSS file here, and move them to the config file inside our plugin.

0:14 You can replace this text transform uppercase Hello World and put the declarations here. Remember you need to use the CSS in JavaScript syntax, so you'll need to do a bit of formatting. Good luck.

Manually creating RGB channels is tedious. Let’s create a function that converts hex to RGB channels and use that instead.

We're going to use our multi-cursor skills to refactor our plugin code to use our getRgbChannels helper function to get values from our themes object.

Replacing Hardcoded RGB Channel Values with Function Calls

0:00 We're going to use our multi-cursor skills, once again, here. We'll start with just the root level variables, select all these and go getRgbChannels. We want to reach for the themes object and then the base key. Here, we want to grab the value that is matching the name of the variable.

0:24 Now, I'm going to copy these 10 lines here and the base scope will be exactly the same values. Further down, the rainforest needs to take the rainforest colors. Finally, the last one needs the candy color.

0:39 I will try to save with the base color just to verify that our colors are being set by these. Yeah, you can see the candy now has the base color. When I change this to candy, it's going to take the correct candy color.

0:53 Obviously, there's a lot of repetition here, but we've done something great. We are reading the values from the themes object, which gets us one step closer to allow users to define their own themes object and pass it to the plugin. Then have the plugin read from that theme to generate the correct CSS variables and utility classes.

Convert Hex to RGB with JavaScript

0:00 Our plugin is going to continue growing going forward, so I went ahead and moved it to its own file. Looking at the tailwind.config file, you can see we're requiring this plugin file. At the bottom here, instead of defining the plugin, we pass the plugin that we've imported in this file.

0:15 If we look at the plugin file, there should be something bothering you at this point. We have a themes color in hex values. Then we define our colors as RGB separate channels, but we do it manually. We convert these manually. There is nothing that takes the values from these themes and then passes them there.

0:36 We can probably improve the situation here. First of all, the R, G, and B separate channels is not very common and kind of awkward. That would be much nicer if we could pass the colors as hex values. For example, if someone uses the Tailwind default colors imported from tailwindcss/colors, these would come as hex values.

0:53 Because we are now in JavaScript land, we can use a little JavaScript function that can take a hex value and do the transformation into the R, G, and B channels we want.

1:03 We could do this manually, but here I have provided a little helper function. This is a library by Sindre Sorhus called hex-rgb. I created this getRgbChannels function here that takes a hex value. It's going to grab the red, green and blue channels and return them as a string.

1:20 Your challenge here is to take all of these values here and replace them with this getRgbChannels function and grab them from the themes object instead. Once again, don't worry about code duplication and repetition. We'll sort that out later. For now, let's just focus on making the transformation from hex to RGB.

Currently, we hard-code the names of the themes in our calls to getRgbChannels. Let's refactor to iterate over the themes object instead.

We can use Object.entries to iterate over the theme object and call addBase with each theme so that we don’t have to manually set each variable.

Dynamically Adding Themes through Iteration

0:00 Here, we're going to use addBase function multiple times, once for each theme. If we look at our theme, we can see that it's an object that has multiple keys, base, rainforest, etc.

0:11 To be able to iterate over them, we're going to keep this root definition as is, but we want to close this addBase function here, and its role is going to just define the root scope variables, and then for our three theme scopes here, let's reopen another addBase just so the syntax is correct and things don't break.

0:31 Now instead of doing these three declarations manually, we're going to iterate over the themes object. Here outside of the addBase -- let me scroll up a bit -- I will go Object.entries and grab our themes. Then we can use a simple forEach loop here, and Object.entries will give us both the key and the values of the object. Essentially, we want to use an addBase function for each theme.

0:56 Here, we will copy the first CSS and JavaScript block and paste that here. Actually, before we continue, let's delete this one, because we want to make sure that we break things to fix them again later. Now everything is using the base color, which is what we're expecting. Let's try change the 500 to candy, and sure enough, that works.

1:17 We have access to the key, which is going to be base, rainforest, or candy, and then the value is going to be the object with the 50 to 900 shades.

1:25 First thing we want to change is here, the name of the theme. We'll want to do this dynamic, so I'll change this to a template string, and here, I can use interpolation to use the key. This is not valid JavaScript syntax. If you want a dynamic key in an object, you need to wrap it in square brackets as well like so.

1:47 Now we're generating the correct data, theme scopes, but we need to update the value to be the correct theme. Essentially, themes.base here can be replaced with the value, which is going to be one of these objects. Cross our fingers and save, and boom, everything is working again.

2:05 Once again, we're one step closer to accepting user-defined themes input. There's still hard-coded stuff in there, but we've just taken one step in the right direction.

Refactoring to Remove Hard-Coded Theme Names in Tailwind Plugin

0:00 I know I've said, "Do not worry about code duplication," but let's just do a little code refactoring before we keep going. We are reading the values of our theme's object here, but we still hard-code the name of the theme's base -- rainforest and candy. In this challenge we're going to keep the root CSS variable definition as is.

0:19 Then for our three theme scopes we're going to iterate over the theme's object. Use a bit of JavaScript to iterate over the three themes. There's a couple of hints in the code comments. Good luck!

We can consolidate our code concerns by moving the responsibility of extending the user's theme to the plugin itself.

Configure Tailwind to Extend Themes via Plugin

0:00 In the Tailwind config, I will cut the whole theme object. It's saved in my clipboard. I will hit save, which will break everything. In the plugin file, if I hover over the plugin function, you can see that it accepts a second argument, which is a config object. Our first argument is this function here that goes all the way to here. 

0:21 If I have a comma, this is where I can pass a config object. Our config is the whole Tailwind config object. I can paste the exact same theme extension that we were doing in the config file. When I hit save, everything will come back to place. With a simple copy-and-paste effort, we've done something significant here.

0:40 Our plugin file is doing all the wiring for our theming strategy. It defines CSS variables and extends the theme object. In our config, all we do is import the plugin and require it in our plugin's array. Everything is contained inside the plugin, which is a huge milestone. Our plugin is not completely dynamic yet, but it's self-contained. We can technically use it on another application right now.

Consolidating Code Concerns into a Tailwind Plugin

0:00 Our plugin is starting to look pretty good. Before we continue making it more dynamic, let's consolidate our code concerns in one place. Right now, we have our plugin file where we define the CSS variables for the root scope and the theme scopes.

0:13 Then inside the Tailwind config file, we extend the theme to create new utilities that consume those CSS variables. These two parts share the same concern and work together on the same thing. It turns out that we can offload the responsibility of extending the user's theme to the plugin itself.

0:30 Your task in this challenge is to find a way to get rid completely of the theme extension here so that all we do in the config file is require the plugin and instead find a way to extend the theme from within the plugin definition.

Our goal is to replace the indigo brand color of a real calendar app with our primary themable color using our plugin.

Let's improve the design and functionality of our calendar application by integrating the multi-theme component we created.

Refactoring a Calendar App to Use the multi-theme Component

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.

Testing The Multi-Theme Plugin by Replacing the Site-Wide Color in a Calendar App

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.

Let's write a helper function that takes a theme object as an input and outputs the correct CSS in JavaScript syntax object, even for nested data.

We can dynamically create CSS variables by writing a recursive function that builds kebab case variable names from nested theme objects.

Create CSS Variables from Theme Objects with Recursion

0:00 To help us write our function, let's console.log the returned output in the terminal. Down here is our function definition, and then inside the addBase here, let's add a console.log that says CSS vars definition, and then consumes that function, so getCssVariableDeclarations, and as the input, we will pass our themes.base. 

0:24 You can see currently, it logs an empty object because this is the default output. That should help us construct the correct output that we're looking for.

0:33 The approach I'm going to use is one of many. This is JavaScript, and you can do all sorts of different approaches. I'm going to use a forEach loop and then do a little bit of recursion inside of it.

0:44 The first thing I want to do is do Object.entries, and instead of grabbing our themes, we're going to grab the inputs, which is passed to this function. Then forEach, again, we're going to have a key and a value here.

0:57 Here, we're essentially at a crossroad where if the value is a string, we want to output a CSS variable for that string, but if it's not, if it's a nested object, we want to recursively call the same function again with a different input.

1:11 If we're here and the value is a string, a hex color, we can create the CSS variable for this, but if we're here and the value is actually a whole object, we need to call the function again. Let's try the if statement, if typeof value is not a string, we're going to call the same function, getCssVariableDeclaration, but this time, the input will be the value, and we'll also pass the output.

1:39 Otherwise, if it is a string, what we can do is take our initially empty output object and add a dynamic key to it, which will be -- for the CSS variable prefix. It's not going to work just yet, but let's pass the key here, and for now, let's set the value of that property to the value, which is a string.

2:00 We've got a start. We've got a series of variable names. They're obviously wrong, and the value is the hex value, but this is a pretty good start. Looking up here, you can see that we want the getRgbChannels output. We can fix that easily, getRgbChannels for that value. Very nice.

2:19 If you look, it goes from 50 to 900 and then jumps straight to color. Remember, if the value is not a string, we are calling the function again recursively. What happens is when we hit secondary, we call the function again, and again, and again, and eventually have this color name. That --color name is just the last part.

2:38 What we want to create is a segment which is a kebab-cased string of all the nested keys one after the other. We want this --color here to be -secondary-some-nested-color.

2:53 To do that, we need to keep track of the current segment or the current key, and so I'm going to add a new argument to the function here. Between the input and the output, we will have a path, which will be by default an empty array.

3:08 Now inside the forEach loop, I can start by updating the path so every time the function is called again, it has a new path, so const newPath = path.concat, and we will pass the key here. What this new path does here is take the path, which at the start is an empty array, and then adds the key inside of this array.

3:30 We'll collect the various nested keys inside this array, and then we'll join the array together to construct our kebab-cased variable name. Now if the type of value is not a string, and we call the function again, we will pass this newPath as the path.

3:46 This function will be called again, but the path here, instead of being an empty array, will be the first key. With that in place, we can replace here just the key, which was the last key in the object, with newPath. Because it's an array, we will .join it, and the delimiter between each element of the array will be a -.

4:07 As I hit save, I think we're going to nail the structure that we want. Three, two, one, boo. Look at this. We have our primary-50 to 900 colors, and then exactly as we wanted, we have secondary-some-nested-color.

4:24 Let me clear that output, and now look at this. I'm going to go in the theme.json file, and to show you that it works, I will add a hello, ffffff, and save this. You can see my primary-hello key added here. If the value wasn't a string but was an object, wow, it, really, works. I broke it, but I need to add a comma here, and now look at this, primary-hello-wow-it-really-works.

4:53 It looks like we've landed on a function that can generate CSS variables on the fly based on the input object shape. I will backpedal on my demonstration here, and we're now going to try to replace that addBase block with a function.

5:10 I'll remove the console.log here, and instead of a terminal output, we'll look at the UI once again. We are going to try to replace that CSS with our getCssVariableDeclarations function. Let's delete all the CSS variables inside of there, just to see that it should break the UI, and also delete these ones here. Now we have no more theme colors. It's pretty obvious.

5:33 Now, instead of this empty object here, I will call the getCssVariableDeclarations. Our input here will be themes.base for now. Check it out. It's successfully creating the CSS variable colors once again. Down here, instead of the empty object, we will call getCssVariableDeclarations one more time. This time, the input will be the value, and boom, everything is back into place. How cool is that?

6:05 One quick note here. We're still making the assumption that the first theme called base, which is not a given at all. Instead, here, I will use Object.values from our themes object, and then simply grab the first instance, which is, in our case, the base theme. Basically, the first theme that the user passes in the themes object will be used to generate the global CSS variables, and it still works.

6:31 Our plugin is becoming truly super powerful now. The next thing we need to do is dynamically generate the CSS utility classes generated by Tailwind.

Dynamically Generate Colors From Nested Theme Objects

0:00 We're going to make our plugin seriously dynamic now and even support nested color themes object. In preparation for that, I've done a tiny change to the plugin. Let me show you that real quick.

0:10 Here's our plugin file on the left, and instead of defining the themes directly in it, we are now importing a themes.json file. We can see that file on the right, and it's slightly more complex than before.

0:20 We still have our base, rainforest, and candy themes, but as you can see, there's nested properties like primary, and then secondary, and even inside secondary, we have some, nested, color. The idea is we're going to write some codes that can support this nested structure. Let me show you the changes I've made to the plugin real quick.

0:38 Because we now have inside the base a nested primary key for our 50 to 900 colors, I have added here in the addBase declaration, themes.base.primary. It used to be just themes.base '50' , but now we added this nested primary key. I've done the same here for the themes scopes. I've added value.primary. Everything else is exactly the same as it used to be.

1:02 If I scroll back up here, your job for this challenge is to write a helper function that takes the theme object as an input and then outputs the correct CSS-in-JS object. I've created this getCssVariableDeclarations function here that takes an input and an output. Essentially, what we're expecting is the return output looks something like this primary-50 getRgbChannels with the color that matches.

1:29 Then for nested values like this color here, we have this kebab-cased variable name, second-some-nested-color, and it represents the correct color.

1:41 If you manage to create this function correctly, you can then use it here and replace these hard-coded variables. You would replace this entire object for the root scope with this getCssVariableDeclarations function call.

1:57 This is obviously JavaScript knowledge rather than Tailwind-specific knowledge, but this is what will really help make the plugin reusable. If you can't figure it out, that's not the end of the world. Try for a bit and then skip ahead, watch the solution, and we can continue to the next step.

With help from a JavaScript function, we can create an object that replaces the hard-coded color shades in our multi-theme plugin.

Dynamically Define Theme Colors In Your Tailwind Config

0:01 Our code will have similarities to what we've done in the previous step, but it's also a little bit different. Here is the function we've created before, and underneath, we're going to work on the getColorUtilitiesWithCssVariableReferences here.

0:15 Just like earlier, we'll want to keep tab of a path which starts as an empty array. We don't need an output object here. We're not going to populate an object. Instead, we're going to return the object that we construct.

0:27 Once again, we go with Object.entries and grab our input, but instead of forEach, this time we will map over it and grab the key and value. Inside of there, we'll construct our newPath, path.concat key. If the typeof value is not a string, we're going to want to call that function once again, where the input will be the value and the path will be the newPath.

0:56 Up to this point, you can see the code is quite similar, but now it's going to change. We're using .map, and we actually don't want to return an array. We want to return an object. We can use object from entries to wrap around our code to achieve that.

1:10 Up here, I will wrap the Object.entries inside an Object.fromEntries like so. We need to return this. Object.fromEntries expects an array with two things, so instead of just calling the function here, we're going to return an array which is a key value pair where the key is the current key, and the value is that function call.

1:37 Since we're returning the array, we don't need an L statement, because the code is going to stop execute here if the condition is met. In case that it is a string, what we want to return is an array where the key is the current key and the value, we want to achieve this syntax here, rgb with the CSS variable color composed with the alpha-value.

2:02 I will copy this and up here use back ticks and paste that here, and instead of the hard-coded CSS variable, this is where our newPath is going to come handy. We have kept track of where we are in the tree and we're going to output this with newPath. Remember it's an array, so .join with a - separator.

2:26 That was a lot. Let's actually try to console.log the result once again. Inside the addBase function here, I will console.log getColor, blah, blah, blah, lots of letters, and the input will be themes.base. Let's save that and let's make this a little bigger. What do we have?

2:48 We have this primary object, and then the keys with the correct syntax, and then this nested hierarchy, which seems to be exactly what we want. Moment of truth, let's try and replace the hard-coded theme extension with our new function that should generate the correct utility class sets.

3:07 Let's start by deleting the entire colors object extension. Here, instead of the object, we're going to getColorUtilitiesWithCssVariableReferences. We only need to generate the first theme, so let's go themes.base and hit save. That's looking promising. Let's scroll down, primary-900, and look at this. Secondary-some-nested-color. It's working beautifully.

3:36 If I go into base theme from the JSON file, and here create even more nesting -- omg, yes, it, works -- and paste that up here, look at this. We are matching the CSS variables generated, and then the utility class names, and these two paths work together to create this theming strategy that now is super dynamic.

4:03 You can see the three colors are the same. The reason is this variable only exists in the first theme. One thing that is important with this approach is you need to take the first theme, which is base, and this is like the blueprint that should be matched by other themes, because otherwise, it's going to generate CSS variables based on the first theme that don't exist in the second one.

4:27 If I was to copy the secondary part of the base theme, and here in rainforest replace that and change the color to black, you can see that now it's updated properly.

4:39 I'll backpedal on the changes here, and just like we did before, we're here assuming that themes.base exists, and we should not do this. Instead, let's do Object.values and grab the themes, and then grab the first instance.

4:57 All right, take a deep breath. Maybe take a break. This was a big one. We have one more step to go.

Write a Function That Replaces Hard-Coded Theme Colors

0:00 Here's a pretty fancy bit of UI here that pulls from the Tailwind config file and outputs a color swatch for each theme-able color generated with the CSS variable. You are going to have to create a get-color utilities with CSS variable references function.

0:17 What you want to be able to do is output an object that will replace this hard-coded object. This is quite similar to the approach before. The code is a bit different, obviously, but the reasoning is the same. Good luck. Once again, if it's a little bit over your head, don't worry, struggle for a bit, and then come watch the solution.

We’ll figure out how to pass options to a plugin so that users can provide their own themes to our plugin. 

The .withOptions method enables configuration options within our plugins, providing a more flexible experience for developers.


Enable and Validate Plugin Configuration Options

0:00 All right, let's do this. I'm going to explode my page by removing the themes import, and instead in the config file, this is where I'm going to import the themes, const themes = require, and we'll grab the themes.json file.

0:18 Here where I register the plugin, I can actually call it as a function and pass an options object where we will have colorThemes -- let's call it that -- which is themes.

0:29 This is still not working, obviously, but now, we're going to modify our plugin to accept options and read from that color themes option that we've just passed. Let's get rid of that comment here, and we'll pass our helper functions into the plugin definition down here.

0:46 The plugin function also has the plugin.withOptions API. If you look at the signature, it's fairly similar, except both arguments accept a function which gives you the options inside of it. The first part and the second part of our plugin functions need to be wrapped in another function where you receive the options.

1:07 I'm going to move all the first argument inside there and return it, and we move the comma down one level. Then the second argument, which is our config object, also needs to be wrapped in a function that receives the options. I will move the config object and return it.

1:28 You can see themes is still not defined, because we're receiving the options but we're actually not doing anything with this. Before we can use the themes here, we want to try and grab it from the options. Remember, we have named our option colorThemes. Let's try this.

1:47 Const colorThemes = options. We're hoping that this colorThemes object gives us what we want so we can replace themes in two places. You can see it's still complaining about themes not defined.

2:01 This is because here, we are in the first function wrapper, but there's another one down here where we need to do the same thing, const colorThemes = options, and replace the reference to themes to colorThemes. Boom. It's working again.

2:19 We're not done yet though, because we're passing the colorThemes option, but here, we can assume that this is going to exist in two places. If it was accidentally called colorTheme, everything will explode, or if no options was passed, the same.

2:35 We could do a check like if we don't have colorThemes, throw new error and here paste a message like the multi-theme plugin expects a colorThemes option passed to it. You also need to check that there is at least one themes object, because here, we're referencing the first object. We will need to add this to the check and then do it a second time down here.

2:58 I think what we can do -- let me remove that -- is create another little helper function here, check for valid color themes input. I'll paste some code here and explain what it does.

3:11 We have a checkForValidColorThemesInput function, and it checks that the type of input is an object. It also checks that there is at least one object inside which is of type object. Essentially, it checks that we have a colorThemes object with at least one object inside of it.

3:31 If it's not valid, it's going to throw this error saying that it expects a colorThemes option passed to it, which must contain at least one theme object.

3:40 Now we can go where we grab our colorThemes option, and checkForValidColorThemesInput, and pass our colorThemes object, which is going to make it throw the error here. I will paste that same line down here after we do the second check.

3:57 That gives us a much more robust approach now. You can see that we have this meaningful message, because we're currently not passing a colorThemes object. If I fix it to colorThemes, it will now work, but let's pass an empty object, which means that it doesn't have a nested object inside of it. Again, we're going to have the same problem.

4:22 With all that, our plugin is slowly but surely reaching its final form. Let's recap everything we've done.

4:28 We've defined helper functions to get R, G, B channels to generate CSS variables, generate utility classes, and validate the correct input from the theme object.

4:39 Then in our plugin, we use plugin.withOptions, which lets us grab the colorThemes options passed to the plugin. We check that it's valid, and if it is, we can add the root scope CSS variable and the themes scope CSS variables.

4:55 Once we've done that, we also grab the colorThemes option from the second argument and we check that it's valid. If it is, we extend the Tailwind config theme object with our getColorUtilitiesWithCssVariableReferences, where we grab the first object in the theme options.

5:16 This is really nice because anyone can use this plugin and register the plugin in their config file, pass their own themes object, and this will take care of generating all the CSS variables and the custom utility classes for everything to work.

Determine How to Pass Options to a Plugin

0:00 There's one last thing that is hard-coded in our plugin. It's the way we're passing the themes to the plugin. I'm in the plugin file. We're currently importing the themes inside this plugin. Then we're doing our magic dynamic stuff with it.

0:13 If you think about it, as a user, you'd want to use that plugin and pass your own themes object. That's exactly what we're going to do now. We're going to move the themes outside of the plugin. Then in the Tailwind config file where we call the plugin, we're going to pass the themes object as an option.

0:29 Your challenge here is to get rid of this import. That's obviously going to break everything. Instead, you want to pass the themes to the plugin here, where you register it. Have a look at the Tailwind CSS docs for a way to pass options to a plugin. Good luck.

Great job! You've finished the multi-theme strategy module. Tailwind plugin API has so much more to offer. Keep exploring the possibilities of theming.

Next Steps for Theming Tailwind CSS Apps

0:00 You've completed the multi-theme strategy module. Congratulations. We're only just scratching the surface of what you can do with the Tailwind plugin API, or even with the theming strategy. What would you do next with this plugin?

0:11 Here's some food for thoughts. Right now, we're only changing theme colors. Perhaps, you could implement theming tokens for border-radius, shadows, font families. The approach for that would be very similar to what we have done.

0:23 You'd create CSS variables that holds the values you'd need for each theme. You do that at the root scope, and then the theme scope. Then you'd extend the Tailwind config theme object with utilities that consume those variables.

0:36 You can use your new superpower of combining CSS variables with the Tailwind plugin API to achieve just about any theming customizations you can think of.

0:46 I hope you enjoyed this module. Thank you so much for your support. I will see you around the Internet or, hopefully, maybe in real life one day. Have a great day.

Transcript

Intro to the Multi-Theme Strategy Workshop

Transcript