Favicon that adjusts to the OS theme

[AmirTugi]

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

I have 2 favicons - 1 is white which suits dark theme OS, and 1 is black that suits light theme OS.

There are some ways to decide which favicon to use (as can be seen here).
I tried to use the link element which is the simplest and leanest solution.
However, it didn't work. The dark theme worked well, but the light theme favicon still used the dark-theme one.
I believe it's probably taking precedence and overriding the light theme favicon.

Describe the solution you'd like

I don't see any way in the storybook config to customize the favicon of the storybook, especially not per dark or light.
My initial suggestion was to add it to the storybook/theming, but the browser is not necessarily connected to the theme inside the storybook.

So i guess that I would expect to see it either in main.ts or preview.ts - probably more in preview.ts

And I would expect to be able to configure the favicon for both dark and light themes.
Something like this:

// preview.ts

export const preview = {
  parameters: {
    favicon: 'favicon.svg', // <-- the path to the asset in the public dir. This would be both for dark **and** light.
    // or
    favicon: { light: 'favicon-light.svg', dark: 'favicon-dark.svg' },
  },
};

Describe alternatives you've considered

I wanted to attach a javascript snippet that will manipulate the hard-coded favicon, but I couldn't see it in the code inspection of the storybook. Maybe it's filtered.

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

yes, I can

Additional context

No response