Dark mode for the drafting design system #10

Activity

1. SYMBAxx

   added

   complexity: mediumRequires some design or multiple filesRequires some design or multiple files

   area: frontendReact appReact app

   on Nov 5, 2026
2. NePreby commented on Nov 6, 2026

   

   NePreby

   on Nov 6, 2026

   More actions

   I have implemented dark mode for the drafting design system in Pull Request #25: #25

   Summary of Implementation:

   • Drafting Design System Tokens: Added full dark mode token suite in src/index.css under both @media (prefers-color-scheme: dark) and :root.dark selector.
   • Hairline Border Rules: Preserved crisp 1px borders and zero-blur architectural blueprint aesthetic.
   • Contrast Ratios: Verified contrast ratios $\ge 4.8:1$ across all text levels, satisfying WCAG AA compliance.
   • Manual & System Toggling: Implemented ThemeToggle in Shell.tsx and theme state manager in lib/theme.ts with localStorage persistence.
   • Test Suite: Added unit tests in src/lib/__tests__/theme.test.ts. 74/74 vitest tests pass and Vite production build compiles with zero errors.

   Bounty Payout Wallet (TRC20 TRX/USDT):
   TMqmJjRgVS21NL2eFtfyHciTxvE4BqGmEv