Dynamically Generate Colors From Nested Theme Objects
It’s time to make our plugin seriously dynamic, including the ability to support nested color theme objects!
In preparation for that, a tiny change has been made to the plugin. Instead of defining the themes directly in it, we are now importing a themes.json file:
const themes = require("
Transcript
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.