A new theme respecting @media(preferes-color-scheme: dark)

[tats-u]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

All of themes don't respect @media(preferes-color-scheme: dark). Toasts are too dazzling unless you pass theme="dark" if the other parts of your apps respect that media query.
You have to use useMediaQuery in mui or usehooks-ts to know which is the best theme, "light" or "dark".

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

A new theme shall be implemented using @media(preferes-color-scheme: dark). An user agent that prefers the dark mode, the style of theme="dark" shall be applied. Otherwise, that of theme="light" shall be applied.
It should be the default behavior unless you pass the value of the theme attribute.
I prefer "auto" as the name of the proposed theme.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All