nmemmertandClaude Sonnet 5.5
7fc5e4b534
Build and Push Docker Image / build-and-push (push) Successful in 4m30s
The app now sets theme-color, color-scheme and the page background from the chosen theme, so the iPad status-bar area no longer shows a light band over a dark theme. Every top bar leaves room for the status bar via a safe-top class (replacing a rule that padded every <header>). Install defaults match the paper theme. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
21 lines
979 B
JavaScript
21 lines
979 B
JavaScript
// Tells the browser / OS what the page looks like, so the parts it draws itself (the iPad and
|
|
// iPhone status bar area, the address bar, overscroll, scrollbars, form controls) match the
|
|
// chosen theme instead of defaulting to a light page.
|
|
import { READER_THEMES } from '../components/reader/readerThemes.js';
|
|
|
|
export function applySystemChrome(themeId, doc = document) {
|
|
const theme = READER_THEMES[themeId] ?? READER_THEMES.paper;
|
|
const { '--r-bg': bg, '--r-bar': bar } = theme.vars;
|
|
const root = doc.documentElement;
|
|
root.style.backgroundColor = bg;
|
|
root.style.colorScheme = themeId === 'dark' ? 'dark' : 'light';
|
|
if (doc.body) doc.body.style.backgroundColor = bg;
|
|
let meta = doc.querySelector('meta[name="theme-color"]');
|
|
if (!meta) {
|
|
meta = doc.createElement('meta');
|
|
meta.setAttribute('name', 'theme-color');
|
|
doc.head.appendChild(meta);
|
|
}
|
|
meta.setAttribute('content', bar); // matches the top bar, so the status bar area blends into it
|
|
}
|