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

Dark mode support opt-out #448

Open
nwazuo opened this issue Oct 27, 2022 · 3 comments
Open

Dark mode support opt-out #448

nwazuo opened this issue Oct 27, 2022 · 3 comments

Comments

@nwazuo
Copy link

nwazuo commented Oct 27, 2022

Hi, thanks for this great package.
We use the Markdown components for our UI kit in our organization which is shared between projects.

We recently bumped up this package from v3.4.0 to v3.14.4. in our UI kit and the dark mode support breaks(dark bgs for some users) our components which use the Markdown component.

Is there a way to opt out of this dark mode support? Perhaps with a config?

I'm aware of the ways of forcing either light or dark mode (by setting the data-color-mode attribute) but they aren't practical for our use case because our components all encapsulate their styles and setting the attribute for all our apps may break future dark mode support and require code changes across a lot of files.

Thank you.

@jaywcjlove
Copy link
Member

https://github.com/uiwjs/react-markdown-preview/blob/bc68750401b8c638c6ab21f34ab5ef83ae228ef7/src/index.tsx#L27-L29

@nwazuo example: https://codesandbox.io/embed/react-markdown-preview-uiwjs-react-md-editor-issues-448-ofdjl2?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import MarkdownPreview from "@uiw/react-markdown-preview";

const source = `## Markdown Preview

 > todo: React component preview markdown text.
`;

function Demo() {
  return (
    <>
      <MarkdownPreview
        source={source}
        warpperElement={{
+          "data-color-mode": "light"
        }}
      />
    </>
  );
}

@jaywcjlove
Copy link
Member

@nwazuo

<div data-color-mode="light">
  <MDEditor source="Hello World!" />
</div>

@jaywcjlove
Copy link
Member

@nwazuo Now data-color-mode can be passed as props. Upgrade v3.19.3

<MDEditor
+  data-color-mode="light"
  height={200}
  value={value}
  onChange={setValue}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants