主题和造型

画布上的每种颜色都由 CSS 自定义属性 (--pvt-*) 驱动，因此主题只是 CSS。 Pivotick 提供 light 和 dark 主题 — 通过在图根上设置 data-theme 来在它们之间翻转 — 并且您可以以相同的方式定义自己的主题：设置您关心的变量的 [data-theme] 块。当变量不覆盖某些内容时，呈现的 SVG 是普通的分类元素（.pvt-node、.pvt-edge-group path），您可以直接设置样式。

切换下面的主题。内置Light和Dark； Brand 是一个完全在 CSS 中定义的自定义主题 — 调色板的一些变量，加上一些用于变量不公开的效果的类挂钩（节点和边缘上的霓虹灯发光、虚线链接、粗体标签）。

css

/* A custom "brand" theme. Set data-theme="brand" on the graph root (.pivotick)
   and these variables cascade into the canvas — nodes, edges, labels, background
   and grid all recolour, with no re-render. ('light' and 'dark' ship with
   Pivotick and need none of this — they are just other data-theme values.) */
.pivotick[data-theme='brand'] {
    --pvt-bg: #141038;                 /* deep indigo canvas */
    --pvt-graph-grid-color: #241d5c;   /* dotted grid */
    --pvt-node-color: #ff5d8f;         /* vivid pink node fill */
    --pvt-node-stroke: #ffd166;        /* gold ring */
    --pvt-node-stroke-width: 2.5;      /* thicker ring */
    --pvt-node-text-color: #ffffff;    /* label (rendered inside the node) */
    --pvt-edge-stroke: #8b7dff;        /* lavender edges */
}

css

/* Variables cover colours; for effects they don't expose, reach the rendered SVG
   through its classes. Here the brand gets a neon glow on nodes and edges, dashed
   links, and bolder labels — none of which is a variable. */
.pivotick[data-theme='brand'] .pvt-node .node {
    filter: drop-shadow(0 0 5px rgba(255, 93, 143, 0.75));
}
.pivotick[data-theme='brand'] .pvt-node-label {
    font-weight: 800;
    letter-spacing: 0.6px;
}
.pivotick[data-theme='brand'] .pvt-edge-group path {
    stroke-dasharray: 6 5;
    filter: drop-shadow(0 0 2px rgba(139, 125, 255, 0.9));
}

// Switch a single graph's theme at runtime by setting data-theme on its root
// (the .pivotick element). 'light' and 'dark' ship with Pivotick; 'brand' is a
// custom theme defined in CSS (theme.css). No re-render — the variables cascade
// in immediately.
function applyTheme(container, theme) {
    container.querySelector('.pivotick')?.setAttribute('data-theme', theme)
}

const options = {
    render: {
        defaultNodeStyle: {
            size: 22,
            // Only set the label. Leaving colour/stroke/text-colour unset keeps the
            // built-in defaults, which resolve to CSS variables (--pvt-node-color,
            // --pvt-node-stroke, --pvt-node-text-color) — that is what makes the
            // graph re-theme purely from CSS. Hard-code a colour here and it would
            // win over the variables.
            text: (node) => node.getData()?.label
        }
    }
}

// Short labels sit inside the nodes, so the label colour is themed too.
const data = {
    nodes: [
        { id: 'ada', data: { label: 'Ada' } },
        { id: 'bo', data: { label: 'Bo' } },
        { id: 'cy', data: { label: 'Cy' } },
        { id: 'deb', data: { label: 'Deb' } },
        { id: 'eve', data: { label: 'Eve' } },
        { id: 'fin', data: { label: 'Fin' } },
        { id: 'gil', data: { label: 'Gil' } }
    ],
    edges: [
        { from: 'ada', to: 'bo' },
        { from: 'ada', to: 'cy' },
        { from: 'bo', to: 'deb' },
        { from: 'cy', to: 'deb' },
        { from: 'deb', to: 'eve' },
        { from: 'eve', to: 'fin' },
        { from: 'eve', to: 'gil' },
        { from: 'fin', to: 'gil' }
    ]
}

主题和造型 ​

主题和造型