diff --git a/src/client/theme-default/builtins/Previewer/index.tsx b/src/client/theme-default/builtins/Previewer/index.tsx
index 6ce407a40..4cb0f41c3 100644
--- a/src/client/theme-default/builtins/Previewer/index.tsx
+++ b/src/client/theme-default/builtins/Previewer/index.tsx
@@ -1,8 +1,13 @@
 import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/filled/close-circle.svg';
 import classnames from 'classnames';
-import { useLiveDemo, useLocation, type IPreviewerProps } from 'dumi';
+import {
+  useLiveDemo,
+  useLocation,
+  usePrefersColor,
+  type IPreviewerProps,
+} from 'dumi';
 import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
-import React, { useRef, type FC } from 'react';
+import React, { useEffect, useRef, useState, type FC } from 'react';
 import './index.less';
 
 const Previewer: FC<IPreviewerProps> = (props) => {
@@ -10,6 +15,9 @@ const Previewer: FC<IPreviewerProps> = (props) => {
   const { hash } = useLocation();
   const link = `#${props.asset.id}`;
 
+  const [preferredColorScheme] = usePrefersColor();
+  const [iframeKey, setIframeKey] = useState(0);
+
   const {
     node: liveDemoNode,
     error: liveDemoError,
@@ -20,6 +28,12 @@ const Previewer: FC<IPreviewerProps> = (props) => {
     containerRef: demoContainer,
   });
 
+  useEffect(() => {
+    if (props.iframe) {
+      setIframeKey((key) => key + 1);
+    }
+  }, [preferredColorScheme, props.iframe]);
+
   return (
     <div
       id={props.asset.id}
@@ -46,6 +60,7 @@ const Previewer: FC<IPreviewerProps> = (props) => {
                 : {}
             }
             src={props.demoUrl}
+            key={iframeKey}
           ></iframe>
         ) : (
           liveDemoNode || props.children