uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.17k stars 156 forks source link

Dark mode support opt-out #448

Open nwazuo opened 1 year ago

nwazuo commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@nwazuo

<div data-color-mode="light">
  <MDEditor source="Hello World!" />
</div>
jaywcjlove commented 1 year ago

@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}
/>