gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-28 17:43:36 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

fix(canvas): not reacting to switch between light/dark mode

Browse Source
This commit is contained in:
Elian Doran 2026-02-24 18:35:36 +02:00
parent c09ef3af80
commit 021a908c9c
No known key found for this signature in database
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/widgets/react/hooks.tsx
View File

@ -1383,3 +1383,28 @@ export function useGetContextDataFrom<K extends keyof NoteContextDataMap>(
return data; return data;
} }
export function useColorScheme() {
const themeStyle = getThemeStyle();
const defaultValue = themeStyle === "auto" ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) : themeStyle === "dark";
const [ prefersDark, setPrefersDark ] = useState(defaultValue);
useEffect(() => {
if (themeStyle !== "auto") return;
const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
const listener = () => setPrefersDark((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches));
mediaQueryList.addEventListener("change", listener);
return () => mediaQueryList.removeEventListener("change", listener);
}, []);
return prefersDark ? "dark" : "light";
}
function getThemeStyle() {
const style = window.getComputedStyle(document.body);
const themeStyle = style.getPropertyValue("--theme-style");
if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
return themeStyle as "light" | "dark";
}
return "auto";
}

11
apps/client/src/widgets/type_widgets/canvas/Canvas.tsx
View File

@ -1,7 +1,7 @@
import { Excalidraw } from "@excalidraw/excalidraw"; import { Excalidraw } from "@excalidraw/excalidraw";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import "@excalidraw/excalidraw/index.css"; import "@excalidraw/excalidraw/index.css";
import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks"; import { useColorScheme, useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
import { useCallback, useMemo, useRef } from "preact/hooks"; import { useCallback, useMemo, useRef } from "preact/hooks";
import { type ExcalidrawImperativeAPI, type AppState } from "@excalidraw/excalidraw/types"; import { type ExcalidrawImperativeAPI, type AppState } from "@excalidraw/excalidraw/types";
import options from "../../../services/options"; import options from "../../../services/options";
@ -19,12 +19,9 @@ window.EXCALIDRAW_ASSET_PATH = `${window.location.pathname}/node_modules/@excali
export default function Canvas({ note, noteContext }: TypeWidgetProps) { export default function Canvas({ note, noteContext }: TypeWidgetProps) {
const apiRef = useRef<ExcalidrawImperativeAPI>(null); const apiRef = useRef<ExcalidrawImperativeAPI>(null);
const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const themeStyle = useMemo(() => { const colorScheme = useColorScheme();
const documentStyle = window.getComputedStyle(document.documentElement);
return documentStyle.getPropertyValue("--theme-style")?.trim() as AppState["theme"];
}, []);
const [ locale ] = useTriliumOption("locale"); const [ locale ] = useTriliumOption("locale");
const persistence = useCanvasPersistence(note, noteContext, apiRef, themeStyle, isReadOnly); const persistence = useCanvasPersistence(note, noteContext, apiRef, colorScheme, isReadOnly);
/** Use excalidraw's native zoom instead of the global zoom. */ /** Use excalidraw's native zoom instead of the global zoom. */
const onWheel = useCallback((e: MouseEvent) => { const onWheel = useCallback((e: MouseEvent) => {
@ -54,7 +51,7 @@ export default function Canvas({ note, noteContext }: TypeWidgetProps) {
<div className="excalidraw-wrapper"> <div className="excalidraw-wrapper">
<Excalidraw <Excalidraw
excalidrawAPI={api => apiRef.current = api} excalidrawAPI={api => apiRef.current = api}
theme={themeStyle} theme={colorScheme}
viewModeEnabled={isReadOnly || options.is("databaseReadonly")} viewModeEnabled={isReadOnly || options.is("databaseReadonly")}
zenModeEnabled={false} zenModeEnabled={false}
isCollaborating={false} isCollaborating={false}