diff --git a/apps/client/src/widgets/type_widgets/MindMap.tsx b/apps/client/src/widgets/type_widgets/MindMap.tsx
index b55a6e89d6..ac545b49fb 100644
--- a/apps/client/src/widgets/type_widgets/MindMap.tsx
+++ b/apps/client/src/widgets/type_widgets/MindMap.tsx
@@ -6,12 +6,12 @@ import "./MindMap.css";
 import nodeMenu from "@mind-elixir/node-menu";
 import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { snapdom } from "@zumer/snapdom";
-import { default as VanillaMindElixir,MindElixirData, MindElixirInstance, Operation, Options } from "mind-elixir";
+import { default as VanillaMindElixir,MindElixirData, MindElixirInstance, Operation, Options, THEME as LIGHT_THEME, DARK_THEME } from "mind-elixir";
 import { HTMLAttributes, RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";
 
 import utils from "../../services/utils";
-import { useEditorSpacedUpdate, useNoteLabelBoolean, useSyncedRef, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
+import { useColorScheme, useEditorSpacedUpdate, useNoteLabelBoolean, useSyncedRef, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
 import { refToJQuerySelector } from "../react/react_utils";
 import { TypeWidgetProps } from "./type_widget";
 
@@ -85,9 +85,11 @@ export default function MindMap({ note, ntxId, noteContext }: TypeWidgetProps) {
         },
         onContentChange: (content) => {
             let newContent: MindElixirData;
+
             if (content) {
                 try {
                     newContent = JSON.parse(content) as MindElixirData;
+                    delete newContent.theme;    // The theme is managed internally by the widget, so we remove it from the loaded content to avoid inconsistencies.
                 } catch (e) {
                     console.warn(e);
                     console.debug("Wrong JSON content: ", content);
@@ -151,6 +153,7 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
     const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
     const apiRef = useRef<MindElixirInstance>(null);
     const [ locale ] = useTriliumOption("locale");
+    const colorScheme = useColorScheme();
 
     function reinitialize() {
         if (!containerRef.current) return;
@@ -158,7 +161,8 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
         const mind = new VanillaMindElixir({
             el: containerRef.current,
             locale: LOCALE_MAPPINGS[locale as DISPLAYABLE_LOCALE_IDS] ?? undefined,
-            editable
+            editable,
+            theme: LIGHT_THEME
         });
 
         if (editable) {
@@ -179,6 +183,14 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
         };
     }, []);
 
+    // React to theme changes.
+    useEffect(() => {
+        if (!apiRef.current) return;
+        const newTheme = colorScheme === "dark" ? DARK_THEME : LIGHT_THEME;
+        if (apiRef.current.theme === newTheme) return; // Avoid unnecessary theme changes, which can be expensive to render.
+        apiRef.current.changeTheme(newTheme);
+    }, [ colorScheme ]);
+
     useEffect(() => {
         const data = apiRef.current?.getData();
         reinitialize();