search

splitbee / react-notion

A fast React renderer for Notion pages
https://react-notion.com
MIT License
2.86k stars 151 forks source link

Add dark mode #22

Closed transitive-bullshit closed 3 years ago

transitive-bullshit commented 4 years ago

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

timolins commented 4 years ago

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 commented 4 years ago

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

transitive-bullshit commented 3 years ago

For anyone ending up here, this functionality as well as a lot more improvements are available via https://github.com/NotionX/react-notion-x

transitive-bullshit commented 3 years ago

Hey @tobiaslins, would love to touch base with you guys at some point 😄