Customizing Storybook

[00:00:00]
>> I'm gonna show you a way that you can actually customize Storybook, the appearance of your storybook, to fit with your brand identity, which is really cool. If you're gonna publish this as your style guide, you can actually customize it so it looks like your brand. So I have on the website a lot of code snippets here.

[00:00:18]
I'm going to actually just copy and paste from here. These are different variables that you can use to change your font, the color of it. I've already done this just to save a little bit of time. But feel free to go in and play around with these different configurations.

[00:00:34]
The first thing that we need to do is just create one more file. So let's, in our storybook folder here, create a manager.js file. And we need to import our themes. So themes actually come built in with Storybook and they have different themes that you can use. Okay, so inside of manager.js, we're gonna import two things.

[00:00:55]
So import { addons }, first and foremost, from "@storybook/addons". And the second thing is import { themes } from "@storybook/theming". So once we've imported those couple of things, let's actually go ahead and pick a theme that we want to use. So let's addons.setConfig(). Takes an object. And we just want to set our theme.

[00:01:23]
So let's do themes.dark. Let's set a dark theme. Okay, and if we go back to our Storybook instance, you can see now that this is dark theme. If we change this to light, we have the light theme if I refresh. You can actually create a fully custom theme.

[00:01:38]
So let's do that really quickly. Inside of Storybook, you can create a new file. I'm just going to call it myTheme.js. And I've already typed all this out on the course website. I'm just gonna copy and paste in. There are a bunch of different settings. So you can go change the font, the colors, all that kind of stuff.

[00:01:56]
So I've saved this under my theme. And back inside manager, let's actually go ahead and import it. So I'm gonna import. Get rid of this. We're not gonna use the preconfigured themes. import myTheme from "./myTheme". And all we need to do is just set that here as our theme variable.

[00:02:19]
And if I go back, now you can see it's really pretty. So this is how you can kind of customize things. So feel free to take a look through all of these different arguments. You might not want hot pink for your brand, but if you do you've got the option.