diff --git a/web/src/pages/DocsPage.tsx b/web/src/pages/DocsPage.tsx index 95ef2718f7..fa929377b1 100644 --- a/web/src/pages/DocsPage.tsx +++ b/web/src/pages/DocsPage.tsx @@ -50,7 +50,15 @@ export default function DocsPage() { className={cn( "min-h-0 w-full min-w-0 flex-1", "rounded-sm border border-current/20", - "bg-background", + // Docusaurus paints over a transparent / and + // relies on the browser's canvas color (light by default) to + // fill the viewport. Inheriting the dashboard's dark color + // scheme makes that canvas dark, so the docs body text — which + // is tuned for a light canvas — becomes near-invisible. Force a + // light color scheme + white background on the iframe element so + // the docs render cleanly regardless of the active dashboard + // theme or the user's prefers-color-scheme. + "[color-scheme:light] bg-white", )} sandbox="allow-scripts allow-same-origin allow-popups allow-forms" referrerPolicy="no-referrer-when-downgrade"