| 68 | * canvas 2D can't resolve `var()`, so node/edge accents are read here too. |
| 69 | */ |
| 70 | export function readTheme(el: HTMLElement): ThemeColors { |
| 71 | const styles = getComputedStyle(el); |
| 72 | const read = (name: string, fallback: string) => styles.getPropertyValue(name).trim() || fallback; |
| 73 | const family: Record<string, string> = {}; |
| 74 | for (const [key, [token, fallback]] of Object.entries(KIND_FAMILY_TOKENS)) { |
| 75 | family[key] = read(token, fallback); |
| 76 | } |
| 77 | return { |
| 78 | label: read("--ts-text", "#e7fff9"), |
| 79 | halo: read("--ts-void", "#030607"), |
| 80 | ring: read("--ts-text", "#e7fff9"), |
| 81 | path: read("--ts-cyan", "#75f4d2"), |
| 82 | family, |
| 83 | accents: { |
| 84 | amber: read("--ts-amber", "#f7c76a"), |
| 85 | blue: read("--ts-blue", "#7aa7ff"), |
| 86 | pink: read("--ts-pink", "#ff7ab6"), |
| 87 | green: read("--ts-green", "#67e8a9"), |
| 88 | muted: read("--ts-text-2", "#a8c8c0"), |
| 89 | }, |
| 90 | }; |
| 91 | } |
| 92 | |
| 93 | export function edgeStyle(kind: string, theme: Pick<ThemeColors, "accents">) { |
| 94 | const def = EDGE_STYLE_DEFS[kind] || DEFAULT_EDGE_STYLE_DEF; |