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:
@@ -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