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[] {

geneit_app/src/widgets/complex_family_tree/family-chart.css

@@ -10,10 +10,11 @@
 .f3 .cursor-pointer {
   cursor: pointer;
 }
+
 .f3 svg.main_svg {
   width: 100%;
   height: 100%;
-  background-color: #3b5560;
+  /*background-color: #3b5560;*/
   color: #3b5560;
 }
 .f3 svg.main_svg text {
@@ -95,3 +96,7 @@
   -webkit-transform: translateY(-8px) scale(0.8);
   transform: translateY(-8px) scale(0.8);
 }
+
+.f3-light .link {
+  stroke: black;
+}