Inline themes instead of toggling

[larsenwork]

Is your feature request related to a problem? Please describe.

Developers often forget to check dark mode and/or update dark mode styles since it's "hidden" behind a toggle.

Describe the solution you'd like

Assuming one has X amount of themes — e.g. 2 with light + dark: It'd be nice to not have themes as a toggle but basically render the story X times (X amount of iframes?)

So visually it'd look something like this (I guess it'd need two sb-preview-toolbars too):

Describe alternatives you've considered

Currently I'm doing this but it doesn't work for components that use portals to render such as e.g. modals

Also for fixed positioned items (such as modals too) they are displayed on top of each other.

export default ({
  decorators: [
    (Story) => (
      <div className="flex flex-col min-h-screen">
        <div className="bg-background text-textcolor p-4 grow">
          <Story />
        </div>
        <div className="dark bg-backgroundDark text-textcolorDark p-4 grow">
          <Story />
        </div>
      </div>
      // Portals are mounted here :(
    ),
  ],
}

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[RIP21]

Have a similar problem/idea, especially since a11y tests are running only against one theme, given theme addon is used. It's still possible to do visual tests against both themes in Chromatic, but not locally.