Mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2026-07-17 16:47:05 +00:00
Code Issues Projects Releases Wiki Activity

fix(skin): paint the root canvas so iOS dark mode has no white status bar (#7606) (#7931)

Browse source 
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 <html> and <body>
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 <html> 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) <noreply@anthropic.com>
This commit is contained in:
John McLear 2026-06-09 15:13:11 +01:00 • committed by GitHub
parent b420cf4850
commit 67c0e391fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/static/skins/colibris/src/pad-variants.css
View file

@ -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 <html> 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); }

14
src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts
View file

@ -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 <html> 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)');
});
});