[RFC] Allow users to set a combination of light and dark themes

[MichaelArestad]

Status: in-review; championed by @MichaelArestad

Summary

A user can only set one theme to override the default themes and cannot declare a theme to use for dark mode. We should change theme declaration to explicitly set light and dark themes separately.

This was inspired by a recent discussion with @cdedreuille 🙌

Problem Statement

1. A user can only set one theme to override the default themes.
2. They cannot set just a dark theme or just a light theme
3. When a user sets the theme, Storybook no longer adapts to their operating system's preference for themes.

Implementation

I propose we change the theme declaration from one declaration to two:

addons.setConfig({
  themeLight: customLight,
  themeDark: customDark,
});

This would allow a user to explicitly set themes and when they should be used. It would also allow them to disable dark mode by doing something like this:

addons.setConfig({
  themeDark: theme.light,
});

Deliverables

1. Create new options to explicitly declare light and dark themes.
2. Deprecate theme. I leave it to y'all to work this out.

[cdedreuille]

Thanks a lot @MichaelArestad for putting this together. I would love to see this one work. I love to switch between dark and light mode but I also want to brand some of our Storybooks.

[danielleflinn]

Agreed! I'd love to see this happen! I'm currently waiting for this functionality to customize our Storybook with our branding since the current customization model only supports 1 theme, and I know we have designers/engineers where some prefer dark and some prefer light theme. 😃

[shilman]

This is a great idea. Would be extra-great if we could do it in a backwards-compatible way.

const theme = (isDarkMode ? config.themeDark : config.themeLight) || config.theme || defaultTheme

[cdedreuille]

Yes that's a nice idea.

[yannbf]

For context, this is currently possible to achieve with a code like this:

// .storybook/manager.js
const getPreferredColorScheme = () => {
  if (!globalThis || !globalThis.matchMedia) return 'light';

  const isDarkThemePreferred = globalThis.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;
  if (isDarkThemePreferred) return 'dark';

  return 'light';
};

addons.setConfig({
  theme: getPreferredColorScheme() === 'dark' ? darkTheme : lightTheme,
});

Demo: https://stackblitz.com/edit/github-xionxf?file=.storybook%2Fmanager.js&preset=node

[danielleflinn]

This worked for me, thanks for sharing!