experiments in a post-browser web
fix(page): improve background color detection for webview content
+45
-38
+45
-38
app/page/page.js
+45
-38
app/page/page.js
···
251
251
// This prevents white-text-on-transparent issues for pages that assume a background
252
252
webview.addEventListener('dom-ready', async () => {
253
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 = `
254
+
// Detection script that thoroughly checks for any background
255
+
const detectionJs = `
274
256
(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) => {
257
+
// Check if a color value represents "no background"
258
+
function isTransparentColor(color) {
283
259
if (!color) return true;
284
260
if (color === 'transparent') return true;
285
261
if (color === 'rgba(0, 0, 0, 0)') return true;
262
+
// Handle any rgba with alpha = 0
263
+
const rgbaMatch = color.match(/rgba\\s*\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*([\\d.]+)\\s*\\)/);
264
+
if (rgbaMatch && parseFloat(rgbaMatch[1]) === 0) return true;
286
265
return false;
287
-
};
266
+
}
267
+
268
+
// Check if an element has a background set (color or image)
269
+
function hasBackground(el) {
270
+
if (!el) return false;
271
+
const style = window.getComputedStyle(el);
272
+
273
+
// Check background-color
274
+
const bgColor = style.backgroundColor;
275
+
const hasColor = !isTransparentColor(bgColor);
288
276
289
-
const bodyBgTransparent = isTransparent(bodyStyle.backgroundColor);
290
-
const htmlBgTransparent = isTransparent(htmlStyle.backgroundColor);
277
+
// Check background-image (includes gradients)
278
+
const bgImage = style.backgroundImage;
279
+
const hasImage = bgImage && bgImage !== 'none';
291
280
292
-
// Only set background if both html and body are transparent
293
-
if (bodyBgTransparent && htmlBgTransparent) {
294
-
document.documentElement.style.backgroundColor = defaultBg;
281
+
return hasColor || hasImage;
295
282
}
283
+
284
+
// Check both html and body elements
285
+
const html = document.documentElement;
286
+
const body = document.body;
287
+
288
+
const htmlHasBg = hasBackground(html);
289
+
const bodyHasBg = hasBackground(body);
290
+
291
+
// If either has a background, we don't need to set one
292
+
return !(htmlHasBg || bodyHasBg);
296
293
})();
297
294
`;
298
295
299
-
await webview.insertCSS(css);
300
-
await webview.executeJavaScript(js);
301
-
DEBUG && console.log('[page] Injected default background color:', defaultBg);
296
+
// Run detection in page context
297
+
const needsBackground = await webview.executeJavaScript(detectionJs);
298
+
299
+
if (needsBackground) {
300
+
// Simple fix: set white background
301
+
const defaultBg = '#ffffff';
302
+
await webview.executeJavaScript(`
303
+
document.documentElement.style.backgroundColor = '${defaultBg}';
304
+
`);
305
+
DEBUG && console.log('[page] No background detected, set default:', defaultBg);
306
+
} else {
307
+
DEBUG && console.log('[page] Page has background, skipping default');
308
+
}
302
309
} catch (err) {
303
-
console.error('[page] Failed to inject default background:', err);
310
+
console.error('[page] Failed to check/set background:', err);
304
311
}
305
312
});
306
313