Темы

Тема — это набор токенов цветов: цвета линий, портов и подписей в одном месте. Она записывается в CSS-переменные диаграммы, поэтому тему можно менять во время работы, а обычный CSS по-прежнему может переопределить любой токен.

import { createVisualLinker, darkTheme } from '@macrulez/visual-linker-core'

const linker = createVisualLinker(el, { theme: darkTheme })

Токены

Каждому токену соответствует одна CSS-переменная. Значения — из lightTheme:

• line — --vl-line-color · #2e8b57. Цвет каждой линии в покое; маркеры, обводка портов и рамки подписей следуют за ним, пока не заданы свои.
• lineHover — --vl-line-color-active · #2e8b57. Цвет линии в состояниях hover и highlight.
• lineSelected — --vl-line-color-selected · #2e8b57. Цвет выделенной линии; если не задан, берётся lineHover.
• selectedHalo — --vl-selected-color · #1f6feb. Свечение вокруг выделенной линии.
• focusRing — --vl-focus-color · #1f6feb. Свечение вокруг линии с клавиатурным фокусом.
• portFill — --vl-port-fill · #ffffff. Заливка встроенной точки порта.
• portStroke — --vl-port-stroke-color · #2e8b57. Обводка точки порта.
• labelBackground — --vl-label-bg · #ffffff. «Таблетка» за текстом подписи.
• labelBorder — --vl-label-border · #2e8b57. Контур этой «таблетки».
• labelText — --vl-label-color · #1c1e2b. Текст подписи.

Токен, который тема не задаёт, ничего не записывает, поэтому продолжает действовать встроенное значение или переменная из вашего CSS.

Встроенные темы

В пакет входят lightTheme и darkTheme. В darkTheme светлые линии (#6fcf97, при наведении #a8efc6, при выделении #8ab4ff), тёмные порты и подписи (#1b1d2b) и светлый текст (#e6e8f2).

Своя тема

defineTheme(overrides, base) возвращает копию base — по умолчанию lightTheme — с указанными вами токенами:

import { darkTheme, defineTheme } from '@macrulez/visual-linker-core'

const midnight = defineTheme(
  {
    line: '#8b9bff',
    lineHover: '#c4ccff',
    lineSelected: '#ffd479',
    portFill: '#14162a',
    portStroke: '#8b9bff',
  },
  darkTheme,
)

Тема — обычный объект, поэтому её можно написать и вручную или собрать из токенов вашей дизайн-системы.

Переключение тем

В движке меняйте поле theme конфигурации. Ключ со значением undefined снова удаляет свою переменную:

linker.setConfig({ theme: lightTheme })
linker.setConfig({ theme: { line: undefined } })

В Vue и Nuxt измените общую конфигурацию один раз, и все диаграммы на странице последуют за ней — см. Общая конфигурация.

Тема и остальные настройки

Тема даёт значения по умолчанию. Значение, заданное для группы или сущности, сильнее: lines.color сильнее line, а style.color соединения сильнее обоих. Маркеры, обводка портов и рамки подписей берут цвет из цвета линии на данный момент, включая тему, поэтому смена темы перекрашивает и их.

Поскольку тема только записывает CSS-переменные, те же токены можно задать из таблицы стилей, например чтобы следовать prefers-color-scheme:

.diagram {
  --vl-line-color: #2e8b57;
}

@media (prefers-color-scheme: dark) {
  .diagram {
    --vl-line-color: #6fcf97;
  }
}

Токены, заданные темой в конфигурации, записываются на собственный элемент диаграммы и сильнее переменных, унаследованных из вашей таблицы стилей. Цвета маркеров движок вычисляет из конфигурации и темы, а не читает обратно из CSS, поэтому маркер следует за цветом, заданным только в таблице стилей, лишь если вы задали тот же цвет и в theme.