fkhadra / fkhadra/react-toastify
A new theme respecting `@media(preferes-color-scheme: dark)`
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
**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
Contributor guide
Research direction
The issue names no files, tests, or entry points; start by locating the theme handling and existing light and dark theme styles in the repository. Check how the theme attribute is resolved, then verify that an automatic option follows the user's prefers-color-scheme setting while an explicit theme still takes precedence.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100