Improve theme integration

This commit is contained in:
Pierre HUBERT 2023-08-23 14:02:05 +02:00
parent 263a62c1a4
commit c5ba69ddeb
2 changed files with 16 additions and 2 deletions

View File

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

View File

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