Четыре цвета
В конструкторе рядом с превью выбираются фон, текст, обычные иконки и акцент. Поддержаны выбор цвета и HEX #RGB/#RRGGBB; некорректное значение не применяется. Акцент задаёт выбранные действия и ссылки. Сброс возвращает исходные цвета.
Изменение палитры не меняет содержимое или историю. Высота палитры совпадает с превью и следует за изменением размера; при малой высоте настройки прокручиваются внутри.
Код подключения
Script-пример включает scoped-style. ESM-пример создаёт style-элемент и показывает его удаление рядом с destroy. Это CSS примера, не стабильный публичный API темы.
const paletteStyle = document.createElement('style');
paletteStyle.textContent = '#editor > .vitext { --vt-paper: #fffdf8; --vt-ink: #1e1c18; --vt-accent: #2c3bd6; }';
document.head.append(paletteStyle);
// Когда редактор больше не нужен:
editor.destroy();
paletteStyle.remove();
При другом id host измените селектор. Эти CSS-переменные относятся к текущей оболочке и могут измениться до беты.
Стили документа
Палитра интерфейса и CSS содержимого — разные настройки. setCSS/getCSS работают с отдельными стилями документа; они изолированы в Shadow DOM и экспортируются отдельно. HTML/CSS.