From 67c0e391fd14ee9a41273ad8bc4c113451506891 Mon Sep 17 00:00:00 2001 From: John McLear Date: Tue, 9 Jun 2026 15:13:11 +0100 Subject: [PATCH] fix(skin): paint the root canvas so iOS dark mode has no white status bar (#7606) (#7931) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The OP still saw a white strip above the dark pad on iOS Safari even with the theme-color metas in place. theme-color only tints the address-bar chrome; the status-bar safe area at the very top is painted by iOS from the ROOT canvas background. The colibris background variants only colour inner containers (#editorcontainerbox, body descendants), leaving and transparent (computed rgba(0,0,0,0)) with color-scheme: normal — so the canvas fell back to the UA light default (white). Android tints its chrome from theme-color, which is why it looked fine there but iOS did not. Paint the root per toolbar variant with the toolbar colour (matching theme-color and the OP's request that the bar match the toolbar) and set color-scheme so the safe area, toolbar, and address bar are one seamless colour. Verified in a mobile viewport: dark-OS root background is now rgb(72,83,101) (#485365, == --super-dark-color, the toolbar colour); light-OS stays white. Colours mirror skin_toolbar_colors.ts. Co-authored-by: Claude Opus 4.8 (1M context) --- src/static/skins/colibris/src/pad-variants.css | 16 ++++++++++++++++ .../specs/theme_color_dark_mode.spec.ts | 14 ++++++++++++++ 2 files changed, 30 insertions(+) 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)'); + }); });