Paint the bar around the Dynamic Island in the theme's background (#147)
The page named no theme-color, so the status bar iOS draws around the Dynamic Island was its own black or white, a band across the top of every theme. The page and the admin page now carry one, set to the page's background whenever the theme or mode changes; Android's toolbar takes it too. Not seen on a phone yet: the browser test checks the colour matches, not what iOS does with it. A browser test at 360px covers this and #146's row of buttons. The stub DOM gains getComputedStyle, which every browser has. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="theme-color" content="#0a1726">
|
||||
<title>iPX admin</title>
|
||||
<link rel="icon" type="image/png" sizes="128x128" id="favicon" href="/favicon.png" data-light="/favicon.png" data-dark="/favicon-dark.png">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="theme-color" content="#0a1726">
|
||||
<title>iPX</title>
|
||||
<link rel="icon" type="image/png" sizes="128x128" id="favicon" href="/favicon.png" data-light="/favicon.png" data-dark="/favicon-dark.png">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
@@ -38,6 +38,9 @@ function setTheme(name = theme.name, mode = theme.mode, save = false){
|
||||
: theme.mode === 'auto' ? (systemDark && !systemDark.matches ? 'light' : 'dark') : theme.mode;
|
||||
// The tab's icon in the same variant as the logo on the page.
|
||||
const fav = $('#favicon'); if(fav) fav.href = fav.dataset[root.dataset.mode];
|
||||
// The bar iOS draws round the Dynamic Island takes this colour, as Android's toolbar does.
|
||||
// Without it the bar was the system's own black or white, a band across the top of the page.
|
||||
const tc = $('meta[name=theme-color]'); if(tc) tc.content = getComputedStyle(document.body).backgroundColor;
|
||||
const sel = $('#stheme'); if(sel) sel.value = theme.name;
|
||||
const ms = $('#smode'); if(ms) ms.value = theme.mode;
|
||||
const mf = $('#smodefield'); if(mf) mf.hidden = !both;
|
||||
|
||||
Reference in New Issue
Block a user