experiments in a post-browser web
fix(page): set default background on webview content when page has none
+57
+57
app/page/page.js
+57
app/page/page.js
···
247
247
console.error('[page] Load failed:', e.errorCode, e.errorDescription);
248
248
});
249
249
250
+
// Set default background color on webview content if the page doesn't set one
251
+
// This prevents white-text-on-transparent issues for pages that assume a background
252
+
webview.addEventListener('dom-ready', async () => {
253
+
try {
254
+
// Get the current theme to determine light/dark mode
255
+
const theme = await api.theme.get();
256
+
const isDark = theme?.isDark || theme?.effectiveScheme === 'dark';
257
+
const defaultBg = isDark ? '#1a1a1a' : '#ffffff';
258
+
259
+
// Inject CSS that sets a default background only if the page doesn't have one
260
+
// Uses :where() for zero specificity so any page CSS will override it
261
+
const css = `
262
+
:where(html:not([style*="background"]):not([class])),
263
+
:where(body:not([style*="background"])) {
264
+
background-color: ${defaultBg};
265
+
}
266
+
/* Fallback: if html/body have no explicit background, set on html */
267
+
html {
268
+
background-color: ${defaultBg};
269
+
}
270
+
`;
271
+
272
+
// Also run JS to check computed styles and set background only if truly transparent
273
+
const js = `
274
+
(function() {
275
+
const defaultBg = '${defaultBg}';
276
+
277
+
// Check if body has a background set (either directly or via CSS)
278
+
const bodyStyle = window.getComputedStyle(document.body);
279
+
const htmlStyle = window.getComputedStyle(document.documentElement);
280
+
281
+
// rgba(0, 0, 0, 0) is the default "transparent" value
282
+
const isTransparent = (color) => {
283
+
if (!color) return true;
284
+
if (color === 'transparent') return true;
285
+
if (color === 'rgba(0, 0, 0, 0)') return true;
286
+
return false;
287
+
};
288
+
289
+
const bodyBgTransparent = isTransparent(bodyStyle.backgroundColor);
290
+
const htmlBgTransparent = isTransparent(htmlStyle.backgroundColor);
291
+
292
+
// Only set background if both html and body are transparent
293
+
if (bodyBgTransparent && htmlBgTransparent) {
294
+
document.documentElement.style.backgroundColor = defaultBg;
295
+
}
296
+
})();
297
+
`;
298
+
299
+
await webview.insertCSS(css);
300
+
await webview.executeJavaScript(js);
301
+
DEBUG && console.log('[page] Injected default background color:', defaultBg);
302
+
} catch (err) {
303
+
console.error('[page] Failed to inject default background:', err);
304
+
}
305
+
});
306
+
250
307
// --- Commands ---
251
308
252
309
api.commands.register({