style: add data-color-mode props.

uiwjs · Jun 9, 2022 · 1247a0d · 1247a0d
1 parent b074525
commit 1247a0d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/index.tsx b/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;
 }

diff --git a/src/styles/markdown.less b/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;