I2P+ Руководство по темам

I2P+ поддерживает четыре встроенные темы и полную настройку через файлы override.css. Темы охватывают консоль маршрутизатора и все веб-приложения.

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

Четыре темы включены из коробки:

Dark — тема по умолчанию с тёмным фоном и оранжевыми/зелёными акцентами
Light — яркая тема со светлым фоном
Midnight — тёмная тема с фиолетовыми оттенками
Classic — традиционный вид консоли I2P

Темы применяются к консоли маршрутизатора и всем веб-приложениям (SusiMail, SusiDNS, I2PSnark, страница входа). Когда routerconsole.universal.theme=true, все веб-приложения используют одну тему. Когда false, каждое веб-приложение может иметь собственный выбор темы.

Выбор темы

Установите активную тему в консоли маршрутизатора в Конфигурация → Интерфейс или отредактируйте router.config:

routerconsole.theme=dark

Допустимые значения — любое имя каталога темы в docs/themes/console/.

Система override.css

override.css — основной механизм настройки. Это файл CSS, созданный пользователем и размещённый в каталоге темы. Поскольку он загружается после всего остального CSS, любое правило в override.css имеет приоритет над темами по умолчанию.

Как это работает

Создайте файл: поместите override.css в $I2P/docs/themes/console/<theme>/override.css
Он проверяется при каждой загрузке страницы
Он сохраняется после обновлений — никогда не перезаписывается маршрутизатором

Пример: Ocean Blue

/* Переопределение тёмной темы поворотом цветового тона на синий */
html {
    filter: hue-rotate(120deg);
}
body {
    background: repeating-linear-gradient(to right, rgba(0,0,0,0.8) 1px,
                rgba(0,0,0,0.8) 2px, rgba(0,0,32,0.6) 3px) #000;
}
img, #sb_localtunnels img, .sb *::before, #routerlogs li, .tunnelBuildStatus {
    filter: hue-rotate(-120deg) !important;
}

Быстрый трюк с поворотом цветового тона

Однострочное переопределение может полностью изменить цветовую схему:

/* Превратить зелёную тему в океанскую синюю */
html { filter: hue-rotate(120deg); }
/* Обратный поворот изображений, чтобы они сохранили естественные цвета */
img { filter: hue-rotate(-120deg) !important; }

Темизация всех веб-приложений

Чтобы применить override.css ко всем веб-приложениям, создайте его в каталоге темы каждого веб-приложения или создайте символическую ссылку:

ln -s ../console/dark/override.css $I2P/docs/themes/susimail/dark/override.css
ln -s ../console/dark/override.css $I2P/docs/themes/susidns/dark/override.css
ln -s ../console/dark/override.css $I2P/docs/themes/snark/dark/override.css

Примеры файлов переопределений

Каждая тема поставляется с примерами файлов переопределений, которые можно переименовать для активации:

Тема Dark

override.css.ocean.blue — поворот на синий/холодный тон
override.css.purple — фиолетовые тона
override.css.red — красные акценты

Тема Light

override.css.charcoal — тёмный вариант светлой темы
override.css.flat — плоский дизайн без градиентов
override.css.lowlight — сниженная яркость
override.css.solar.green — соляризованная зелёная
override.css.solarsurprise — вариант соляризации

Тема Midnight

override.css.purple — фиолетовые тона

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

Шаг 1: Создайте каталог темы

mkdir -p $I2P/docs/themes/console/mytheme/images

Шаг 2: Создайте `global.css`

Определите пользовательские свойства CSS. Минимум:

:root {
    --a: #494;
    --active: #f90;
    --hover: #f60;
    --ink: #ee9;
    --ink_bright: #aa3;
    --bodybg: #000;
    --border: 1px solid #242;
    --btn: linear-gradient(180deg, #001000, #000);
    --badge: linear-gradient(180deg, #020, #010);
}

Шаг 3: Создайте `console.css`

@import url(global.css);
@import url(../shared.css);
@import url(../images/itooplus.css);

body {
    background: var(--bodybg);
    color: var(--ink);
}
a { color: var(--a); }
a:hover { color: var(--hover); }

Шаг 4: Создайте изображения темы

Разместите как минимум:

images/thumbnail.png — миниатюра 48×48 для выбора
images/i2plogo.png — логотип консоли
images/favicon.svg — иконка сайта

Шаг 5: Создайте каталоги тем веб-приложений

Для каждого веб-приложения создайте параллельный каталог со собственным CSS, импортирующим global.css консоли:

$I2P/docs/themes/susimail/mytheme/susimail.css
$I2P/docs/themes/susidns/mytheme/susidns.css
$I2P/docs/themes/snark/mytheme/snark.css
$I2P/docs/themes/login/mytheme/login.css

Шаг 6: Установите тему

Установите в консоли маршрутизатора → Конфигурация → Интерфейс или отредактируйте router.config:

routerconsole.theme=mytheme

I2P+