[Feature] Possibility to define where the theme change button appears: (docs, canvas or both)

[dgateles]

Describe the feature

When using withThemeByDataAttribute, it happens to apply the theme also to the Docs (mdx), causing in some circumstances the examples to break (apply dark theme and the background remains light). Thinking about it, it would be interesting to be able to define where this theme will be applied and also the possibility of saying where the theme exchange button should appear.

[ShaunEvening]

Hey @dgateles 👋

This is more a bug with how specific the styling for the docs are, unfortunately. Docs are set up this way to maintain a fairly consistent markdown look and feel.

My concern with tying your component themes and documentation themes is that it puts the responsibility to provide all the styles for your docs too. This is why we render components in the preview iframe.

This is something that we need to figure out how to address at a higher level than this addon. However, you're certainly right that it's not a great experience!

As a workaround, i'd suggest adding a rule that targets the story container in the docs specifically like so:

/* When html has dark theme toggled, apply background color to .docs-story */
html[data-theme="dark"] .docs-story {
   background-color: #222222
}