 So I'm going to do some typing. I have to have my hands free. So I'm Tim Hansen. I work at Spotify. I've been working on backstage about six years now. So it's been a while. And I want to talk about theming backstage. So theming as in your own colors, your own component styles, your own fonts, if you like, things like that. And I think this is an important thing to do. So let me talk about it. So backstage fully supports theming. It's based on Material UI, which has extensive theming support. And the backstage React components also have theming support. There's a backstage theme package that exports some utilities to help you make themes. And there's a link on here. I can send out the slides as well. It's a backstage.io link where we have documentation on creating your own theme, which is kind of what I'll walk through today. So what can you customize with your backstage theme? Colors, of course. Fonts, typography. You can customize the logo. Some of the components you can override styles. Any of the backstage components that are provided as part of the backstage React front end as well. And the entity headers on the backstage pages. This last point maybe exaggerate a little bit. There are some practical limits. You can't do anything way too crazy, or you could, but it would have diminishing returns, I think. But at least doing a styling in your own company colors and such is pretty easy to achieve. So why should you theme backstage? I think first, brain consistency. I wouldn't undersell this point. Your developers are used to working on your products. And backstage should look like another one of your products. Developers will feel at home and feel comfortable if they're looking at something that feels familiar. And it can give your developers a sense of ownership, which I think is really important for a backstage installation. Because you want your developers to feel empowered to own the platform, to contribute to it, to make modifications. That's where backstage's power really comes in. So when your developers buy in to the instance and contribute. And I hope to prove to you, because it's easy. So let's pretend for a moment that I don't work for Spotify. I work for a big multinational company that's evaluating backstage. Let's call this company International Backstage Machines. I might get sued for this. Okay. So this company has a design system already called Carbon. That's very well thought out. It has colors. It has components. It has everything you would want from a design system. And also, oh my God, I'm going to present to the VP of engineering in 20 minutes. So I need to theme backstage in that time. Do you think we have time? Okay. I think so. Let's do it. It's going to do a live demo if I can find my mouse. Okay. So I have here a vanilla backstage app. All I've done is I've run create app to create the app. I've added some example entities. So we have something to look at. And I added our company logo in the SVG to the source code. So that's it. I'm really starting from scratch here. Like, damn, this procrastination. Okay. So the first thing we need to do is to create the theme and add it to the app. So I can go under packages app, source directory. So I created this theme directory. This is where I added the international backstage machines logo. And also in here is the app.tsx. So this is where you can add a theme. So there's the create app call here. And in addition to the routes, I can also add themes. Okay. So this is an array. Objects. So typescript will tell me what's missing here. I need an ID. Let's call it carbon theme. Title. Carbon. Okay. Variant. I think it'll actually be kind of a light theme, because that's what our company colors are. And then I need the theme provider. And what I want to put in here is a unified theme provider, which is something that Backstage provides for you in that Backstage theme package. Okay. So now this has one prop, which is theme. And I need to put in my carbon theme, which I haven't created yet. Okay. But I've added the theme to the app. So now let's go and create the theme. I'll use my theme directory. Just create an index file here. Okay. Let's see here. Hold on just a second. Lost my notes here. Okay. So I can use create unified theme. This comes from the Backstage theme package. And then I can put in, let's see, create base theme options. I don't think it is. Sorry, live coding here. Okay. And this takes a palette, just where you put your colors. And then I can just extend some intelligence that's getting in my way here. Okay. Create base theme options. And then I can pull in the palettes from the existing default themes. So I can just start with that. Now I can go back to my app where I had the theme set in there. Import that. Save it. Cool. I made a theme. It's not very exciting yet, but there it is. You can see carbon. I added it in there. Okay. Now we can start doing something interesting. So why don't we go and define some of the colors. So this palette object, you can put in colors that are supported by Material UI or by the Backstage color additions that we add in. So maybe we should go look at my carbon design system. So under here, there's color. And we have some tokens defined. So I can just steal from the design system here. All right. So default page background, for example. Something I might want to put in there. So background. Default is white. Now we can check. See that it got applied. Okay. Cool. Used to be kind of a gray. Now it's white. It's hard to tell at this point, but we're starting to make a theme. So then there's another background option that's called Paper. And this is kind of the surfaces that go on top of the default background and Backstage. So I can take a look. Let's see. I think we have layer one here. And this is kind of what we're looking for. Okay. And what else do we want to put in here? So there's some accent colors, field colors, borders. But text is interesting. So we can put in like default text colors. Let's see. Okay. Like text. Primary is one of the things I can put in there. Okay. Let's take that from the theme. And then I think there's some button colors down here we can put in too. So like button primary. I'll take this brand color. And then in material UI, they call it just primary as the primary color for buttons. So we'll do primary main. That's not the right color. There we go. Okay. So now we can go back. Yeah. I have a nice blue primary color. Cool. So we're getting somewhere. It's a little bit steady, right? Okay. And there's also primary dot dark. So this is like a hover color. So I can go back to my design system and maybe grab this primary active color. And we can put in secondary color as well. Same kind of pattern here. So we have button secondary. Take this color. And then we need a dark variant for that as well. Grab this one. Cool. All right. So we have some button colors. Let's see how it looks. Looks good so far. It's hard to tell the change, but we'll get there. All right. So the other thing we can do, I noticed the navigation over here could use a little styling. It's just the default backstage navigation. That's another thing you can put into the palette. So I can do navigation, background. Let's just say black. And what else do I need in here? Indicator color and selected color. Okay. That's my brand color. That looks good. Color. We can just say white for now. And selected color. Let's see what do I want to have in here. There's my theme file. Oops. Sorry about that. Okay. So maybe I'll do the color slightly faded and the selected color can be white. So we can go back up to the text here. So maybe something like, I don't know, this might be too dark, but we can try it out. Let's see how that looks. Looks pretty good. Did it get my... It's hard to see if it got the little indicator color on there. But let's go ahead and... So the next thing I want to do for this sidebar is I want to customize the logo. So let's take a look at that. So rather than being in the palette, that's actually in one of the components under the root in the app directory, there's logo full and logo icon. And these are kind of what shows when it's expanded versus collapsed. So I can go into logo full and it's got a big SVG in here. This is just like the default backstage logo that's in there. So I can grab my SVG from my logo file. I'll put it into logo full for start. Cool. And then we've got some classes in here that I need to add to it. Oops. There we go. Okay. Get back to the app. All right. So I've got my international backstage machines logo in there. But when it collapses, it goes back to the default backstage one. That's because I only customized the logo full so far. So why don't we go and change the other one too? So if we go to logo icon, I can paste in the same SVG, add in the class name again. So that doesn't look too great. We need to fix the logo a little bit on the collapse style. So maybe I can just change the width for now a little bit better. It's a little off center. So I'm just going to cheat for now and use a margin left negative 10. That should fix it for now. I can come back and clean this up later. Okay. So I've got some colors. I've got my logo in there. And now I've noticed that this backstage kind of wavy header up here doesn't really match the carbon headers, which are quite plain. They just have like a black background here. So why don't we go ahead and change that as well? So to do that, I can go back to my theme file. And in addition to the palette where I added all these custom colors, you can also add page themes. And this is basically for each type of page the backstage has. You can add a custom theme for the header, for example. So I might have like home and you could do surfaces or other types of components. And the backstage theme library gives you a gen page theme function. And this accepts basically colors, which is an array and shape, just kind of that wavy part that you want to have in there. And since I don't really want a shape, I can just put none in here. And then for colors, we could just start out with black because that's what the carbon theme has on there. Did I miss this page theme? Oh, I missed a comma there. There we go. This isn't right. Did I put it in the wrong section? Oh, yes. I think you need to move it up one. I'm missing something badly formatted here. Let's see. Create base theme options. That's right. Sorry. Live coding woes. There we go. OK. Page theme. No, that's not right either. Move it in the right place. I'm going to figure out what I've done wrong here. OK. So maybe move down here. That's not right either. Sorry. Technical difficulties. Let's get this back to our working state. I think it should be here. Page theme. Yeah. OK. I'm not missing out on here. This is right. Does anyone see my code issue? Let's see. Is that all right? Oh, yeah. That shouldn't be it. Thank you. Is this on? Yeah. Spread the operator on line 10, please. Line 10? Yes. Oh. My God. Thank you. I hope. Oh, and the entire thing is an object as well to create unified theme. I believe so. OK. Thank you. Patrick, my savior. All right. My God. OK. Sorry about that. I should have my notes handy. Now we have the black theme on the top. Cool. So now we have, now this sidebar next to the black on black doesn't look so good. So maybe we should change the colors on that a little bit, the navigation sidebar. So I think we can use this slightly lighter color. That looks pretty good. OK. Oh, no. Conference Wi-Fi. But the point is I can go to a service here. It carries the same theme that I have in the home for the header because it's using the default theme that I've defined. And I can add another page theme here if I want to have like service and customize how a service looks. So maybe I'll use the default brand color here for service headers and shape none OK. There we go. Cool. So now if I go to the home page, I have that black header. If I go to one of the services, I have a blue header with some errors that I couldn't get to GitHub from here. I mean, it's starting to look pretty good. So I guess the takeaway is, you know, in 10 or 20 minutes, you can put some brand colors on. You can change the headers. You can change the logo. It's pretty easy to do. So you can customize your backstage instance in just a short amount of time. And you can imagine we can go through this some more. We could do, you know, dropdown styling, text styling, that sort of thing. You can imagine taking this a bit further. I just wanted to show in a short time, you can achieve quite a bit and make your backstage instance look a lot more like what your developers are used to. So let's get back to the slides here. What did my slides go? There it is. Cool. Thanks for bearing with me. So like I said, there is a backstage.io tutorial that will take you through all this and show you how to theme this as well as icons, fonts, other things. And I wanted to showcase a few more themes because my theme was a little rushed, I have to admit, but we got something done. But companies with a bit more time than 20 minutes have worked on this and developed some great themes. So American Airlines, fairly famous backstage adopter. They call their backstage instance runway. They've applied brand colors, the logo. They have a custom getting started page with quick links for developers. Excellent Solutions is another great adopter that has applied their corporate colors and their logo. And they actually wrote a really great blog article that goes through how they did all their theming. So definitely check that out. Of course, Netflix is another famous backstage adopter who leveraged their Hawkins design system to totally customize the front end of backstage. So these are just some examples of how far you can take the theming if you want to. Yeah. And that's it. Thank you. All right. VPF engineering approved international backstage machines. Yes. That's what I wanted.