Свои темы - Nuvo Документация

Создайте тему

Откройте «Настройки», «Оформление».
Выберите стиль, близкий к нужному, и нажмите «Настроить».
Меняйте цветовые блоки. Приложение обновляется по ходу правки.
Переключайтесь между светлым и тёмным вариантом («Светлая», «Тёмная»), чтобы править каждый.
Назовите тему и сохраните её.

Сначала выберите акцент и фон. Остальные цвета редактор выведет из этих двух, и любой из них можно переопределить.

Цвета

Роль	Где видна
`field` («Фон»)	Фон страницы
`deep` («Глубокий фон»)	Более глубокие области
`raised` («Карточки»)	Карточки и панели
`ink` («Текст»)	Основной текст
`ink2` («Второстепенный текст»)	Второстепенный текст
`ink3` («Подсказки»)	Подсказки
`hair` («Линии»)	Линии
`tint` («Подсветка»)	Подсветка при наведении
`accent` («Акцент»)	Акценты и активные элементы

Цвета field, deep, raised, ink и accent должны быть непрозрачными. Остальные могут быть полупрозрачными.

Следите за метками контраста. Для текста на фоне нужно отношение 4,5 к 1 у ink и ink2 и 3 к 1 у ink3, accent и hair. Кнопка «Исправить» сдвигает цвет к ближайшему значению, которое проходит проверку.

Поделитесь темой

«Экспортировать тему» создаёт файл <name>.nuvotheme.json размером до 48 КБ. Отправьте его. Другой человек импортирует файл в «Настройки», «Оформление» («Импортировать тему»). Nuvo проверяет файл, прежде чем он попадёт в редактор, в том числе CSS внутри него.

Добавьте CSS

В «Настройки», «Персонализация» есть поле для CSS, для тех, кто пишет CSS. Файл ограничен 32 КБ. Правила проверки описаны в разделе темы и свой CSS. Если проверка отклоняет CSS, она показывает строку и причину. Исправьте их и примените снова.

Примеры, которые проходят проверку:

a { color: #c2456b; }
@media (min-width: 900px) {
  a { text-decoration: underline; }
}

Примеры, которые не проходят: любой url(...), @import, @font-face.

Если что-то пошло не так

Удерживайте Shift при запуске Nuvo или запустите его с флагом --safe-appearance. Nuvo включит вид по умолчанию. Исправьте тему и включите своё оформление обратно.