Possibility to link to a story with dark theme set

[Meemaw]

Is it possible to somehow link to a story that would have dark mode predefined? e.g via some kind of query parameter.

[d9k]

Excerpt from my notes:

• :mag_right: storybook Mantine dark mode
• :horse_racing: Test Dark Mode with Storybook | chromaticui | YT Shorts
  • :tv: Theme your Web Apps like a PRO | Dark Mode in Storybook | Chromatic | YT
  • :newspaper: How to add a theme switcher to Storybook
  • :sparkles: story wrapper to add light/dark mode selection with ability to show both
  • :balloon: Mealdrop Storybook Demo
    • GH

I think, yes,

1. you can add global control to .storybook/preview.ts: globalTypes which adds URL parameter when you click the switch (all custom global controls changes URL params).

See :balloon: demo with such control having &globals=theme:dark in URL

2. Then you can write custom global storybook decorator to .storybook/preview.ts: decorators with useEffect which will emit storybook-dark-mode action to sync dark state with your custom storybook global control value (see README):

import { useDarkMode } from 'storybook-dark-mode';

// . . .
decorators: [
  (Story, context) => {
   // if we added "theme" global variable earlier
   const theme = context.globals.theme;
   const darkMode = useDarkMode();

    useEffect(() => {
      const darkModeFromTheme = theme === 'dark';
      if (darkModeFromTheme != darkMode) {
        channel.emit(UPDATE_DARK_MODE_EVENT_NAME);
      }
    }, [theme]);

    return <Story />;
  },

  // ...rest decorators
]

(didn't test the snippet, just an idea. If you will succeed please share working code :slightly_smiling_face:)