Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dev: Add Storybook VS Code theme switcher #4134

Merged
merged 3 commits into from May 22, 2024

Conversation

toolmantim
Copy link
Contributor

@toolmantim toolmantim commented May 10, 2024

Adds a Storybook theme selector for testing how a UI looks across themes.

Test plan

  • CI

@toolmantim toolmantim changed the title Add a VS Code theme selector to Storybook dev: Add a VS Code theme selector to Storybook May 21, 2024
@toolmantim toolmantim changed the title dev: Add a VS Code theme selector to Storybook dev: Add Storybook VS Code theme switcher May 21, 2024
@toolmantim toolmantim requested review from sqs and a team May 21, 2024 04:54
@toolmantim toolmantim marked this pull request as ready for review May 21, 2024 04:54
Copy link
Member

@sqs sqs left a comment

Choose a reason for hiding this comment

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

Nice. Will be very excited to use this. Can you remove the codicon lines from the theme files to keep them shorter? Or just load the theme CSS from an external URL (like unpkg.com) so then we can have a bunch more and don't need to add them to the repo?

@toolmantim toolmantim force-pushed the tl/add-storybook-vscode-theme-selection branch from 39bd6cb to 787cf32 Compare May 21, 2024 05:17
@toolmantim
Copy link
Contributor Author

@sqs stripped the icons, though it's still fairly large. What are you thinking with unpkg? Publish this as it's own open source storybook add-on?

@sqs
Copy link
Member

sqs commented May 21, 2024

@toolmantim It's fine now.

As for unpkg, I mean using URLs like https://sqs.vscode-unpkg.net/sqs/vscode-sqs-theme/0.0.8/extension/sqs-dark.json to fetch theme JSON on-the-fly instead of committing it to the repo. Then we can support a lot more themes and to add one you just need to add its extension ID. The builtin VS Code themes are available at https://main.vscode-cdn.net/stable/dc96b837cf6bb4af9cd736aa3af08cf8279f7685/extensions/theme-defaults/themes/dark_vs.json etc. BTW I discovered this by looking in the devtools network tab at https://vscode.dev/.

@toolmantim
Copy link
Contributor Author

@sqs oh nice, good find! I guess one good thing about having a few in the repo is for airplane/offline hacking… but adding that JSON support in the future would be A+. I'll add a note as a comment.

@toolmantim toolmantim enabled auto-merge (squash) May 22, 2024 00:18
@toolmantim toolmantim merged commit d744c61 into main May 22, 2024
19 checks passed
@toolmantim toolmantim deleted the tl/add-storybook-vscode-theme-selection branch May 22, 2024 00:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants