prisma
Dark Mode for Documentation: For the Love of all that is Good and Proper
Problem 👁🗡👁🗡
When I or one of the other Lizard People who live and work under rocks late, late into the evening need to read the documentation we have to have our retinas scorched when we go from our nice black background text editor to the fiery inferno of an all-white background.
Solution
A smattering of CSS, maybe a local storage toggle?
Alternatives
const = '🐶There are no alternatives, only Zuul...'
Yeah, there are extensions to force dark mode, but the code blocks always look funky and you lose all syntax highlighting, among other wonky stuff.
Additional context
It would really REALLY make the docs more pleasant to interact with for a significant portion of the community.
✌🏼, ~B
What is the desire for this from Prisma team and would there be any criteria, or "just make it look nice" would do?
Thank you @keepforever for your impassioned plea... seems you are not alone. 🖤 We are having internal chat about it, and taking a look at a few options. Thanks again!
@tanberry, awesome! One suggestion would be to go for a dark scheme that's got a charcole-ish background with light-gray text as opposed to a pure "white text on black". The light gray is a lot easier on folks (like myself) who have astigmatism.
Material UI's docs page does this nicely (red arrow).
Whereas "The React" white text is too white.
Please, my eyes. MY EYES!
EDIT: Came back in November, my eyes are still bleeding.
I can recommend using this browser extension, https://darkreader.org/ while waiting. It works really well and for all websites ✨
UserCSS (Chrome plugin) theme to make Prisma's documentation in dark mode in this gist.
Hopefully my poor color choices enrage the Prisma docs authors enough to make a better one!
I'd like to register my interest as well, I use a bunch of technologies and the vast majority of their doc sites support dark mode. E.g.
- MDN
- Node.js
- PostgreSQL
- React
- Tailwindcss
- Next.js
- Apollo
- aws-sdk
- github obviously
- my code editor
- etc. etc. etc..
But I always dread having to look something up on the Prisma docs for the reason OP mentioned. I spend many hours staring at a computer screen every day so it is a lot easier on the eyes to use everything in dark mode, but when opening the Prisma docs this happens every damn time...
@Baggiest Great library Costs you your retinas
No longer! We've got an initial beta-ish implementation.
Notes:
- This is a minimal solution. More work (themes, buttons, etc etc) is coming along.
- The Dark/Light mode of the docs will match your system preferences. Since this is a super minimal version there's no toggle switch at this time.
- There will still be a few UI components which might look odd. In general, these will be fixed in a later (and bigger!) revamp unless it's not readable or accessible. If you come across something that's unreadable or inaccessible, please let us know.
Thanks folks and may your eyes be forever protected. 🌚
Awesome change! Although there is an issue with highlighted code in dark theme that makes it unreadable: #5285
Our latest Docs update includes a proper Dark/Light mode, including a toggle switch. 🌚 If you come across something that's unreadable or inaccessible, please let us know via a new issue.
Wow, what a ride this issue has been. It was always good for a nice surprise notification. I will miss it and all of you. Xoxo
🪦 🫡