I2P+

I2P+ Theming Guide

I2P+ supports four built-in themes and full customization via override.css files. Themes span the router console and all webapps.

Built-in Themes

Four themes are included out of the box:

• Dark — the default theme with dark backgrounds and orange/green accents
• Light — a bright theme with light backgrounds
• Midnight — a deep purple-toned dark theme
• Classic — the traditional I2P console look

Themes apply across the router console and all webapps (SusiMail, SusiDNS, I2PSnark, login page). When routerconsole.universal.theme=true, all webapps share the same theme. When false, each webapp can have its own theme preference.

Theme Selection

Set the active theme in the router console under Config → UI, or edit router.config:

Valid values are any theme directory name under docs/themes/console/.

The override.css System

override.css is the primary customization mechanism. It is a user-created CSS file placed in a theme directory. Because it loads after all other CSS, any rule in override.css wins over the theme defaults.

How it works

1. Create the file: place override.css in $I2P/docs/themes/console/<theme>/override.css
2. It's checked on every page load
3. It survives upgrades — never overwritten by the router

Example: Ocean Blue override

/* Override the dark theme with a blue hue rotation */
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;
}

Quick hue rotation trick

A single-line override can completely shift the color scheme:

/* Turn green theme to ocean blue */
html { filter: hue-rotate(120deg); }
/* Un-rotate images so they stay natural colors */
img { filter: hue-rotate(-120deg) !important; }

Theming all webapps

To apply override.css to all webapps, create it in each webapp theme directory, or symlink:

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

Example Override Files

Each theme ships with example override files you can rename to activate:

Dark theme

• override.css.ocean.blue — blue/cold hue rotation
• override.css.purple — purple tones
• override.css.red — red accents

Light theme

• override.css.charcoal — dark variant of the light theme
• override.css.flat — flat design without gradients
• override.css.lowlight — reduced brightness
• override.css.solar.green — solarized green
• override.css.solarsurprise — solarized variant

Midnight theme

• override.css.purple — purple tones

Creating a Custom Theme

Step 1: Create the theme directory

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

Step 2: Create global.css

Define your CSS custom properties. At minimum:

: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);
}

Step 3: Create 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); }

Step 4: Create theme images

Place at minimum:

• images/thumbnail.png — 48×48 picker thumbnail
• images/i2plogo.png — console logo
• images/favicon.svg — favicon

Step 5: Create webapp theme directories

For each webapp, create a parallel directory with its own CSS that imports the console's 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

Step 6: Set the theme

Set in router console → Config → UI, or edit router.config: