RhaNotes

О тёмном и светлом

Mephisto эсседизайн

Есть что-то немного смешное в том, как серьёзно разработчики относятся к тёмной теме. Целые библиотеки, стандарты, CSS-переменные, медиа-запросы. Баги, которые проявляются только в одной из тем. Дизайнеры, спорящие о контрасте.

А пользователи просто хотят, чтобы глаза не болели.

Дело не в эстетике

Светлая тема хороша при дневном освещении. Тёмный текст на светлом фоне — это книга, газета, лист бумаги. Человечество читало так тысячи лет.

Тёмная тема — это экран в темноте. Мягкий свет вместо прожектора. Меньше нагрузки на зрение, когда вокруг темно.

Это не вопрос вкуса. Это физиология.

Проблема FOUC

Самое раздражающее в тёмных темах — вспышка белого при загрузке страницы. Браузер рендерит фон раньше, чем JavaScript успевает прочитать localStorage и применить тему.

Решение старое как мир: небольшой inline-скрипт в <head>, который запускается ещё до рендера. Он читает сохранённую тему или определяет системную через prefers-color-scheme. Это единственный случай, когда синхронный JavaScript в <head> — правильное решение.

<script>
  (function() {
    var t = localStorage.getItem('theme')
      || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', t);
  })();
</script>

Шесть строк. Никакой вспышки.

Минимализм как позиция

Telegra.ph появился в 2016-м и сразу стал культовым. Никакой регистрации, никаких профилей, никакой аналитики. Просто текст.

Парадокс в том, что именно отсутствие функций сделало его популярным. Убери всё лишнее — и читатель остаётся один на один с текстом. Это и есть уважение к читателю.

RhaNotes придерживается той же философии. Нет счётчиков посещений. Нет комментариев. Нет кнопки «поделиться». Только то, что написано.

Цвета, которые не мешают

Для светлой темы выбор прост: белый или чуть тёплый белый фон, тёмно-серый (не чёрный!) текст. #222 вместо #000 — потому что чистый чёрный на белом слишком резкий.

Для тёмной сложнее. Чисто чёрный фон (#000000) выглядит неестественно — в природе почти нет такого чёрного. Чуть тёплый тёмный (#1a1a1a, #181818) куда комфортнее. А текст — не белый, а #e6e6e6. Немного серого убирает напряжение.

Между этими двумя полюсами — вся палитра интерфейса. Границы, плейсхолдеры, подписи, метаданные. Каждый элемент чуть светлее или темнее соседнего. Иерархия без криков.

В конечном счёте хорошая тема — та, которую не замечаешь. Ты просто читаешь.

← На главную