The Wayback Machine - https://web.archive.org/web/20201019095142/https://github.com/splitbee/react-notion/pull/22
Skip to content
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

Add dark mode #22

Open
wants to merge 2 commits into
base: master
from

Conversation

@transitive-bullshit
Copy link
Collaborator

@transitive-bullshit transitive-bullshit commented Jul 22, 2020

Check it out live here: https://test16.saas-journey.com 💯

I added a commented-out example under examples/pages/index.tsx that shows how to enable darkMode.

Here's a test page for all the different Notion colors: https://test16.saas-journey.com/Color-Rainbow-54bf56611797480c951e5c1f96cb06f2

I'm using CSS variables to keep things DRY and so it'll be easier to add theming support in the future.

Screen Shot 2020-07-22 at 3 09 40 AM

Screen Shot 2020-07-22 at 2 52 38 AM

@@ -1,8 +1,91 @@
.notion {

This comment has been minimized.

@transitive-bullshit

transitive-bullshit Jul 22, 2020
Author Collaborator

I tried to keep the naming of the CSS variables consistent, but Notion's not super consistent internally.

@timolins
Copy link
Member

@timolins timolins commented Jul 22, 2020

Had a quick browse on my phone, looking good 😍 One thing I noticed is that the page emojis are translucent, probably due to the text color .

@transitive-bullshit
Copy link
Collaborator Author

@transitive-bullshit transitive-bullshit commented Jul 28, 2020

@timolins good call -- just fixed so the icons & emoji will not be transparent in dark mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.