rays/ipx
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Modern in the logo's colours, and the logo in the page's mode (#63)

Browse Source 
Modern's palette was sampled from the 2004 iPodderX icon: a neutral navy,
its screen blue and amber EQ bars. It now takes the new logo's colours,
the dark half from logo-dark.svg (navy ground, #8fc2ea scale, #ff6a1a
needle) and the light half from logo.svg (sky ground, #2f6aa0 scale, the
needle taken down to #c43e00 so white on it clears AA). The pending amber
and the error red moved apart from the needle's orange, and the sign-in
page's copy of the palette follows.

The pages always showed logo.svg, the light variant, even in a dark
theme; logo-dark.svg was never served. It is now, and the app and admin
pages show whichever matches data-mode, dark until the script says light,
as the palette is. The sign-in page, which has no account's theme, picks
by the system's with <picture>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-09-28 18:05:44 +00:00
parent 3cb36ab8b7
commit f9c9c2b7cc
8 changed files with 99 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
tests/ui/app.spec.js
View File

@@ -47,10 +47,10 @@ test('Settings picks a theme and, where it has both, light, dark or Auto', async
// Auto follows the system, live, with no reload.
await page.emulateMedia({ colorScheme: 'light' });
await expect.poll(root).toEqual(['modern', 'light']);
await expect.poll(bg).toBe('rgb(242, 244, 247)'); // Modern's light --bg
await expect.poll(bg).toBe('rgb(238, 245, 251)'); // Modern's light --bg
await page.emulateMedia({ colorScheme: 'dark' });
await expect.poll(root).toEqual(['modern', 'dark']);
await expect.poll(bg).toBe('rgb(14, 19, 27)'); // Modern's dark --bg
await expect.poll(bg).toBe('rgb(10, 23, 38)'); // Modern's dark --bg
// Dracula, then its light half, Alucard.
await page.locator('#stheme').selectOption('dracula');
@@ -559,9 +559,11 @@ test('a second person has their own feeds and their own read state', async ({ br
const page = await ctx.newPage();
await page.goto('/login');
// The sign-in page shows the logo, so it has to load before anyone has signed in.
const logo = await page.request.get('/logo.svg');
expect(logo.status()).toBe(200);
expect(logo.headers()['content-type']).toBe('image/svg+xml');
for (const path of ['/logo.svg', '/logo-dark.svg']) {
const logo = await page.request.get(path);
expect(logo.status(), path).toBe(200);
expect(logo.headers()['content-type'], path).toBe('image/svg+xml');
}
await page.locator('#name').fill('sam');
await page.locator('#pw').fill('sampassword');
await page.locator('button[type=submit]').click();
@@ -1178,6 +1180,18 @@ test('a file not yet downloaded has its icon in line with the rest of its row',
for (const o of offsets) expect(Math.abs(o)).toBeLessThanOrEqual(1);
});
test('the logo is the dark one in dark mode and the light one in light mode', async ({ page }) => {
const shown = () => page.locator('#applogo img:visible').getAttribute('src');
await page.evaluate(() => setTheme('modern', 'dark'));
expect(await shown()).toMatch(/^\/logo-dark\.svg\?v=/);
await page.evaluate(() => setTheme('modern', 'light'));
expect(await shown()).toMatch(/^\/logo\.svg\?v=/);
// Paper has only a light palette, so the light logo whatever the mode asked.
await page.evaluate(() => setTheme('paper', 'dark'));
expect(await shown()).toMatch(/^\/logo\.svg\?v=/);
await page.evaluate(() => setTheme('modern', 'dark'));
});
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}$/);
// A browser asks for /favicon.ico on its own, signed in or not.