jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

fix(sharing): make public note colors follow the visitor's theme

Browse Source 
The public share page picked the note background from the light palette
unconditionally, while app.html applies data-theme="dark" on every page.
A visitor in dark mode therefore got a light pastel card rendered with the
dark theme's light text colour — washed out and barely readable.

Emit both palettes as custom properties and let [data-theme] select one, so
the correct colour lands on the first paint of this SSR page instead of
flashing after hydration.

Reported by a user over email.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-07-31 12:03:39 +02:00
committed by Fred Cabassut
co-authored by Claude Opus 5
parent 4e3b6dfd1c
commit b5109e7522
2 changed files with 66 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/public-sharing.spec.ts
+48
View File
@@ -121,6 +121,54 @@ test.describe('Public Note Sharing', () => {
await expect(card.getByTestId('sharing-indicator')).toBeVisible();
});
test('Scenario: Shared note follows a dark-mode visitor theme', async ({
authenticatedPage: page,
browser
}) => {
// Given a publicly shared note colored "fog"
const note = await createNoteViaApi(page, 'Dark Visitor Note', 'Readable in dark mode');
await page.request.patch(`/api/notes/${note.id}`, { data: { color: 'fog' } });
const token = await createShareViaApi(page, note.id);
// When a visitor whose system prefers dark mode opens the share URL
const context = await browser.newContext({ colorScheme: 'dark' });
const publicPage = await context.newPage();
await publicPage.goto(`/s/${token}`);
// Then the note is rendered on the dark "fog" surface, so its text stays legible
await expect(publicPage.locator('html')).toHaveAttribute('data-theme', 'dark');
await expect(publicPage.getByTestId('shared-note')).toHaveCSS(
'background-color',
'rgb(34, 46, 58)'
);
await context.close();
});
test('Scenario: Shared note follows a light-mode visitor theme', async ({
authenticatedPage: page,
browser
}) => {
// Given a publicly shared note colored "fog"
const note = await createNoteViaApi(page, 'Light Visitor Note', 'Readable in light mode');
await page.request.patch(`/api/notes/${note.id}`, { data: { color: 'fog' } });
const token = await createShareViaApi(page, note.id);
// When a visitor whose system prefers light mode opens the share URL
const context = await browser.newContext({ colorScheme: 'light' });
const publicPage = await context.newPage();
await publicPage.goto(`/s/${token}`);
// Then the note is rendered on the light "fog" surface
await expect(publicPage.locator('html')).not.toHaveAttribute('data-theme', 'dark');
await expect(publicPage.getByTestId('shared-note')).toHaveCSS(
'background-color',
'rgb(212, 228, 237)'
);
await context.close();
});
test('Scenario: Copy link button copies to clipboard', async ({
authenticatedPage: page
}) => {