About this set
A dark invoice and a dark invoice card for night-themed apps that still print as a normal light document. Dark invoice that prints light is a software studio’s invoice in euros: a violet glow line on a deep slate card, From, Bill to and details columns with VAT numbers, a sprint line items table, a reverse charge VAT line, a total in the accent colour, and bank details. Dark invoice card with partial payment shows an invoice that is partly paid: a status pill, the amount left to pay, a native progress element for the share already paid, dates, and Pay and Download PDF links. Everything is driven by colour tokens, and an @media print block flips every token to a light palette, so Print or Save as PDF gives black text on white paper with no ink-heavy background, glow or gradient, and the buttons disappear. Grey text keeps at least 4.5:1 against the dark card, and color-scheme:dark keeps native controls dark on screen. The Bootstrap version runs in data-bs-theme=”dark” and switches Bootstrap’s own variables back to light in print.
What’s included
- Dark on screen, light in print and PDF through token swaps
- Native progress element for a partly paid invoice
- Reverse charge VAT invoice in euros
- Bootstrap version uses data-bs-theme="dark"
- Print button hidden in print and until JavaScript runs
Accessibility
The invoices are articles named by their headings, the items are a captioned table with scoped headers, and the progress bar is labelled by the visible paid text. Muted text on the dark card measures over 4.5:1, links and buttons show a violet focus outline, and the glow transition stops under prefers-reduced-motion.
Customise it
Change --nj-bg, --nj-ink, --nj-muted, --nj-line and --nj-accent on .nj, and their light values in the @media print block. Bootstrap maps them onto --bs-body-bg and the other theme variables; in Tailwind edit the nj-* colours in @theme and the print overrides on [data-nj].
