Skip to main content

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-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 <head> / 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:
BrowserOSSetting to verify
Chrome stablemacOS + WindowsDefault settings.
Chrome stablemacOS or Windowschrome://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 stableWindowsDefault + Edge’s own Appearance → Force dark mode toggle.
Opera stablemacOS or WindowsDefault.
Opera GXWindows (preferred) or macOSEasy 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 stablemacOS + WindowsDefault. 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 latestmacOSDefault. 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 <meta name="color-scheme" content="light dark"> is in <head>. 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).