diff --git a/CHANGELOG.md b/CHANGELOG.md
index 015fbe3..291107b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- The Modern theme takes its colours from the new logo: its navy, the blue of its bars and the
orange of its needle.
- The logo follows the page: the dark version in a dark theme, the light one in a light theme.
+- The browser tab's icon follows the page's light or dark mode too.
- Between releases, the version on the logo says so: 0.9.1-dev, not 0.9.0.
- The logo's needle is a brighter, redder orange that stands apart from the blue bars.
- The logo is in the top bar beside the add-feed button, in place of the name at the top of the
diff --git a/src/web.rs b/src/web.rs
index 396edc8..0f10fc6 100644
--- a/src/web.rs
+++ b/src/web.rs
@@ -71,6 +71,7 @@ pub fn router(state: WebState) -> Router {
.route("/logo-dark.svg", get(logo_dark))
.route("/favicon.ico", get(favicon))
.route("/favicon.png", get(favicon))
+ .route("/favicon-dark.png", get(favicon_dark))
.route("/apple-touch-icon.png", get(touch_icon))
.route("/app.js", get(app_js))
.route("/app.css", get(app_css))
@@ -589,6 +590,14 @@ async fn favicon() -> impl IntoResponse {
)
}
+/// web/logo-dark.svg at 128px, the tab's icon while the page is dark.
+async fn favicon_dark() -> impl IntoResponse {
+ (
+ [(header::CONTENT_TYPE, "image/png"), (header::CACHE_CONTROL, "max-age=86400")],
+ include_bytes!("../web/favicon-dark.png").as_slice(),
+ )
+}
+
/// web/logo.svg at 180px, for an iPhone's home screen. It is opaque edge to edge, as iOS paints
/// a transparent icon's background black and cuts its own corners.
async fn touch_icon() -> impl IntoResponse {
diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js
index d875439..a3d6691 100644
--- a/tests/ui/app.spec.js
+++ b/tests/ui/app.spec.js
@@ -1193,9 +1193,12 @@ test('the logo is the dark one in dark mode and the light one in light mode', as
});
test('the favicon is the logo, square, from both pages', async ({ page }) => {
- await expect(page.locator('link[rel="icon"]')).toHaveAttribute('href', /^\/favicon\.png\?v=[0-9a-f]{12}$/);
+ await page.evaluate(() => setTheme('modern', 'light'));
+ await expect(page.locator('#favicon')).toHaveAttribute('href', /^\/favicon\.png\?v=[0-9a-f]{12}$/);
+ await page.evaluate(() => setTheme('modern', 'dark'));
+ await expect(page.locator('#favicon')).toHaveAttribute('href', /^\/favicon-dark\.png\?v=[0-9a-f]{12}$/);
// A browser asks for /favicon.ico on its own, signed in or not.
- for (const path of ['/favicon.ico', '/favicon.png', '/apple-touch-icon.png']) {
+ for (const path of ['/favicon.ico', '/favicon.png', '/favicon-dark.png', '/apple-touch-icon.png']) {
const r = await page.request.get(path, { headers: { cookie: '' } });
expect(r.status(), path).toBe(200);
expect(r.headers()['content-type'], path).toBe('image/png');
diff --git a/web/admin.html b/web/admin.html
index 8f04894..25a3f89 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -5,7 +5,7 @@
iPX admin
-
+
diff --git a/web/build.mjs b/web/build.mjs
index 1c19cb1..fbc892c 100644
--- a/web/build.mjs
+++ b/web/build.mjs
@@ -75,7 +75,7 @@ export function buildPage(name, { minify = true } = {}) {
// The icons are named by their contents too. They are kept a day under a fixed name, and a new
// logo went unseen for that day, in browsers and at Cloudflare's edge. The server ignores the
// query; /favicon.ico, which a browser asks for on its own, cannot carry one.
- out = out.replace(/(href|src|srcset)="\/(favicon\.png|apple-touch-icon\.png|logo\.svg|logo-dark\.svg)"/g,
+ out = out.replace(/(href|src|srcset|data-light|data-dark)="\/(favicon\.png|favicon-dark\.png|apple-touch-icon\.png|logo\.svg|logo-dark\.svg)"/g,
(_, attr, file) => `${attr}="/${file}?v=${hash(fs.readFileSync(path.join(here, file)))}"`);
if (!minify) return { html: out, js, script };
const r = html.minifySync(out, { minifyJs: false, minifyCss: true, removeComments: true });
diff --git a/web/favicon-dark.png b/web/favicon-dark.png
new file mode 100644
index 0000000..5d15bd0
Binary files /dev/null and b/web/favicon-dark.png differ
diff --git a/web/index.html b/web/index.html
index f342df6..a34441b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,7 +5,7 @@
iPX
-
+
diff --git a/web/login.html b/web/login.html
index f1ed182..24d2235 100644
--- a/web/login.html
+++ b/web/login.html
@@ -4,7 +4,8 @@
Sign in — iPX
-
+
+