Dark Mode

Steps

1. Set OS to dark mode (System Preferences > Appearance > Dark)
2. Hard-refresh the app
3. Navigate through all main pages
4. Switch OS back to light mode and refresh

Verify (4 checks)

• Dark mode activates automatically based on system preference (no manual toggle needed)
• No white flashes on initial page load or navigation
• Switching OS to light mode returns app to light theme after refresh
• User preference respected across sessions (persists after closing browser)

Steps

1. Visit /login
2. Visit / (dashboard)
3. Open a document in the PDF viewer
4. Open the ShareModal on any document
5. Visit /settings/profile
6. Visit /settings/branding
7. Visit /settings/nda
8. Visit /settings/api-keys
9. Visit /settings/integrations
10. Visit Contracts page
11. Open a contract signing portal /sign/[slug]
12. Visit /admin (if admin)
13. Visit /analytics
14. Visit a data room detail page
15. Navigate to /nonexistent to trigger the 404 page

Verify (15 checks)

• Login page: background, card, inputs, and buttons render with correct dark tokens
• Dashboard: sidebar, top bar, metric cards, and doc rows all dark-mode correct
• PDF Viewer: viewer background dark, toolbar icons/labels readable, no white canvas bleed
• ShareModal: all selects, inputs, toggles, and labels readable in dark mode
• Settings / Profile: form fields, labels, and save button styled correctly
• Settings / Branding: color pickers, logo preview, and inputs readable
• Settings / NDA Templates: table, modal, textarea all dark-mode correct
• Settings / API Keys: table, badge, copy button readable
• Settings / Integrations: provider cards, connect buttons readable
• Contracts page: table rows, status badges, action buttons readable
• Signing portal: branding area, signature canvas, form inputs dark-mode correct
• Admin panel: user table, audit log entries readable
• Analytics page: charts, stat cards, table rows dark-mode correct
• Data Room detail: document list, invitation table readable
• 404 page: styled correctly in dark mode (not a white screen)

Steps

1. Use browser DevTools Accessibility inspector on key text elements

Verify (6 checks)

• Body text contrast ratio >= 4.5:1 against dark backgrounds
• Button labels remain readable on both primary and secondary buttons
• Table header and cell text meet contrast requirements
• Disabled form elements visually distinct but not invisible
• Focus rings visible in dark mode for keyboard navigation
• Status badge colors (red/green/amber) remain distinguishable in dark mode