diff --git a/apps/client/src/widgets/type_widgets/Spreadsheet.tsx b/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
index 2237e079ec..c81f5a81d4 100644
--- a/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
+++ b/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
@@ -3,17 +3,22 @@ import "./Spreadsheet.css";
 
 import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
 import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
-import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+import { createUniver, FUniver, LocaleType, mergeLocales } from '@univerjs/presets';
 import { useEffect, useRef } from "preact/hooks";
 
+import { useColorScheme } from "../react/hooks";
+
 export default function Spreadsheet() {
+    const colorScheme = useColorScheme();
+
     return (
-        <UniverSpreadsheet />
+        <UniverSpreadsheet darkMode={colorScheme === 'dark'} />
     );
 }
 
-function UniverSpreadsheet() {
+function UniverSpreadsheet({ darkMode }: { darkMode: boolean }) {
     const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useRef<FUniver>();
 
     useEffect(() => {
         if (!containerRef.current) return;
@@ -27,13 +32,21 @@ function UniverSpreadsheet() {
             },
             presets: [
                 UniverSheetsCorePreset({
-                    container: containerRef.current
+                    container: containerRef.current,
                 })
             ]
         });
+        apiRef.current = univerAPI;
         univerAPI.createWorkbook({});
         return () => univerAPI.dispose();
     }, []);
 
+    // React to dark mode.
+    useEffect(() => {
+        const univerAPI = apiRef.current;
+        if (!univerAPI) return;
+        univerAPI.toggleDarkMode(darkMode);
+    }, [ darkMode ]);
+
     return <div ref={containerRef} className="spreadsheet" />;
 }