UI: Update theme switcher to use toggle button for two themes

[ivoilic]

What I did

Updates the theme switcher in the themes addon to use a toggle button rather than a tooltip dropdown when there are only two themes. I also removed an extraneous margin from the copy within both styles of theme switcher.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Add the themes addon to a sandbox
2. Set it up with two themes
3. Clicking the theme switcher should toggle the theme and copy of the switcher itself

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for 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:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[JReinhold]

@ivoilic can you share a screenshot of before and after?

@cdedreuille I'd like your input on this design choice.

[ivoilic]

@JReinhold Here are GIFs showing the before and after:

Again this would only apply when there are only exactly two themes.
The extra whitespace you see in the after is the existing margin I removed.

[JReinhold]

Thanks for this.

Overall I think this is an improvement over the current design, yet I'm not sure if it's the best UI we can achieve. Toggle buttons usually show both labels at the same time and not just the active one. But I also understand that would make it take up quite a large area..

[ivoilic]

JReinhold, I see your point but yeah there isn't really room also it would be a large deviation from the UI that exists for more than two themes. It's not like this a toggle that has serious consequences if toggled, it could just as easily be un-toggled. If a more fitting UI element makes its way into the design system in the future this component could always be updated. The benefit of not needing to click and then search for the correct option and click again will be huge for users like me who toggle between themes constantly for comparisons.

[cdedreuille]

I like this idea. I see your concerns @JReinhold but I think this improvement could be a good first step. I would love to explore a version that looks better visually soon perhaps with improved icons for light and dark themes, ...

@JReinhold On my side I'm happy to merge this one as it is. Looks good to me.