Add dark theme support

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -158,11 +158,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
         {currTab === CurrTab.BasicTree ? (
           <BasicFamilyTree tree={tree!} depth={currDepth} />
         ) : currTab === CurrTab.SimpleTree ? (
-          <SimpleFamilyTree
+          <SimpleFamilyTree tree={tree!} depth={currDepth} />
-            tree={tree!}
-            isUp={currMode === TreeMode.Ascending}
-            depth={currDepth}
-          />
         ) : (
           <ComplexFamilyTree
             tree={tree!}

geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx

@@ -4,6 +4,8 @@ import { Member } from "../../api/MemberApi";
 import { FamilyTreeNode } from "../../utils/family_tree";
 import { getTextWidth } from "../../utils/render_utils";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
+import "./simpletree.css";
 
 const FACE_WIDTH = 60;
 const FACE_HEIGHT = 70;
@@ -76,7 +78,7 @@ function center(container_width: number, el_width: number): number {
   return Math.floor((container_width - el_width) / 2);
 }
 
-function buildSimpleDownTreeNode(
+function buildSimpleTreeNode(
   tree: FamilyTreeNode,
   depth: number
 ): SimpleTreeNode {
@@ -94,8 +96,7 @@ function buildSimpleDownTreeNode(
 
   const node: SimpleTreeNode = {
     down:
-      childrenToProcess?.map((c) => buildSimpleDownTreeNode(c, depth - 1)) ??
+      childrenToProcess?.map((c) => buildSimpleTreeNode(c, depth - 1)) ?? [],
-      [],
     member: tree.member,
     spouse: lastCouple
       ? {
@@ -131,23 +132,6 @@ function buildSimpleDownTreeNode(
   return node;
 }
 
-// TODO : if useless, remove and merge up and down techniques
-function buildSimpleUpTreeNode(
-  tree: FamilyTreeNode,
-  depth: number
-): SimpleTreeNode {
-  /*if (depth === 0) throw new Error("Too much recursion reached!");
-
-  return {
-    member: tree.member,
-    children:
-      depth === 1
-        ? []
-        : tree.down?.map((c) => buildSimpleUpTreeNode(c, depth - 1)) ?? [],
-  };*/
-  return buildSimpleDownTreeNode(tree, depth);
-}
-
 /**
  * Simple family tree
  *
@@ -156,15 +140,13 @@ function buildSimpleUpTreeNode(
 
 export function SimpleFamilyTree(p: {
   tree: FamilyTreeNode;
-  isUp: boolean;
   depth: number;
 }): React.ReactElement {
+  const darkTheme = useDarkTheme();
+
   const tree = React.useMemo(
-    () =>
+    () => buildSimpleTreeNode(p.tree, p.depth),
-      p.isUp
+    [p.tree, p.depth]
-        ? buildSimpleUpTreeNode(p.tree, p.depth)
-        : buildSimpleDownTreeNode(p.tree, p.depth),
-    [p.tree, p.isUp, p.depth]
   );
 
   const height = p.depth * (CARD_HEIGHT + LEVEL_SPACING) - LEVEL_SPACING;
@@ -175,6 +157,7 @@ export function SimpleFamilyTree(p: {
     <TransformWrapper maxScale={15} minScale={0.2}>
       <TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
         <svg
+          className={`simpletree ${darkTheme.enabled ? "simpletree-dark" : ""}`}
           width={tree.width}
           height={height}
           xmlns="http://www.w3.org/2000/svg"

geneit_app/src/widgets/simple_family_tree/simpletree.css

@@ -0,0 +1,7 @@
+.simpletree-dark path {
+  stroke: white;
+}
+
+.simpletree-dark tspan {
+  fill: white;
+}