mirror of
https://github.com/zadam/trilium.git
synced 2026-03-13 11:53:38 +01:00
feat(spreadsheet): support dark mode
This commit is contained in:
parent
4ace74bcb8
commit
d331e418d4
@ -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" />;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user