Customer surfaces always render light

The whole customer funnel, the invoice and the subcontractor portal force light mode regardless of the visitor's device preference.

What it is

A theme wrapper on each external route subtree forcing the light token set, with an explicit background and text colour so short pages and un-classed inputs cannot inherit dark styling from the root.

Also called: dark mode broke my quote · white text on white · invoice in dark mode

See it
Customer surfaces always render light
Prepared for
Ivy Brubaker
1140 Ridge Line Rd · Fair Play
Shell package$32,451
Concrete & site$9,421
Doors & windows$6,281
Trim & finish$4,187
Total
$52,340
Signature
The same intake form on a dark-mode phone, rendering light with readable fields. src/app/client/layout.tsx. Sample data — no customer information appears here.
How it works
  1. 1A non-html-scoped data-theme light wrapper overrides the root theme for the whole subtree
  2. 2min-h-screen plus the light page surface keeps the background filling the viewport
  3. 3An explicit base text colour is set on the wrapper, not left to inherit
Why we built it

A customer with dark mode on their phone opened an invoice and found white text on a white background with red spellcheck dots underneath — form fields were inheriting a dark-theme text colour set outside the document and rendering invisible. Every customer-facing surface renders light regardless of the device setting. Invoices and agreements especially: a document is printed and filed, not themed.

The problem
  • Invisible form text on visitors with dark mode enabled
  • Documents rendering in a theme they were never designed for
Sound familiar?
What you get
Every customer sees the same document regardless of device settings
Form fields are always legible

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →