Repository: storybook
Issue: [Bug]: themes.normal not working for docs pages
Labels: documentation,needs triage

### Describe the bug

I have a [hosted storybook site](https://intl-tel-input.com/storybook) which only shows docs pages, and I want the whole site (sidebar, preview etc) to all respect the user's system settings for light/dark mode.

On the [Storybook Theming](https://storybook.js.org/docs/configure/user-interface/theming) page, there is a video which states that you can use `themes.normal` (from @storybook/theming package) in your custom theme to respect the user's system setting for light/dark mode. This works fine in my custom theme (in manager.js), but not for my docs pages content.

From that same Theming page: it says you can theme docs pages by putting the following in preview.js:

```js
parameters: {
    docs: {
        theme: themes.dark,
    },
},
```

This works fine, but I want to respect the user's system settings, so I try using `themes.normal` again, this time it doesn't work - it just always shows the light theme. You can see this in action here: https://intl-tel-input.com/storybook

Is there a way to get the docs preview panel to respect the user's system settings?

I found two relevant addons:
https://storybook.js.org/addons/storybook-dark-mode
https://storybook.js.org/addons/@storybook/addon-themes

But they both seem to be concerned with giving the user the ability to manually toggle the theme, which is not what I want - I just want it to automatically respect the user's system settings.

```js
// 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,
});
```

```js
// 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;
```

### Reproduction link

https://stackblitz.com/edit/github-ctbu1e?file=.storybook%2Fpreview.js

### Reproduction steps

Put the following in your preview.js:

```js
parameters: {
    docs: {
        theme: themes.normal,
    },
},
```

I expected this to respect the user's system setting for light/dark mode, but it just always used light mode.

### System

```bash
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
```


### Additional context

_No response_