style: add data-color-mode props.

Author: jaywcjlove

src/index.tsx

@@ -22,7 +22,9 @@ export interface MarkdownPreviewProps extends Omit<Options, 'children'> {
   disableCopy?: boolean;
   style?: React.CSSProperties;
   pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList;
-  warpperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  warpperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    'data-color-mode'?: 'light' | 'dark';
+  };
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
   onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }

src/styles/markdown.less

@@ -98,6 +98,7 @@
 
 [data-color-mode*='dark'] .wmde-markdown,
 [data-color-mode*='dark'] .wmde-markdown-var,
+.wmde-markdown[data-color-mode*='dark'],
 body[data-color-mode*='dark'] {
   color-scheme: dark;
   --color-prettylights-syntax-comment: #8b949e;
@@ -146,6 +147,7 @@ body[data-color-mode*='dark'] {
 
 [data-color-mode*='light'] .wmde-markdown,
 [data-color-mode*='light'] .wmde-markdown-var,
+.wmde-markdown[data-color-mode*='light'],
 body[data-color-mode*='light'] {
   color-scheme: light;
   --color-prettylights-syntax-comment: #6e7781;