diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css index 1b335d3ab..c67452d22 100644 --- a/src/static/skins/colibris/src/pad-variants.css +++ b/src/static/skins/colibris/src/pad-variants.css @@ -133,6 +133,22 @@ box-shadow: 0 0 14px 0px var(--super-dark-color); } +/* == Root canvas / iOS status-bar safe area (issue #7606) == */ +/* The variant rules above only paint inner containers, leaving the root + transparent. iOS Safari fills the status-bar safe area above the page from + the ROOT canvas background (not `theme-color`), so a dark-mode pad showed a + white strip above the dark toolbar. Paint the root with the TOOLBAR colour + (matching `theme-color` and the OP's request that the bar match the toolbar) + so the safe area, toolbar, and address bar are one seamless colour. The + colours mirror toolbarColorForTokens / skin_toolbar_colors.ts. `color-scheme` + keeps UA-painted chrome (overscroll, scrollbars, form controls) in step. */ +html.super-light-toolbar, html.light-toolbar { color-scheme: light; } +html.super-dark-toolbar, html.dark-toolbar { color-scheme: dark; } +html.super-light-toolbar { background-color: var(--super-light-color); } +html.light-toolbar { background-color: var(--light-color); } +html.super-dark-toolbar { background-color: var(--super-dark-color); } +html.dark-toolbar { background-color: var(--dark-color); } + diff --git a/src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts b/src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts index 056d232e9..bd0206f6a 100644 --- a/src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts +++ b/src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts @@ -59,4 +59,18 @@ test.describe('dark color scheme', () => { // before pad.css so it takes effect at first paint. await expect(page.locator('html')).toHaveClass(/super-dark-editor/); }); + + test('root canvas matches the toolbar so the iOS status-bar area is not white', + async ({page}) => { + await goToNewPad(page); + // The root must carry the toolbar colour as its background — iOS + // Safari paints the status-bar safe area from the root canvas, not from + // theme-color, so leaving it transparent produced a white strip above + // the dark pad (issue #7606). #485365 == --super-dark-color, the dark + // toolbar colour. + await expect + .poll(() => page.evaluate(() => + getComputedStyle(document.documentElement).backgroundColor)) + .toBe('rgb(72, 83, 101)'); + }); });