Сразу к делу: не делайте чёрный фон с ярко-белым текстом
Прямо скажу – это пытка. Не интерфейс, а чистилище для глаз. Такое чувство, будто читаешь изнутри сварочной маски. Белый на #000 – это не стиль, это месть дизайнера пользователю. Лучше мягкий серый фон, светлый текст – не контраст, а уважение к глазам. #121212 и #E0E0E0, например. Или как у Telegram – у них, кстати, реально получилось комфортно.
Контраст не равен читаемости. Забудьте.
Многие бегут к WCAG, начинают жонглировать коэффициентами, типа «вот тут у нас 7:1 – зашибись». А по факту – глаза вытекают. Реальный пример: я как-то делал интерфейс для одной CRM, ночью потестил – и понял, что мои глаза хотят уволиться. Пришлось всё смягчать. Текст – светлый, но не белый. Кнопки – не ярче свечки в подвале. Главное – не отвлекать, а поддерживать.
Забудьте про true black. Это не кино
OLED не OLED – а #000000 жрёт всё вокруг. Смотришь – и будто в бездну уставился. Да, батарейку экономит, но ценой психологического дискомфорта. Ты не хочешь, чтобы интерфейс давил, как последняя серия «Чёрного зеркала». Лучше чуть-чуть смягчить – #181818 или #1E1E1E. Пусть фон не орёт, а шепчет.
Яркие акценты? Только по делу. Иначе аниме-плакат выйдет
Серьёзно. Один раз видел портфолио: темный фон, розовые ссылки, салатовые иконки, жёлтые кнопки. Глаз дёргаться начал. Цвет – это как острый соус. Немного – кайф, перебор – слёзы. Используйте максимум два акцента. Всё остальное – сдержанно. Как у Monobank – фиолетовый и всё. Работает? Работает.
Тени? Пожалуйста, но как специи в пасте
Если текст на тёмном фоне «висит в воздухе» – добавь лёгкую тень. Только не как в 2007-м – не нужно ставить blur на 20px и думать, что ты гений. Тоненькая, прозрачная, почти невидимая. Она просто помогает читать. Без шума, без пафоса. Кстати, Google Fonts в этом плане – спасение. Некоторые шрифты (например, Inter или Roboto) уже сами по себе хорошо читаются. Не нужно лишних украшений.
И да: думайте не о себе, а о людях в кровати с телефоном
Ты-то, может, сидишь на макбуке с TrueTone. А кто-то смотрит твой интерфейс ночью, в кровати, рядом с уснувшим котом и 5% заряда. Не заставляй его щуриться, как будто он на ярмарке фейерверков. Сделай всё максимально ненавязчивым. Не героем будь, а компаньоном. Да и вообще – если пользователь не замечает дизайн, ты всё сделал правильно.
Всё, отпускаю. Хочешь – проверь, хочешь – не верь. Но глаза – это не шутка. Они тебе ещё пригодятся.
Как подогнать цвета интерфейса под тёмные фоны, чтобы не выжечь глаза
Сначала – никакого чистого чёрного
Да, звучит странно, но #000000 – это пытка для глаз. Он контрастит с белым текстом так, что кажется, будто буквы вырезаны ножом. Лучше взять тёмно-серый. Ну вот серьёзно, попробуй #121212 или #1e1e1e – глазам реально легче. И не надо делать всё по стандарту, как в bootstrap или ещё где-то – живи своим умом.
Белый текст – это не всегда good idea
Знаешь, что хуже чёрного фона? Белый текст на чёрном фоне. Яркий, как дальний свет ночью. Не надо так. Возьми светло-серый. Что-то типа #cccccc или даже #aaaaaa. Если хочется акцентов – используй мягкие оттенки, а не кислоту. Например, вместо ядрёного #00ffff лучше #5eead4. Да, выглядит менее «вау», но зато читается. Проверено.
Прозрачность – твой друг
Иногда проще не выдумывать новую палитру, а просто понизить непрозрачность цвета. Например, текст – rgba(255,255,255,0.87), второстепенный текст – 0.6. Работает как фильтр: важное видно, фон не мешает. Как будто ты включил режим «не напрягайся».
А как насчёт цвета ссылок?
Вот тут часто тупик. На светлом фоне синие ссылки – норм. На тёмном? Ой. Синий превращается в мыло. Протестируй #8ab4f8 или #82aaff – они не вылетают из контекста и выглядят естественно. Особенно когда ссылку вставляешь органично, вот как я сейчас: примеры оформления тут. И не надо подчёркиваний, если всё читается и так. Визуальный мусор – враг №1.
Тени? Да, да, да!
Кто сказал, что в ночном режиме всё должно быть плоским? Чуть-чуть теней – и всё, элементы «всплывают», интерфейс начинает дышать. Только не делай как в PowerPoint 2007, ладно? Subtle is sexy. Box-shadow: 0 1px 3px rgba(0,0,0,0.5) – и ты уже на уровне.
Пример, который я никогда не забуду
Был один проект, где дизайнер просто инвертировал цвета из светлой схемы. Честно – ощущение было, будто попал в аниме с флэшбеками. Ничего не видно, всё режет, акценты уплыли. Мы переделали всё с нуля, начали с одной кнопки и закончили тем, что фоновый цвет стал почти тёплым. И вдруг всё заиграло. Люди стали читать. Представь себе!
Лайфхаки от уставшего фронтендера
- Всегда проверяй на реальных экранах. Монитор в офисе и телефон в метро – это два разных мира.
- Смотри на текст через 10 минут. Если хочется щуриться – выкидывай цвет.
- Дай интерфейсу воздух – отступы, интервалы, пустое место. Оно работает как тишина в музыке.
Так что просто скажу: цвет – это не математика. Это ощущение. Проверяй глазами, слушай спиной. А не по гайдам из первых ссылок.
Какие CSS-техники использовать для поддержки системной темной темы через prefers-color-scheme
Сразу: media-запрос – наш друг
Вот прям с места в карьер: @media (prefers-color-scheme: dark) – твоя точка входа. Как только браузер улавливает, что у пользователя включён мрачный режим (ну, кому как нравится), – подключается этот кусочек CSS. Всё. Прям как магия, но без фокусов.
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #eee;
}
}
Работает почти везде, кроме динозавров типа старого IE. Но кто вообще ещё держит IE? Ну серьёзно.
Не копируй цвета «на глаз» – используй CSS custom properties
Вот честно, я раньше лепил цвета как попало. Темнее? Ну, #222 вместо #fff, поехали. А потом внезапно – логотип стал невидимкой, кнопки потерялись, и вообще всё выглядит, как будто сделал дизайнер из 2006-го.
Намного удобнее сразу завести переменные:
:root {
--bg: #ffffff;
--text: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #eeeeee;
}
}
body {
background-color: var(--bg);
color: var(--text);
}
Теперь менять стили – как менять носки. Один раз настроил – потом только подкручивай значения в одном месте.
Инвертировать картинки? Осторожно, там свои приколы
Если картинка на прозрачном фоне – ок, проблем нет. А вот если у тебя, например, логотип с чёрной надписью, он в ночной обстановке может просто исчезнуть. Типа, был – и нет. Привет, невидимка.
Я однажды делал портфолио, где на тёмной палитре половина иконок выглядела так, как будто их кто-то вытер ластиком. Пришлось генерировать инверсии, ставить SVG с fill="currentColor", делать filter: invert(1) – а потом удалить всё это и просто сделать две версии логотипа.
Короче, иногда проще показать другую картинку, чем ломать голову:
@media (prefers-color-scheme: dark) {
.logo {
content: url("logo-dark.svg");
}
}
Это костыль, но он работает. А работать – важнее, чем быть красивым.
Прокрутка, формы, бордюры – не забудь
Я сам попадался: всё покрасил красиво, а скроллбар белый. Бьёт по глазам, как вспышка в темноте. Переопредели стили для него:
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: #444;
}
}
Формы, поля, кнопки – они по умолчанию не всегда слушаются, особенно в Safari. Иногда проще сбросить стили и собрать своё вручную.
Проверяй глазами, не только DevTools’ом
Да, в Chrome DevTools можно вручную переключать схемы отображения. Но иногда оно там выглядит «нормально», а в реальности – отстой. Проверь на реальных устройствах. Особенно на iPhone – у него свои причуды. И не доверяй симуляторам. Они врут.
И да, будь готов к хаосу
Это не волшебная настройка «один раз и работает всегда». Иногда всплывает какая-то странность. Например, тень под кнопкой выглядит окей на светлом, а в тёмном – будто пятно от кофе. Или вдруг link цвета становятся невидимыми. Не бойся подкручивать вручную. Не существует идеальной схемы – и это нормально.
Последний совет – не будь перфекционистом
Твой CSS не обязан быть шедевром. Он должен работать. И быть понятным тебе через три месяца, когда ты забудешь, зачем тут эта переменная --soft-muted-bg-hover-focus. Упростить – не значит упростить всё. Значит не усложнять то, что не требует усложнения.
Как проверить, нормально ли выглядит контент в ночной версии на разных устройствах
Бери в руки телефон. Или планшет. Или оба
Серьёзно, не жди милости от эмуляторов. У них, как у плохих комиков, – всё одинаково. Смотри глазами. На живом экране. iPhone 13, старый Xiaomi, планшет жены, что угодно. Чем больше разнобоя – тем лучше. Это не извращение, это забота.
Контраст – это не «плюс-минус видно», это «не моргнул и понял»
Вот простой тест: покажи экран бабушке. Если она скажет «ой, я всё вижу» – ты попал в точку. Если скажет «что это за серый на сером?» – переделывай. Или, ладно, если бабушки нет под рукой, включи солнце на максимум. Да, я про яркость. Выйди на балкон, щурься как Джон Сноу, и попытайся что-то прочитать. Если не бесит – значит норм.
Не верь глазам своим – верь инструментам
Вот тебе WebAIM Contrast Checker. Или вот этот. Скопируй цвет фона, текстовый и гони в форму. Будет меньше 4.5 – переделывай. Да, даже если «вроде видно». Мы же не для вампиров делаем. Хотя и для них – пусть читают легко.
Скриншоты! Чёрт возьми, делай скриншоты
Потом смотри на них через пару часов, когда глаза устали. Или на следующий день. Эффект магии: то, что ночью казалось «вполне симпатично», утром может выглядеть как мрак дизайнерского ада. Особенно, если включён синий фильтр. Или просто ты не выспался.
И один фокус от моего приятеля-дизайнера
Он берёт весь макет, накладывает чёрно-белый фильтр (да-да, превращает всё в градации серого) и смотрит: читается ли? Если да – молодец. Если нет – значит, цвета работают как шум, а не как смысл. А смысл, ну ты понял…
Ну и, конечно, тёмная магия CSS
Если ты верстаешь – используй prefers-color-scheme, и тогда можно тестить прямо в DevTools (например, в Chrome нажал F12 → Rendering → Emulate CSS media feature prefers-color-scheme). Работает чётко, но всё равно, повторюсь, глазам верь больше.
Проверка через друзей – это не стыд, это спасение
Попроси кого-то из знакомых: «Слушай, можешь открыть вот это на своём телефоне и сказать, как тебе читается?». Особенно тех, кто носит очки. Или у кого астигматизм. Или, фиг с ним, просто тех, кто не боится сказать: «ну и говно ты сделал».
Вот такие дела. И если ты проверил, и всё читается, и никто не жалуется – не спеши радоваться. Подожди ещё недельку. Перепроверь. Потому что вчера ты был в кураже, а сегодня ты – нормальный. А нормальные – ошибаются.
