feat(spreadsheet): support dark mode

This commit is contained in:
Elian Doran 2026-03-03 18:42:26 +02:00
parent 4ace74bcb8
commit d331e418d4
No known key found for this signature in database

View File

@ -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" />;
}