描述bug
我有一个hosted storybook site,它只显示文档页面，我希望整个网站(侧边栏、预览等)都能根据用户的系统设置(浅色/深色模式)来显示。在Storybook Theming页面上，有一个视频指出，您可以在自定义主题中使用themes.normal(来自@storybook/theming包),以便尊重用户的系统设置(浅色/深色模式)。这在我自定义主题(在manager.js中)中运行良好，但对我的文档页面内容不起作用。
从同一个Theming页面：它说，您可以通过将以下内容放入preview.js来主题化文档页面：

parameters: {
    docs: {
        theme: themes.dark,
    },
},

这运行良好，但我想尊重用户的系统设置，所以我尝试再次使用themes.normal,这次它不起作用 - 它总是显示浅色主题。您可以在此处看到实际操作：https://intl-tel-input.com/storybook
是否有办法让文档预览面板尊重用户的系统设置？
我找到了两个相关的插件：
https://storybook.js.org/addons/storybook-dark-mode
https://storybook.js.org/addons/@storybook/addon-themes
但是它们似乎都关注于给用户手动切换主题的能力，而这不是我想要的 - 我只想让它自动尊重用户的系统设置。

// manager.js
import { addons } from '@storybook/manager-api';
import { themes, create } from '@storybook/theming';

const customTheme = create({
  base: themes.normal,
  brandTitle: 'IntlTelInput Storybook',
  brandUrl: 'https://intl-tel-input.com',
  brandImage: 'https://intl-tel-input.com/img/logo.png',
  brandTarget: '_self',
});

addons.setConfig({
  showToolbar: false,
  showPanel: false,
  theme: customTheme,
});

// preview.js
import { themes } from '@storybook/theming';

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    docs: {
      theme: themes.default,
    },
  },
};

export default preview;

复现链接

https://stackblitz.com/edit/github-ctbu1e?file=.storybook%2Fpreview.js

复现步骤

在您的preview.js中放入以下内容：

parameters: {
    docs: {
        theme: themes.normal,
    },
},

我原以为这会尊重用户的系统设置(浅色/深色模式),但它始终使用浅色模式。

系统

Storybook Environment Info:

  System:
    OS: macOS 13.6.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm <----- active
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8.2.5 => 8.2.5 
    @storybook/addon-interactions: ^8.2.5 => 8.2.5 
    @storybook/addon-links: ^8.2.5 => 8.2.5 
    @storybook/addon-mdx-gfm: ^8.2.5 => 8.2.5 
    @storybook/blocks: ^8.2.5 => 8.2.5 
    @storybook/manager-api: ^8.2.5 => 8.2.5 
    @storybook/react: ^8.2.5 => 8.2.5 
    @storybook/react-vite: ^8.2.5 => 8.2.5 
    @storybook/test: ^8.2.5 => 8.2.5 
    @storybook/theming: ^8.2.5 => 8.2.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.2.5 => 8.2.5 
    storybook-addon-deep-controls: ^0.6.2 => 0.6.2

附加上下文

• 无响应*