Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

---
title: Set Storybook Themes With Decorator Global Values and Parameters
slug: switching-themes-with-globals-and-parameters
description: Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.
privateVideoUrl: https://fullstack.wistia.com/medias/n0j0qqb3p4
isPublicLesson: false
---

In the [previous lesson](./decorators-theme-support/), we created a decorator to add theme support to Storybook. Although it's working well, in order to switch the themes (e.g. from light to dark), we need to make code changes which aren't that great.

Storybook decorators not only have access to the story element, but also to the story context. The [context](https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking) is an object that contains a lot of useful information about a story, including globals and parameters. With that information, we can improve the `withTheme` decorator we created, allowing users to change the theme directly in the Storybook interface.

### Creating our custom toolbar with addon-toolbars

Storybook addon-essentials includes an addon called addon-toolbars, and that addon allows you to create a new item in Storybook's toolbar that defines global values which can be changed from there, so you have an experience similar to the other addons such as backgrounds and viewport. 

In order to create a toolbar item of our own, we can follow the documentation [here](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation) and export a `globalTypes` object in `.storybook/preview.tsx`:

```tsx
// .storybook/preview.tsx

// ... the rest of the code here

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values or MenuItem shape (see below)
      items: ['light', 'dark'],
      // Property that specifies if the name of the item will be displayed
      showName: true,
    },
  },
}
```

Now when checking Storybook, we see that there is a new button in the toolbar:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/toolbar-not-working.gif)

As we interact with it, nothing really happens. That makes sense, as we didn't wire our decorator to use those global values! Let's do that.

### Setting themes via globals

Let's open `.storybook/decorators.tsx` and check our `withTheme` decorator:

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.