> ## Documentation Index > Fetch the complete documentation index at: https://docs.hitheo.ai/llms.txt > Use this file to discover all available pages before exploring further. # Cross browser # Cross-browser / cross-OS contrast checklist This is an internal contributor doc (not published to the Mintlify site — not listed in `docs/docs.json`). Follow it whenever a PR touches: * `src/app/globals.css` * `src/app/layout.tsx` (root `` / `color-scheme` meta) * `src/app/dashboard/layout.tsx`, `src/app/playground/page.tsx` (always-dark roots) * `src/components/dashboard/PixelStatCard.tsx`, sidebar / header chrome * Anything that adds a new `text-foreground/N` opacity utility on a dashboard surface ## Why this exists The original symptom that motivated this checklist: Opera GX rendered the billing page's stat-card neon text as near-invisible while Chrome rendered it correctly. Root cause was Chromium's *Auto Dark Theme / Force Dark Pages* feature applying its color-inversion transform to a page that's already dark-by-design. Fix is the standard opt-out: declare `color-scheme` on the page and on the always-dark subtree (see `src/app/layout.tsx` head meta and `globals.css`'s `:root` / `.dark` rules). The checklist below catches regressions of that fix and any related contrast slips. ## Surfaces to spot-check For every PR that hits the files above, load each surface and confirm: 1. Stat-card values on `/dashboard/billing` (Balance, Period Cost, Requests, Avg / 1K Tokens, Lifetime Spent) are clearly legible — neon text on dark card chrome with no washed-out / outlined-only rendering. 2. Sidebar nav items on `/dashboard` (Overview, Usage, API Keys, Webhooks, Playground, Settings, etc.) read at full contrast. 3. Header chrome (org switcher pill, Playground / Docs links, avatar tooltip) is fully readable. 4. Playground (`/playground`) — hero copy, mode selector pills, message text. 5. Embed widget on a sample iframe page (`/embed/[id]` opened from the iframes dashboard preview link). 6. Marketing landing (`/`) — make sure the light surfaces still look right after `color-scheme: light` was added on `:root`. Form-control chrome (inputs, selects) should read as light, scrollbars should be light. ## Browser matrix (minimum) Run the surfaces above in each combination at least once before merging: | Browser | OS | Setting to verify | | -------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Chrome stable | macOS + Windows | Default settings. | | Chrome stable | macOS or Windows | `chrome://flags/#enable-force-dark` set to **"Selective inversion of non-image elements"** then restart. This is the cheapest single check that reproduces the original Opera GX failure on a Chromium browser. | | Edge stable | Windows | Default + Edge's own *Appearance → Force dark mode* toggle. | | Opera stable | macOS or Windows | Default. | | Opera GX | Windows (preferred) or macOS | `Easy Setup → Force dark pages` ON, plus `opera://flags/#enable-force-dark` set to `Enabled with selective inversion of non-image elements`. This is the exact failing config from the original report. | | Firefox stable | macOS + Windows | Default. Firefox doesn't have an Auto Dark feature, but it's the only non-Chromium engine you'll get cheap coverage of from a Mac. | | Safari latest | macOS | Default. macOS *System Settings → Appearance* set to Dark, then Light — neither should produce contrast failures on the dashboard. | If you don't have a Windows box, the Chromium Force-Dark flag on Mac reproduces the Opera GX failure mode well enough for most CSS regressions. ## Red-flag symptoms If you see any of these on any surface in any browser above, stop and investigate before merging: * Stat-card values legible in Chrome but invisible / etched-only in Opera GX. * Body text drops below \~4.5:1 contrast against the card / page background (use the macOS Digital Color Meter or Chrome DevTools' contrast tool to spot-check the dimmest-looking labels). * Form-control chrome (date pickers, native selects) renders light on the dashboard, or dark on the marketing landing — that's a sign `color-scheme` isn't reaching the element. * Scrollbars render light on a dark dashboard surface, or vice versa. ## When you're stuck The fastest debug paths: 1. DevTools → *Rendering* panel → *Emulate auto dark mode* → "enabled with selective inversion of non-image elements". This reproduces the Opera GX transform inside Chrome, no separate browser install needed. 2. Inspect the failing element and look for a computed `color-scheme` value on the closest ancestor — if it says `light` (or `normal`) on a dashboard surface, the `colorScheme: "dark"` inline style at the layout root has regressed. 3. View source on the failing route and confirm `` is in ``. If not, the root `app/layout.tsx` regressed. See also: `__tests__/dashboard/cross-browser-contrast.test.ts` (the static guard that asserts the meta tag, the CSS opt-outs, and the layout root `colorScheme: "dark"` style are still in place).