FusionAuth’s Post

Transcript

From the Fusion of dashboard, you can now go to customizations and Themes. Within themes, you'll see Fusion Auth and Fusion Auth Simple. These two themes are both of the advanced and the simple versions of Fusion. That's current default theme which is read only. What we want to go to is this simple theme addition button. You can always hit the drop down and do advanced theme as well. Now, what I'm looking at here is a way to customize our prebuilt theme. You can select from classic, dark, or light. I personally really like our light mode, so I'm going to leave it there and then I'm going to click on styles within the color section. You can always paste a hex code that you already know that your application needs. For instance, I want to update the button here. Instead of being orange, I want more of like a purple. So I'm going to click on the color selector here. I'm going to get into the purple range and kind of put a light purple. Like that? Yeah, I enjoy that. So that's how you can update a color very easily. For now, we'll keep this simple. I'm going to click Save, and then I'll show you how to attach it to your instance. Now that I've saved Alex's custom theme, I'm going to go into my tenant. Within the tenant screen, I'm going to select Edit for our default tenant. Once I'm in here, under the General tab, there is Theme. Instead of Fusion Off, I'm going to select Alex's custom theme. I'm going to go ahead and save that. Now. Once I've saved that, I can actually click logout. Now you'll see that the purple button has shown U and the new format. So we're going to try a theme from one of our current customers Steel. Let's go ahead and create a new simple theme. I'm going to leave it classic. I think it'll fit their brand a little bit better. So if I take a look out here, I'm going to go ahead and snag the first thing is their image. I want to get their logo, so I'm going to go ahead and put that in. And make sure to click on. I like that it looks a little too big for me, so I'm going to bring that down just a smidge. The background image that they have is really cool too. So on their background image, I'm going to open that U and copy it. Let's put that in not perfect. And I don't want to repeat it, so I want to cover it instead. So that looks great as it's covered. It looks pretty close to there so far, so looking pretty good. Let's go ahead and update some of the styles. Now one of the styles that I want to do. I love seeing power. If you're not down here, but we'll turn it off for them and then they're colors instead of the current button that the way they have it. Great. Now we have a new button, that button for the. Primary button text looks good as whites. What doesn't look so great is the key that's on it. So let's change that icon to white. So you probably will notice that that has impacted some other things. So let's go ahead and update our other alerts as well. So the alert background, let's update that to this. So this looks great. I'm going to go ahead and save this and show you what it would look like logging in with Steel. So as you can see here, Steel's custom theme, we need to set that as our tenants current theme. So once again, we go back into tenants in our default tenant, we can go ahead and click edit. Inside of our default tenant, we're not going to use Alexis, we're going to use steals. We'll save that and once again, I'm just going to click logout. And look at that, we're already seeing it. It looks great to me. I really enjoy the set for this simple theme. Obviously you can go back in and do everything you have in here as an advanced theme to.