// 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
}