-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark scheme overlay #7052
Dark scheme overlay #7052
Conversation
No pressure, just pinging people to have an idea when I would start getting reviews and feedback! So, any idea? :) |
…rk-scheme-overlay
I'd vouch that we should only rely on
As @iansu has requested this not be exposed as a parameter, perhaps we could have a toggle button (a lightbulb?) on the overlay itself that sets a flag in local storage? For anyone who's impatient and desires a dirty brittle hack to force dark theme with this branch, at this point in time the following works for me when run from the root of a project that has already run
|
@Fabianopb thanks for this! I just realized that we are using hooks in this PR, and unfortunately we are still supporting older versions of React (< 16.8) at this time 😞. Would you be able to refactor so it doesn't rely on hooks?
I like this idea. We could do it in a follow-up PR so we don't hold up this one. |
Hey @ianschmitz it's been a long time! 😅 So yeah it's been a long time and I was trying to remember the reasoning for using hooks (despite of looking cleaner). At that time I probably noticed that React 16.8 was used here, so I thought it would be fine go on with useContext. I'm seeing now that React is a dev dependency in the error overlay package, so who dictates the version that the overlay uses, is that the app itself? Well, in that case there's no way around, luckily the I can't tell I'll do it very soon as I've been quite busy, but I can take a look within the next few weeks. |
@Fabianopb sorry yes you're absolutely correct. I overlooked that. We do bundle react in with the overlay bundle. So we're good to use hooks 😄 |
A W E S O M E |
Thanks for working on this! |
This PR introduces the dark theme for react-error-overlay!
The theme is inferred in browsers that support the media feature prefers-color-scheme to detect the preferred theme in the user's system. This feature is still cutting-edge and should be released soon in the most used browsers.
Some important notes about this solution:
useContext
).Tested with Chrome Canary and Firefox Nightly as both already support that. A few screenshots comparing the light and the dark themes:
Build error:
Runtime error:
Feedback is welcome!
Cheers!
Closes #6760