How to Customize the Storybook React Theme for Your Brand

[00:00 - 00:12] In a previous lesson, we learned about main and preview files, the most important configuration files of Storybook. We saw how the main file relates to the Storybook server configurations, and the preview relates to how stories are rendered.

[00:13 - 00:19] There is also another configuration file that is not very well known, but can bring very interesting value to your Storybook's UI. It's called the manager.

[00:20 - 00:27] So let's understand a bit more about Storybook and see what manager actually means. So Storybook is essentially just a React application.

[00:28 - 00:40] The pink region over here is what we call the manager, and that communicates with an internal layer called the preview iframe, which renders your stories in isolation. And Storybook has a few options to allow us to customize the manager.

[00:41 - 00:54] In the official documentation of Storybook, it says that to control the layout of Storybook's UI, you can use addons.sect config in your Storybook/manager.js file. A manager files something new that we don't have yet, so we might need to create it.

[00:55 - 01:09] And in this file, you can actually set a lot of interesting things, such as you might not want to show the add-on spin-out, you maybe want to change its position, enable or disable shortcuts, and a bunch of other stuff. The most interesting aspect of this for this lesson is the theming.

[01:10 - 01:19] So if you see at the bottom, it provides you an overview of the theme, saying that you can change the look and view of Storybook, but you have to go to the next section. So we click over here.

[01:20 - 01:31] And it tells us that we can change the theming of Storybook by using the manager.js file and configure it to use the dark mode instead. So let's go ahead and create the manager file, but in TypeScript instead.

[01:32 - 01:48] And let's just copy this over here, so we can set the dark theme directly by passing the themes from Storybook theming. And because we're introducing the manager file for the first time, we have to kill Storybook and run it again.

[01:49 - 01:53] Now we see Storybook in a completely different UI. Dark mode looks pretty cool.

[01:54 - 02:07] Maybe not for some of the buttons because they have a transparent background, but still it looks really incredible and it's pretty cool for us to see how we can change the Storybook's UI. But what if we want to further configure a Storybook so that it actually matches our brand?

[02:08 - 02:20] Well, looking at the theming section, if you scroll down a bit more, you will see that there is a bunch of other information. In fact, at the bottom, you see you can even further improve the styling by changing all kinds of different properties.

[02:21 - 02:32] So as an exercise, I'm going to change the configuration in manager.js to actually match the brand from new line. And because it's a bit of a code, so I'm just going to paste it right here and explain from there.

[02:33 - 02:40] So over here, we are calling a create function from Storybook theming. So instead of importing the theme presets, we import the create function.

[02:41 - 02:46] And we set that the base of our theme is going to be light. You could change this to dark if you wanted, for instance.

[02:47 - 02:58] And then we have access to the secondary color, to the background of the app, to the border radius, to the font styles and all kinds of things. And most importantly, at the bottom, we can change the title of our Storybook.

[02:59 - 03:04] We can change the URL of which when you click on the logo, it will be pointed to that URL. And you can also change the logo image.

[03:05 - 03:11] And by passing the theme, we have pretty much everything we need. So now we have to go back to Storybook and refresh to see the new UI.

[03:12 - 03:16] And there you go. Our Storybook is looking pretty good and matching with the brand of new line.

[03:17 - 03:19] We have different colors. We have a new logo.

[03:20 - 03:26] If we click on the logo, we will be redirected to the website. And now it might feel much more familiar when using Storybook.

[03:27 - 03:37] So this is pretty interesting if you're working at a company and you want the developers and designers and everybody else to feel more comfortable using your Storybooks. And finally, we can add a five icon to our Storybook.

[03:38 - 03:47] And to do so, we need a way to add a link tag to the hand element of the Story book app. And you can do so by creating a file called manager head HTML in the Storybook configuration folder.

[03:48 - 03:57] And the HTML you add into that file will be injected to the hand tag of the Storybook app. The same concept applies for preview in case you have a preview head HTML file.

[03:58 - 04:08] It will also be injected together with the component. And in order to add a five icon, all we have to do is to add a link tag with the relationship of type icon with the icon of your choosing.

[04:09 - 04:16] And one last time, we need to kill Storybook and run it again. And finally, we have the five icon over here as well.

[04:17 - 04:23] Maybe this is interesting because then you can easily find this under your tabs or maybe not. Maybe you want to keep the Storybook one because it's easier to find.

[04:24 - 04:37] But anyway, this is the way to configure Storybooks UI to make it look a bit more familiar to your peers. And if you're customizing your own Storybook, make sure to share it in the Discord community so that everybody can see how cool it looks like. I'll see you in the next one.