themes — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited themes (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Light and dark themes with full customization of node, edge, arrow, ring, cluster, lasso, and canvas colors.
import { lightTheme, darkTheme, GraphCanvas } from 'reagraph';interface Theme {
canvas?: {
background?: ColorRepresentation;
fog?: ColorRepresentation | null;
};
node: {
fill: ColorRepresentation;
activeFill: ColorRepresentation;
opacity: number;
selectedOpacity: number;
inactiveOpacity: number;
label: {
color: ColorRepresentation;
stroke?: ColorRepresentation;
activeColor: ColorRepresentation;
backgroundColor?: ColorRepresentation;
backgroundOpacity?: number;
padding?: number;
strokeColor?: ColorRepresentation;
strokeWidth?: number;
radius?: number;
};
subLabel?: {
color: ColorRepresentation;
stroke?: ColorRepresentation;
activeColor: ColorRepresentation;
};
};
ring: {
fill: ColorRepresentation;
activeFill: ColorRepresentation;
};
edge: {
fill: ColorRepresentation;
activeFill: ColorRepresentation;
opacity: number;
selectedOpacity: number;
inactiveOpacity: number;
label: {
color: ColorRepresentation;
stroke?: ColorRepresentation;
activeColor: ColorRepresentation;
fontSize?: number;
};
subLabel?: {
color: ColorRepresentation;
stroke?: ColorRepresentation;
activeColor: ColorRepresentation;
fontSize?: number;
};
};
arrow: {
fill: ColorRepresentation;
activeFill: ColorRepresentation;
};
lasso: {
background: string;
border: string;
};
cluster?: {
stroke?: ColorRepresentation;
fill?: ColorRepresentation;
opacity?: number;
selectedOpacity?: number;
inactiveOpacity?: number;
label?: {
stroke?: ColorRepresentation;
color: ColorRepresentation;
fontSize?: number;
offset?: [number, number, number];
};
};
}| Section | Property | Value |
|---|---|---|
| canvas | background | '#fff' |
| node | fill | '#7CA0AB' |
| node | activeFill | '#1DE9AC' |
| node | opacity | 1 |
| node | inactiveOpacity | 0.2 |
| node.label | color | '#2A6475' |
| node.label | stroke | '#fff' |
| edge | fill | '#D8E6EA' |
| edge | activeFill | '#1DE9AC' |
| edge | inactiveOpacity | 0.1 |
| ring | fill | '#D8E6EA' |
| arrow | fill | '#D8E6EA' |
| Section | Property | Value |
|---|---|---|
| canvas | background | '#1E2026' |
| node | fill | '#7A8C9E' |
| node | activeFill | '#1DE9AC' |
| node.label | color | '#ACBAC7' |
| node.label | stroke | '#1E2026' |
| edge | fill | '#474B56' |
| edge | activeFill | '#1DE9AC' |
| ring | fill | '#54616D' |
| arrow | fill | '#474B56' |
<GraphCanvas nodes={nodes} edges={edges} />import { darkTheme } from 'reagraph';
<GraphCanvas nodes={nodes} edges={edges} theme={darkTheme} />import { lightTheme } from 'reagraph';
const customTheme = {
...lightTheme,
canvas: { background: '#f5f5f5' },
node: {
...lightTheme.node,
fill: '#4CAF50',
activeFill: '#FF5722',
},
edge: {
...lightTheme.edge,
fill: '#999',
activeFill: '#FF5722',
},
};
<GraphCanvas nodes={nodes} edges={edges} theme={customTheme} />const themed = {
...lightTheme,
node: {
...lightTheme.node,
label: {
...lightTheme.node.label,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
padding: 2,
radius: 0.2,
strokeColor: '#ddd',
strokeWidth: 0.5,
},
},
};Theme colors can be overridden per node/edge via the fill property in data:
const nodes = [
{ id: '1', label: 'Default Color' },
{ id: '2', label: 'Red', fill: '#FF5722' },
{ id: '3', label: 'Blue', fill: '#2196F3' },
];activeFill is used when a node/edge is hovered or selectedinactiveOpacity dims non-selected elements when a selection existsselectedOpacity is applied to selected elementslasso.background and lasso.border are CSS values (strings with units)~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.