Как сменить тему и стили в n8n?

По умолчанию в n8n включена светлая тема. Но вы можете поменять ее на темную. Сообщество специалистов также разработало специальные расширения для браузеров и отдельные утилиты, которые позволяют настроить стили и цвета под себя. В этом простом, но практическом руководстве мы разберемся, как это можно сделать.

Читать еще:

• Что такое n8n?
• Как зарегистрироваться на платформе n8n?
• Установка n8n на своем сервере
• Разблокировка платных функций n8n (Community Edition)
• Остальные материалы по n8n

Официальные стили n8n

Чтобы изменить светлую тему интерфейса n8n на темную, более привычную для многих пользователей и часто используемую в гайдах, скриншотах и на официальном сайте, перейдите в раздел Settings - Personal:

На открывшейся странице в разделе Personalisation измените тему с System default на Dark theme:

• System default = Light theme - светлая тема
• Dark theme - темная тема

Нажмите Save. Теперь ваша платформа n8n будет иметь темную тему:

Решения сторонних разработчиков

Сменить тему в n8n с темной на светлую - это лишь базовая функция. Благодаря активному сообществу специалистов регулярно выходят обновления, которые позволяют гибко настраивать интерфейс и адаптировать платформу под себя для максимально комфортной работы.

Для браузеров существуют расширения, которые позволяют выбирать другие цветовые схемы или даже создавать собственную палитру. Если вы перейдете в Интернет-магазин Chrome и введете в поиске n8n themes, то увидите несколько интересных решений:

Например, расширение n8nThemer предлагает по подписке библиотеку из 30 цветовых тем, несколько из которых доступны бесплатно:

Вы просто устанавливаете расширение к себе в браузер, активируйте и выбираете из предложенных вариантов наиболее подходящий. Расширение обеспечивает бесшовную интеграцию: тема применяется в один клик прямо из всплывающего окна, а внедрение с учетом DOM исключает мерцание. Решение работает как на любом собственном домене (благодаря автоматическому обнаружению DOM), так и в облаке n8n, а оптимизированный CSS с базовыми исправлениями гарантирует единообразное отображение интерфейса.

Есть и другое интересное расширение (n8n Playground), которое предоставляет несколько красивых (но платных) тем для n8n:

Вы выбираете не просто внешний вид - вы выбираете рабочее настроение. Разработчик данного расширения заранее подготовил несколько премиальных стилей, которые задают совершенно иной подход к рабочим процессам в n8n.

Например:

• Aurora Synth - премиальный, футуристический акцент;
• Gold Dawgs - темная роскошь, энергия для опытных пользователей;
• Cyberpunk - высококонтрастные ночные сессии;
• Radiation Reactor - четкость, вдохновленная терминалом;
• Pink Rose - мягкий, элегантный, удивительно продуктивный;
• Dark Red Lovers - контролируемый красный, а не опасный красный;
• Sea side Dev - премиальный, безмятежный, спокойный синий.

Стоимость n8n Playground на момент публикации этой статьи - 49,5$.

В сообществе n8n на GitHub есть еще одно очень интересное решение, которое я не могу не упомянуть. Редактор тем n8n Theme Editor позволяет изменять цвета темы n8n в режиме реального времени.

После того, как вы успешно выберете цвета, вы можете сохранить итоговую тему в отдельный файл и потом использовать ее в своем браузере во время работы с n8n.

К сожалению, даже после нескольких часов изучения документации и общения с LLM, мне не удалось полностью воспроизвести настройки. Максимум, чего я достиг - это запуск окна редактора в отдельных вкладках браузера (на http://localhost:3000 и http://localhost:5678). Затем, используя специальное расширение для обхода CORS, я смог открыть n8n и редактор тем в одном окне, но применить сами настройки так и не получилось.

Один из пользователей в репозитории n8n Theme Editor уже задавался вопросом об актуальности этого решения. Судя по активности (автор не ответил на вопрос, а последний коммит был сделан 3 года назад), репозиторий больше не поддерживается. Хотя в июле 2025 году в сообществе n8n один из пользователей упомянул данное решение, что его можно использовать в работе.

Тем не менее, раз такое решение для изменения стилей в n8n существовало раньше, я должен был о нем упомянуть (как оно работало и что давало пользователям). Возможно, с помощью нейросетей вы сможете реализовать нечто похожее, но более гибкое. Например, отдельный SaaS-проект для кастомизации стилей и тем в n8n.

Существуют так же специальные расширения для разных браузеров, которые позволяют редактировать и персонализировать интерфейс ваших любимых веб-сайтов. Например, одним из самых популярных расширений такого класса является Stylus. С его помощью вы можете легко установить свои стили CSS для рабочих процессов n8n.

Есть еще один лайфхак: вы можете внутри рабочего пространства добавить стикер Sticky Note на холст, а затем дважды кликнуть на него, чтобы начать редактирование, и далее вставить следующий код Markdown:

В результате вы можете добавить любую картинку из интернета и отмасштабировать ее по нужному размеру:

Если вы хотите, чтобы изображение растянулось на всю ширину стикера, добавьте к ссылке #full-width или #fullwidth (оба варианта работают).

После этого ширина картинки будет подстраиваться под ширину самого стикера. Поддерживаемые форматы: .png, .jpg, .jpeg, .webp и другие.

Если вы хотите, чтобы картинка менялась автоматически (например, разное изображение каждый день), вы можете разместить картинку в облачном хранилище и обновлять файл по ссылке. Стикер в n8n будет показывать актуальную версию каждый раз при загрузке страницы.

Свой собственный уникальный дизайн

Самый актуальный и легкий вариант в эпоху больших языковых моделей и нейросетей! Вы можете попросить любого чат-бота (ChatGPT, DeepSeek, Qwen, Gemini и др.) разработать свой собственный уникальный стиль или взять какую-то тему за аналог (например, если нашли что-то интересное в интернете), а затем попросить нейросеть написать вам скрипт, который будет переключать этот стиль прямо внутри интерфейса. Например, с использованием того же Tampermonkey.

Я адаптировал один очень интересный стиль под себя. Вот как он выглядит:

Скачать скрипт для Tampermonkey можно по ссылке ниже:

СКАЧАТЬ ШАБЛОН

 

Он работает 100%. Проверено! Теперь на его основе вы сможете создавать уникальные стили и цветовые схемы для n8n, используя нейросети в качестве помощников. И быть может, даже начнете продавать такие решения, как это делают авторы n8nThemer и n8n Playground. Кто знает!