Improve theme integration

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -4,11 +4,14 @@ import "./family-chart.css";
 import { FamilyTreeNode } from "../../utils/family_tree";
 import { Member, fmtDate } from "../../api/MemberApi";
 import { Couple } from "../../api/CoupleApi";
+import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
 
 export function ComplexFamilyTree(p: {
   tree: FamilyTreeNode;
   isUp: boolean;
 }): React.ReactElement {
+  const darkTheme = useDarkTheme();
+
   const refCb = (container: HTMLDivElement) => {
     if (!container) return;
 
@@ -66,7 +69,13 @@ export function ComplexFamilyTree(p: {
     store.update.tree({ initial: true });
   };
 
-  return <div className="f3" id="FamilyChart" ref={refCb}></div>;
+  return (
+    <div
+      className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
+      id="FamilyChart"
+      ref={refCb}
+    ></div>
+  );
 }
 
 function treeToF3Data(node: FamilyTreeNode, isUp: boolean): f3Data[] {