fix(skin): paint root canvas so iOS dark mode has no white status bar (#7606) by JohnMcLear · Pull Request #7931 · ether/etherpad

JohnMcLear · 2026-06-09T14:09:20Z

Problem

Follow-up to #7909 (merged). The OP confirmed Android Chrome/Firefox now look correct, but iOS Safari still shows a white strip at the very top in dark mode — the status-bar area above the dark toolbar. Screenshot: dark toolbar + dark pad, but a white band behind the iOS status bar (clock/battery).

Root cause

theme-color only tints the address-bar chrome. The status-bar safe area at the top is painted by iOS Safari from the page's root canvas background — not from theme-color. (Android tints its chrome from theme-color, which is why it looked fine there but iOS didn't.)

In the colibris skin the background variants only colour inner containers (#editorcontainerbox, body descendants); <html> and <body> stay transparent. Measured in a mobile dark-mode viewport on the merged build:

htmlBg: rgba(0, 0, 0, 0)   bodyBg: rgba(0, 0, 0, 0)   colorScheme: normal

Transparent root + color-scheme: normal → the UA canvas falls back to the light default (white) → white status-bar strip.

Fix

Paint the <html> root per toolbar variant with the toolbar colour (matching theme-color and the OP's original request that the bar match the toolbar), and set color-scheme so the safe area, toolbar, and address bar are one seamless colour. Colours mirror skin_toolbar_colors.ts.

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

Verification (mobile viewport, this branch)

Dark OS: root background-color is now rgb(72, 83, 101) (#485365, == toolbar == theme-color), color-scheme: dark.
Light OS: root stays rgb(255, 255, 255), color-scheme: light — unchanged.
Frontend regression test added asserting the dark root canvas matches the toolbar.

The remaining real-device iOS confirmation is the OP re-testing on pad-dev once this deploys; the white strip is iOS chrome that headless engines can't render, but the root-canvas colour is the documented mechanism and is now correct.

🤖 Generated with Claude Code

… bar (#7606) 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>

qodo-code-review · 2026-06-09T14:09:26Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

qodo-free-for-open-source-projects · 2026-06-09T14:09:30Z

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

qodo-free-for-open-source-projects · 2026-06-09T14:10:26Z

PR Summary by Qodo

Fix iOS dark-mode status bar by painting the Colibris root canvas
🐞 Bug fix 🧪 Tests 🕐 10-20 Minutes

Walkthroughs

User Description

Problem

Follow-up to #7909 (merged). The OP confirmed Android Chrome/Firefox now look correct, but iOS Safari still shows a white strip at the very top in dark mode — the status-bar area above the dark toolbar. Screenshot: dark toolbar + dark pad, but a white band behind the iOS status bar (clock/battery).

Root cause

theme-color only tints the address-bar chrome. The status-bar safe area at the top is painted by iOS Safari from the page's root canvas background — not from theme-color. (Android tints its chrome from theme-color, which is why it looked fine there but iOS didn't.)

In the colibris skin the background variants only colour inner containers (#editorcontainerbox, body descendants); <html> and <body> stay transparent. Measured in a mobile dark-mode viewport on the merged build:

htmlBg: rgba(0, 0, 0, 0)   bodyBg: rgba(0, 0, 0, 0)   colorScheme: normal

Transparent root + color-scheme: normal → the UA canvas falls back to the light default (white) → white status-bar strip.

Fix

Paint the <html> root per toolbar variant with the toolbar colour (matching theme-color and the OP's original request that the bar match the toolbar), and set color-scheme so the safe area, toolbar, and address bar are one seamless colour. Colours mirror skin_toolbar_colors.ts.

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

Verification (mobile viewport, this branch)

Dark OS: root background-color is now rgb(72, 83, 101) (#485365, == toolbar == theme-color), color-scheme: dark.
Light OS: root stays rgb(255, 255, 255), color-scheme: light — unchanged.
Frontend regression test added asserting the dark root canvas matches the toolbar.

The remaining real-device iOS confirmation is the OP re-testing on pad-dev once this deploys; the white strip is iOS chrome that headless engines can't render, but the root-canvas colour is the documented mechanism and is now correct.

🤖 Generated with Claude Code

AI Description

• Paint the `` root background per toolbar variant to prevent iOS Safari white safe-area strip.
• Set color-scheme on the root to keep UA-painted chrome consistent with the selected variant.
• Add a frontend regression test asserting the dark root canvas matches the toolbar color.

Diagram

graph TD
  A["Skin variant tokens"] --> B["<html> toolbar class"] --> C["pad-variants.css"] --> D["Root bg + color-scheme"] --> E["iOS status-bar safe area"]
  B --> F["theme-color meta"] --> G["Address bar tint"]

High-Level Assessment

The following are alternative approaches to this PR:

1. Paint root via background-variant rules (instead of toolbar variants)

➕ Keeps root background aligned with page background rather than toolbar color
➕ May better match non-toolbar pages if variants diverge
➖ Does not satisfy the explicit requirement that the status-bar area match the toolbar
➖ Could reintroduce mismatch between toolbar and safe-area when toolbar/background variants differ

2. Rely on meta tags only (theme-color / apple-mobile-web-app-status-bar-style)

➕ Minimal CSS changes
➕ Works for address bar chrome in many browsers
➖ Does not reliably affect iOS Safari’s status-bar safe-area in normal browsing mode
➖ apple-mobile-web-app-status-bar-style mainly targets standalone/PWA behavior, not Safari chrome

Recommendation: Current approach (painting `` with the toolbar color and setting color-scheme) is the most reliable fix for iOS Safari’s safe-area behavior while keeping toolbar/address-bar visuals consistent. The added regression test appropriately locks the computed root canvas color to the expected dark toolbar value.

File Changes

Bug fix (1)

pad-variants.css Paint '<html>' root canvas and set 'color-scheme' per toolbar variant +16/-0
Paint '<html>' root canvas and set 'color-scheme' per toolbar variant
• Adds explicit '<html>' rules for each *-toolbar variant to set 'background-color' to the toolbar color and 'color-scheme' to light/dark. This ensures iOS Safari paints the top safe-area (status bar region) with the correct dark color instead of the UA default white.
src/static/skins/colibris/src/pad-variants.css

Tests (1)

theme_color_dark_mode.spec.ts Add regression test for dark root canvas background color +14/-0
Add regression test for dark root canvas background color
• Introduces a Playwright test that asserts the computed '<html>' background color equals the expected super-dark toolbar RGB value. This guards against regressions that would restore a transparent root canvas and reintroduce the iOS white status-bar strip.
src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts

JohnMcLear merged commit 67c0e39 into develop Jun 9, 2026
30 of 31 checks passed

JohnMcLear deleted the fix-7606-ios-status-bar-canvas branch June 9, 2026 14:13

JohnMcLear mentioned this pull request Jun 10, 2026

chore(release): prep 3.3.1 — ueberdb2 6.1.9 + changelog #7939

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix(skin): paint root canvas so iOS dark mode has no white status bar (#7606)#7931
JohnMcLear merged 1 commit into
developfrom
fix-7606-ios-status-bar-canvas

JohnMcLear commented Jun 9, 2026

Uh oh!

qodo-code-review Bot commented Jun 9, 2026

Uh oh!

qodo-free-for-open-source-projects Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

qodo-free-for-open-source-projects Bot commented Jun 9, 2026

Problem

Root cause

Fix

Verification (mobile viewport, this branch)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

JohnMcLear commented Jun 9, 2026

Problem

Root cause

Fix

Verification (mobile viewport, this branch)

Uh oh!

qodo-code-review Bot commented Jun 9, 2026

Qodo reviews are paused for this user.

Uh oh!

qodo-free-for-open-source-projects Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Great, no issues found!

Uh oh!

qodo-free-for-open-source-projects Bot commented Jun 9, 2026

PR Summary by Qodo

Walkthroughs

Problem

Root cause

Fix

Verification (mobile viewport, this branch)

File Changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

qodo-free-for-open-source-projects Bot commented Jun 9, 2026 •

edited

Loading