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 { 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[] {
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user