Dark mode issue

[yehezkielgunawan]

Hi, I've just implemented React Notion to my personal site. But there's a problem when I want to implement it with dark mode. Some text doesn't change its color. It happens when I want to render the article from my notion.

I made my website using Next JS, Chakra UI, and React Notion.

Here's my snippet.

 const { colorMode } = useColorMode();        
  const divStyle = {
    WebkitTextFillColor: "white",
  };

return (
{colorMode === "light" ? (
          <Stack px={isDesktopWidth ? 2 : 0}>
            <NotionRenderer blockMap={blocks} />
          </Stack>
        ) : (
          <div style={divStyle}>
            <Stack px={isDesktopWidth ? 2 : 0}>
              <NotionRenderer blockMap={blocks} />
            </Stack>
          </div>
        )}
);

Here are some texts when it's in light mode.

Here are some texts when it's in the dark mode,

The live version of my article can be accessed at https://yehezgun.com/articles/post/cerita-di-balik-yehezgun-com, you can check it here.

Is this happens because of my code or from the Notion Renderer itself? Thank you in advance.

[ToledoNicola]

Only the links right?

[yehezkielgunawan]

Oh sorry, I forgot to close this issue. Finally, I found a way to resolve this using React-Notion-X

[ToledoNicola]

it would be great if you could share your solution 🙂, because I m using your same stack

[yehezkielgunawan]

I know, but so far that's what I've tried and I didn't find a concrete solution for that, LOL. So for now I use another equivalent library to resolve my issue, LOL.

[jeanmw]

FWIW I was able to do this with styled components and twin.macro

import React from 'react';
import PropTypes from 'prop-types';
import { css, styled } from 'twin.macro';

const styles = css`
@media (prefers-color-scheme: dark) {
  .notion, .notion-text, .notion-page-link {
    color: white;
    background-color: #1e1e1e;
  }
}
}`;

const StyledDiv = styled.div(() => [styles]);
...
  return (
<StyledDiv>
    <NotionRenderer blockMap={recordMap.data} />
</StyedDiv>
  );