Skip to main content

Electron, изображения и шрифты

CSS работает в renderer на Chromium, поставляемом с Electron. Конкретная поддержка свойства определяется этой версией, а не системным браузером. В package.json указан Electron ^43.1.1; это ограничение зависимости, а не подтверждение версии любого установленного лаунчера. В dev основной документ открывается с http://127.0.0.1:5173, в сборке — через loadFile из dist/index.html. Vite использует base: './'. Для локальных изображений и шрифтов используйте штатный выбор медиа; лаунчер сохраняет их в управляемом хранилище. Импорт .xntheme восстанавливает вложенные ресурсы и ссылки на них. Текст, вставленный в редактор, не имеет контекста произвольной папки на диске. Абсолютный веб-путь /image.png и путь C:\\Pictures\\image.png не являются переносимыми адресами.

Локальное медиа

Используйте выбор файла в редакторе фона/шрифта. theme-files.ts копирует разрешённый файл в theme-media внутри userData, даёт ему имя SHA-256 и адрес xnl-theme://asset/<hash>.<ext>. Не нужно вручную придумывать этот адрес: возьмите возвращённый редактором источник. Протокол выдаёт только разрешённые имена из этой папки, а не произвольные пути диска. Ограничение одного выбираемого файла — 128 МиБ. Разрешённое расширение ещё не гарантирует поддержку любого кодека внутри видео. Прозрачность/затемнение фона ограничены 0…1, размытие медиа — 0…24px. Видео ставится на паузу при скрытом документе или работающем Minecraft; проверка запуска выполняется периодически. Выбор гарнитуры по имени использует уже установленный шрифт. Выбор файла загружает FontFace с именем XneonThemeFont. Одного font-family: "My Font" недостаточно для загрузки файла. Для собственного @font-face нужен доступный URL и поддерживаемый формат; для переносимости удобнее штатный выбор файла. В CSS допустимы url() и @font-face, но они подчиняются сетевой политике, доступности ресурса и правилам Chromium. @import браузер принимает только в начале таблицы стилей. Сериализатор сохраняет ведущие @charset, @import и объявления порядка слоёв перед автоматически создаваемым :root, поэтому они не теряются при повторном сохранении. Пишите импорты до обычных правил; импорт посреди таблицы остаётся ошибкой CSS. Специальная строка --custom-background-video: url(...) читается JavaScript из текста темы; поддержаны http(s), xnl-theme и data:video. Это не обычная CSS-переменная источника: её переопределение в медиазапросе или закомментированный пример может не соответствовать обычному каскаду, поскольку используется поиск по тексту. Для предсказуемого результата выбирайте видео в визуальном редакторе.

Иконки и границы документа

Для svg.icon-tabler, svg.tabler-icon, svg[data-icon] глобальный CSS поддерживает --icon-image, --icon-fit и --icon-original-opacity. При замене задайте картинку и скройте исходные контуры на конкретной иконке; после удаления этих объявлений рисунок восстановится. Фоновое изображение не обязано наследовать currentColor. Окна выбора файла и нативные уведомления ОС не являются DOM основного окна. Так же отдельны внешняя OAuth-авторизация, облачные callback-страницы и экспортированный HTML-список модов. Читалка новостей получает сгенерированные цвета и отдельный пользовательский CSS статьи. Тема не меняет оформление Windows и внешнего браузера.

CSS внутри статьи

Откройте свою тему → CSS. Добавьте правила статьи в общий редактор рядом с правилами интерфейса. Они подключаются и к гостевому документу читалки; отдельного поля нет. Ниже учебный пример для страниц, содержащих article и p; структура конкретного сайта может отличаться:
Для цвета здесь нужен !important, поскольку базовая читалка также задаёт важные цвета текста. Основная палитра применяется первой, затем ваши правила. Ведущие импорты выносятся перед базовыми правилами. Правила статьи входят в общий CSS, переносятся .xntheme и отключаются переключателем пользовательского CSS. Дополнительные стили статьи из старых архивов также продолжают применяться. После удаления фрагмента и сохранения открытая статья вернётся к базовому оформлению.

Инспектор и DevTools

Встроенный инспектор

Кнопка «Инспектор CSS» в редакторе включает инструмент выбора элементов. Его также можно включить или выключить сочетанием Alt+Shift+C на нужной странице. Инспектор показывает адрес элемента для будущего правила; применение этого правила выполняет механизм инжекции CSS.
  1. Откройте нужный экран и состояние: например, главную страницу или раскрытое меню. Если редактор закрывает нужный элемент, сначала сохраните тему и закройте редактор, затем включите инспектор через Alt+Shift+C.
  2. Удерживайте Alt и двигайте мышь: рамка подсвечивает элемент. Без Alt можно пользоваться интерфейсом обычным образом, например открывать меню.
  3. Нажмите Alt+клик по элементу. В панели появится селектор. Такой клик перехватывается инспектором и не запускает действие выбранной кнопки.
  4. Отпустите Alt и нажмите кнопку копирования рядом с селектором. Его также можно выделить в поле и скопировать вручную.
  5. Закройте инспектор кнопкой в панели или сочетанием Alt+Shift+C. Откройте свою тему в режиме CSS, добавьте правило с полученным селектором и нужными свойствами. Нажмите «Применить CSS», затем «Сохранить» и проверьте нужный экран.
Инспектор предпочитает точный data-ui, ID, data-component или data-slot, для SVG может уточнить класс иконки и её владельца. Если у элемента нет маркера, выбирается ближайший подходящий предок. Поэтому адрес иногда относится к контейнеру, а не непосредственно к нажатому тексту. У повторяющихся карточек адрес может совпадать: для оформления одной карточки уточните контекст или её атрибуты. Инспектор копирует селектор, а свойства и значения вы задаёте самостоятельно. Он не добавляет правило в тему автоматически. Выбор работает с DOM основного окна; правила статьи внутри webview задаются в том же CSS-редакторе, а для 3D-превью — параметры, описанные в этом руководстве. Для проверки адреса достаточно временного правила:
Если рамка видна на нужной кнопке, селектор работает. Удалите диагностическое правило перед публикацией. Если рамки нет, сначала убедитесь, что открыта главная страница, CSS включён и применён.

Доступность DevTools

window.ts задаёт devTools: isDev; isDev определяется как непакованное приложение либо NODE_ENV === "development". В обычной production-сборке DevTools отключены. Меню приложения снимается, собственного обработчика F12 или пункта открытия DevTools в исследованном коде нет. Поэтому руководство не обещает горячую клавишу для готовой сборки. Для разработки есть подтверждённый механизм в launch-electron-dev.mjs: переменная ELECTRON_DEBUG_PORT открывает remote debugging. Пример PowerShell из корня репозитория при установленных зависимостях:
Затем откройте локальную страницу отладочного порта http://127.0.0.1:9223 в браузере и выберите документ лаунчера, если браузер предлагает инспекцию. Отладочный порт даёт доступ к приложению: используйте его локально для разработки и уберите переменную после завершения:
Это запуск исходников, а не способ включения DevTools в установленной production-сборке. Порт может быть занят, а полный dev-запуск может остановиться на ошибках текущей рабочей копии.

Проверка стилей в доступных DevTools

  1. В Elements включите выбор элемента и нажмите на интересующий узел. Найдите ID, классы, data-атрибуты и родителей.
  2. В Styles найдите своё правило. Если его нет — селектор не совпал, CSS не загрузился или узел относится к другому документу.
  3. Если объявление перечёркнуто, посмотрите победившее правило, слой, !important, inline-style и специфичность. Невалидное значение также может помечаться как ошибка.
  4. В Computed найдите конечные background-color, color, font-family, размеры, overflow. Разверните свойство, чтобы увидеть источник.
  5. Для переменной посмотрите <html> и нужного потомка: переменная может быть переопределена ближе к элементу. Проверяйте не только значение переменной, но и свойство, которое должно её читать.
  6. Временно измените одно значение в Styles. Если результат верный, перенесите его в редактор темы и сохраните. Изменение только в DevTools не сохраняется как тема.
  7. Проверьте наличие style#theme-base-css и style#theme-custom-css при включённом непустом пользовательском CSS. Если нет пользовательского тега, ищите проблему применения/переключателя, а не специфичности.
  8. В Network проверьте ошибку URL изображения/шрифта и доступность ответа. Наличие файла на диске ещё не означает доступность URL из документа.