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

I2P+ 主题指南

I2P+ 支持四种内置主题，并通过 override.css 文件提供完全自定义功能。主题跨越路由器控制台和所有 Web 应用。

内置主题

开箱即包含四种主题：

Dark — 默认主题，深色背景搭配橙色/绿色强调色
Light — 明亮主题，浅色背景
Midnight — 深紫色调的暗色主题
Classic — 传统 I2P 控制台外观

主题适用于路由器控制台和所有 Web 应用（SusiMail、SusiDNS、I2PSnark、登录页面）。当 routerconsole.universal.theme=true 时，所有 Web 应用共享同一主题。为 false 时，每个 Web 应用可以有自己的主题偏好。

主题选择

在路由器控制台的 配置 → 界面 中设置活动主题，或编辑 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; }

为所有 Web 应用设置主题

要将 override.css 应用到所有 Web 应用，请在每个 Web 应用主题目录中创建它，或创建符号链接：

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：创建 Web 应用主题目录

对于每个 Web 应用，创建一个带有自己的 CSS 的并行目录，该 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+