Skip to content

Create Storybook add-on for switching VSCode themes#1627

Merged
koesie10 merged 1 commit intomainfrom
koesie10/storybook-vscode-theme-addon
Oct 21, 2022
Merged

Create Storybook add-on for switching VSCode themes#1627
koesie10 merged 1 commit intomainfrom
koesie10/storybook-vscode-theme-addon

Conversation

@koesie10
Copy link
Copy Markdown
Member

This adds a Storybook add-on that allows you to switch between VSCode theme. It follows the pattern of the outline and backgrounds add-ons.

Unfortunately, it doesn't apply the CSS to just the elements it should be applied to, but globally to the complete preview. This is a limitation of using CSS files rather than setting inline styles on the elements. We might be able to resolve this in the future by extracting the CSS variables from the CSS files, but this is somewhat more involved.

Checklist

  • CHANGELOG.md has been updated to incorporate all user visible changes made by this pull request.
  • Issues have been created for any UI or other user-facing changes made by this pull request.
  • [Maintainers only] If this pull request makes user-facing changes that require documentation changes, open a corresponding docs pull request in the github/codeql repo and add the ready-for-doc-review label there.

This adds a Storybook add-on that allows you to switch between VSCode
theme. It follows the pattern of the [outline](https://github.com/storybookjs/storybook/tree/v6.5.12/addons/outline/src)
and [backgrounds](https://github.com/storybookjs/storybook/tree/v6.5.12/addons/backgrounds)
add-ons.

Unfortunately, it doesn't apply the CSS to just the elements it should
be applied to, but globally to the complete preview. This is a limitation
of using CSS files rather than setting inline styles on the elements. We
might be able to resolve this in the future by extracting the CSS
variables from the CSS files, but this is somewhat more involved.
@koesie10 koesie10 requested a review from a team October 19, 2022 09:05
@koesie10 koesie10 requested a review from a team as a code owner October 19, 2022 09:05
Base automatically changed from koesie10/vscode-light-theme to main October 19, 2022 15:15
Copy link
Copy Markdown
Contributor

@charisk charisk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good and works! Thank you for doing this!

@koesie10 koesie10 merged commit 9ba06ef into main Oct 21, 2022
@koesie10 koesie10 deleted the koesie10/storybook-vscode-theme-addon branch October 21, 2022 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants