Темна тема потрапляє в беклог як чекбокс. Поводиться вона як форк. З моменту випуску у вас дві кольорові системи, два набори рішень щодо контрасту, два набори скриншотів у маркетингу, і кожен майбутній компонент доведеться народжувати двічі.
Ми не проти неї. Цей сайт темний. Ми проти того, щоб ставитися до неї як до перемикача, який хтось додає за спринт.
Інвертувати — не проєктувати
Наївна версія перевертає палітру й вважає справу завершеною. Потім з’являються проблеми: чисто білий текст на чисто чорному вібрує, тіні перестають передавати підняття, бо більше нічого затемнювати, брендові кольори, що співали на білому, стають каламутними, а кожна ілюстрація з прозорим фоном зникає.
- Підняття треба перебудувати. Світлі теми піднімають поверхні тінню. Темні — світлом: чим вища поверхня, тим вона світліша.
- Брендовим кольорам зазвичай потрібен другий відтінок. Акцент, що проходить контраст на білому, рідко проходить на майже чорному.
- Чисто чорний і чисто білий — обидва пастки. Максимальний контраст дає гало, коли світлий текст «протікає» у темний фон. Це помітніше в людей з астигматизмом.
- Зображенням потрібен план. Прозорі PNG, скриншоти й логотипи всі десь передбачають колір фону.
Чесна вартість
Приблизно на третину більше часу дизайну на кожен новий компонент і постійна друга колонка в кожному візуальному QA-проході. Це реальна ціна, і вона варта того, коли ваш продукт використовують уночі, у довгих сесіях або розробники — аудиторії, які справді про це попросять.
Випустіть одну тему, яку ви продумали, а не дві, які ви інвертували.
Якщо все ж вирішите — будуйте її з першого дня на семантичних токенах: `surface`, `text-primary`, `border-subtle` — ніколи не на сирих hex-значеннях у компонентах. Вбудовувати токени в кодову базу з захардкодженими кольорами заднім числом — набагато більша робота, ніж сама тема.