diff --git a/package.json b/package.json
index 9000fd7c..21833b40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-markdown-preview",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "description": "React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.",
   "homepage": "https://uiwjs.github.io/react-markdown-preview",
   "main": "lib/index.js",
diff --git a/src/index.tsx b/src/index.tsx
index dc9bb3f7..579e7fd5 100644
--- 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
index a10c6c95..28a0e201 100644
--- 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;