Addon: Create @storybook/addon-themes

[ShaunEvening]

What changed

• Port theme switcher from styling addon into mono repo
• Write docs for addon in the essentials addon docs
• Match setup to other core addons
• Add theme addon to essentials package
• ???

How to test

• ???

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

[cdedreuille]

Fantastic job @integrayshaun. Something that would be great is to improve the gif for 7.0 as it still has the old tabs I believe. But not a blocker at all I believe. We can update that later.

[jonniebigodes]

@integrayshaun looking great. Left one starter item for you to look at for now. One thing, though, when you address my comment and before pushing the commit, can you run yarn pretty-docs so that we don't get any errors with the snippets?

Also, a couple of things:

• Don't forget to update the toc file to get it referenced in the documentation
• As this will be a part of essentials, the introduction page should also be updated to factor in this one.

Let me know once you've addressed the feedback, and we'll take it from there.
@cdedreuille good call on that, but don't worry, I can take care of it and align it with the rest of the videos/gifs we currently have. I'll follow up @integrayshaun on this.

[yannbf]

I assume this is not the screenshot you want to use?

[ShaunEvening]

No, Joao is going to help me out with an optimized video like we have for the other addons

[shilman]

Minor nits. Otherwise looking pretty good!

[valentinpalkovic]

The addon does not appear in the bar panel, when not explicitly mentioned in the addons section of main.ts. Shouldn't it be part of @storybook/addon-essentials?

[ShaunEvening]

@valentinpalkovic

Docs don't turn dark in dark mode
This is due to the specificity of the markdown css and the fact that peoples theme styles aren't likely to have rules for the css escape-hatch classes.

The toolbar item doesn't always appear
The toolbar item hides itself unless there are two or more themes registered with the decorator

[valentinpalkovic]

@integrayshaun there are two themes registered. As I said, it does not appear in the panel, if the addon is not explicitly mentioned in the addons array in main.ts. Shouldn't it also work with mentioning only @storybook/addon-essentials in the addons array?

[valentinpalkovic]

The docs limitation should be mentioned somewhere in the docs, if not already done.

[ShaunEvening]

@valentinpalkovic Weird! It definitely should show even in essentials 🤔 I'll try to test after my planning meeting here.

I'll add the docs limitation into the docs as well :) Thank you for testing 🙏

[valentinpalkovic]

You’re welcome :) tested it with next.js in combination with material ui theming

[kylegach]

Docs look good!

[valentinpalkovic]

LGTM!