Learn how to use HubSpot's alternate names attribute to map theme styles like colors and fonts to external modules. The tutorial walks through code examples showing how to make modules respect theme settings for consistent styling across your site.
Hey there. Have you ever found yourself using a theme and feeling like it's missing a couple of modules to really make it complete? We've all been there. Adding modules to a theme is usually a breeze, just a simple drag and drop. But here's the catch. The new modules don't always respect the theme settings you've applied. Picture this. You add a module expecting the theme colors and fonts to seamlessly blend in. But nope, they don't. Now, if you only use one module in one place, not a huge problem. But what if you have multiple instances of that module scattered all over your website? What if you have multiple modules in different spots? Fret not, my friend. We've come up with a solution, introducing a brand new attribute called alternate names. This nifty little feature allows you to map specific styles from your theme to the module you're developing. We're talking primary colors, secondary colors, heading fonts, and body fonts. Now, here's the deal. Themes need to play along too. It has to either use the correct naming convention, or if it's not quite there yet, use the alternate name attribute. And hey, if you're using our latest theme boilerplate, we've already got you covered. You'll find links to the documentation in the description below. And now let's check out an example and do some code. Okay, I'm in my browser here and I have three tabs, page editor with nothing on it, theme settings. And I had the primary color pulled up so we can see how that works. And a preview with zero on it as well. Going back into the page editor, I've created two modules, not themable and a themable pulse module. And I will let you guess which does what. So moving on, drag that one in here. You can see, see that this is a style that it has here. All everything's matching the pink here and this tealish color here. Moving back over, let's add that themeable one and you'll see initially it's exactly the same, but if you give it a second, it is going to pull in the colors and styles of the of the theme settings we have set right here. And it's going to just refresh that so we can see the preview. It's all good there. If I just prove this is really working. Let's change the primary color to yellow and the secondary color to this color here. And publish, publish, preview. And what a bing. What a bang. There you go. Our theme below actually is updating. Now, keep in mind this cascade, just like css, it stops, starts from the top down. So starts with the theme settings and if you don't like what you see there, you're going to go back over into your page editor, into your styles and you can update this all right here. So let's do that and let's do that and you'll see now let's make it a little more clear. All right, so that's definitely different. If we go back over to preview tab, we will see that it also has changed. So that's how you do it. And now let's move on over and look at some code. Okay, we are in VS code. I've zoomed in, so hopefully you can see and you'll see that we have three directories here, the two modules sitting outside of the website theme directory. Let's just go straight into the theme directory and you'll see here that I have the fields JSON file opened up. And you'll notice that the name of the primary color is actually just primary, which does not adhere to our standardized naming convention. So we added the alternate names of primary color to it. And if you go through this, it's actually I pull this from the boilerplate, you'll see that the other ones do exactly the same thing. Okay, now let's move on over to our pulse THEMO module to demonstrate how this applies over there. And we're going to concentrate on the primary color for this one as well. So let's go over here and into the fields JSON file and you'll see that on line 47 I have it called FirstColor which does not align with our standardized naming convention. So we've added inherited value which accept an object this. You can either use both of these or one of these. I put them both in there because it's optional. Why not? And within that I pull in the theme primary color. And if you're going to use a property value paths, you have to use the dot notation. So for color obviously at dot dot color and opacity dot opacity. And moving on over into our HTML, I just added up here. Let's go and just uncomment all this stuff and you'll see that we have. Okay, you can reference it by just how you already had it. You don't have to change anything. All I have to do is that fields JSON and it should handle it there. You can also reference it by the primary color css. That's going to bring in the the hex color. And over here this is going to bring in the whole object where you can pull in from your dot notation, which I you'll see here that I did dot color and if I just go on over to save this, this and bring this up and let's refresh and you'll see here. Yeah, this is all that it brings in. But honestly, if you've already built your module, all you should have to do is just add that mapping in the JSON file and you should be good to go and everyone's going to be happy. That is using a theme and your module. Enjoy. Bye bye.
