Improve theme integration
This commit is contained in:
parent
263a62c1a4
commit
c5ba69ddeb
@ -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[] {
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user