Светлая и тёмная темы статьи

Тёмная палитра ProfessorWeb остаётся основным узнаваемым вариантом. Светлая тема может стать дополнительным представлением для читателя, который предпочитает другой фон. Чтобы такая вариация не выглядела новым чужим сайтом, нужно менять цветовые роли согласованно, сохраняя композицию, типографику и характер акцентов.

В этом уроке вы подготовите учебную светлую тему reading-lab и различите автоматическое предпочтение системы от явного выбора. Берём итог шестнадцатой главы; печатные и ресурсные углубления не являются предпосылками. Этот вариант не меняет действующее оформление сайта.

Одна система с разными значениями

Цветовой урок уже разделил фон, поверхность, текст и ссылки. Теперь это решение показывает пользу: новая тема может переопределить значения, сохранив назначения. Листинг продолжит использовать мягкую поверхность, метаданные — приглушённый текст, а ссылки — собственный акцент. Не нужно переписывать каждый компонент с нуля.

Однако светлая тема не возникает простым обменом белого и чёрного. Яркий зелёный, подходящий в одном окружении, может потерять различимость на другом. Поэтому ссылка получает более тёмный учебный оттенок, сохраняя зелёное направление. Фиолетовая роль остаётся узнаваемой, но её сочетания тоже требуют будущей проверки.

Не инвертируйте все изображения. Скриншоты программ отражают настоящее состояние интерфейса, а не палитру статьи. Если рисунок должен иметь вариант для светлого фона, это отдельный ресурсный договор. Общий фильтр не должен менять цвета сообщений и подсветки кода, о которых говорится в объяснении.

Светлый вариант ниже — предложение для стенда, а не факт о нынешнем ProfessorWeb. Мы не заявляем измеренное соответствие контраста для всех компонентов. Задача этой главы — последовательная работа ролей и правил выбора; проверка конкретных сочетаний остаётся самостоятельным наблюдением.

Явный учебный вариант

Создайте полный файл lesson-20.css и подключите после основного снимка:

.reading-lab { color-scheme: dark; }
.reading-lab[data-theme="light"] {
  --lab-bg: #f5f5f8; --lab-surface: #fff; --lab-soft: #e9e9f1;
  --lab-ink: #20212b; --lab-muted: #565969; --lab-line: #d2d4df;
  --lab-link: #16642e; --lab-link-hover: #0c4b20;
  --lab-accent: #6c43af; --lab-accent-strong: #7e4ecc;
  color-scheme: light;
}
.reading-lab[data-theme="light"] .lab-brand { color: #fff; }

Для просмотра выбранного варианта добавьте data-theme="light" к существующему body.reading-lab. Это ручное состояние учебного макета, а не работающий переключатель пользователя. При отсутствии атрибута остаётся исходная тёмная система.

Ожидается, что все компоненты, использующие переменные, перейдут к новым значениям. Отдельное правило бренда сохраняет светлый текст на фиолетовой поверхности: основной тёмный текст новой темы здесь не подходит автоматически. Такой случай показывает, почему семантическая роль не всегда означает одинаковую подстановку во всех сочетаниях.

color-scheme сообщает браузеру поддерживаемую цветовую схему для соответствующих элементов интерфейса. Оно не перекрашивает ваши собственные поверхности вместо заданных переменных. Назначение свойства приведено в MDN. Поэтому основной вид страницы по-прежнему определяется нашим CSS.

Предпочтение системы и явное состояние

Если вы хотите следовать системному предпочтению, добавьте к тому же файлу следующий дополнительный фрагмент. Он применяется только при отсутствии явного атрибута темы:

@media (prefers-color-scheme: light) {
  .reading-lab:not([data-theme]) {
    --lab-bg: #f5f5f8; --lab-surface: #fff; --lab-soft: #e9e9f1;
    --lab-ink: #20212b; --lab-muted: #565969; --lab-line: #d2d4df;
    --lab-link: #16642e; --lab-link-hover: #0c4b20; color-scheme: light;
  }
  .reading-lab:not([data-theme]) .lab-brand { color: #fff; }
}

Медиаусловие prefers-color-scheme позволяет узнать предпочтение светлой или тёмной схемы. Оно не сообщает, что пользователь обязательно предпочитает именно ваш конкретный вариант. Механизм описан в MDN. Мы используем его как начальное решение при отсутствии собственного выбора.

Явное data-theme="dark" не попадает под :not([data-theme]), поэтому сохраняет тёмную базу. Явное светлое состояние использует первое правило. Получаются три понятных варианта: тёмный, светлый и автоматический. Данный урок показывает CSS-договор, не добавляя форму переключения, хранение выбора или обработку событий.

Не рисуйте интерактивный переключатель без такой логики. Картинка солнца, которая ничего не делает, создаёт неверное ожидание. Для действующего управления понадобятся название действия, понятные состояния и отдельная проверка. Здесь ручной атрибут честно представляет вариант макета.

Согласование компонентов

Посмотрите на листинг. Его подпись и основная область используют две поверхности, поэтому различие должно сохраняться в обеих темах. Если при светлой подстановке они слились, можно уточнить роли, а не добавить случайную рамку только одному примеру. Изменение должно применяться к компоненту целиком.

Таблица использует разделители строк, спокойную шапку и основной текст. В светлом варианте эти отношения остаются, хотя конкретные значения другие. Не вводите новый размер ячеек исключительно из-за смены цвета, иначе вы уже сравниваете разные композиции. Сначала оцените тему при одинаковой геометрии.

Подпись под изображением и метаданные должны оставаться различимыми. Оттенок второстепенного текста выбирается для передачи информации, а не для эффектного исчезновения. Если текст слишком слаб, изменение насыщенности поверхности может быть важнее отдельного жирного начертания каждого слова.

Также проверьте ссылки в абзаце, таблице и карточке. Один цвет встречается на разных фонах, поэтому единственная удачная пара не доказывает работу всей системы. Не заявляйте, что светлая тема завершена только после смены фона body: компоненты продолжают содержать собственные сочетания.

В автоматическом варианте смена системного предпочтения может привести к другому сочетанию цветов без изменения содержания. Поэтому исключения для конкретных компонентов должны находиться в той же понятной системе. Если карточка использует прямое шестнадцатеричное значение вместо роли, она может остаться тёмным островком на светлой странице. Найдите такое решение и установите, почему оно было прямым: иногда это цвет самого ресурса, а иногда случайное нарушение договора.

Не добавляйте длинное плавное переливание каждой поверхности как обязательную часть переключения. Оно способно создавать промежуточные сочетания текста и фона, которые не рассматривались как отдельная тема. Для учебной статьи отсутствие анимации является полноценным вариантом. Если движение действительно помогает объяснить действие, оно получит собственные ограничения и настройки в серии доступности.

Также различайте начальное состояние и сохранённый пользовательский выбор. CSS медиаусловие не хранит предпочтение для следующего посещения и не синхронизирует его между устройствами. Поэтому нельзя подписать ручной атрибут «Ваш выбор сохранён», пока соответствующее поведение не реализовано. Наш пример показывает цветовые состояния, а будущая функция управления должна честно объяснять, где и как находится её состояние.

Сохранение узнаваемости

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

Для будущего сравнения возьмите одну страницу с длинным кодом, таблицей и прототипом изображения. Переключайте только атрибут состояния. Запишите, какие элементы сохранили роль, а какие требуют уточнения. Не добавляйте выдуманные показатели предпочтения читателей: выбор темы и фактическое удобство имеют разные основания.

Результат урока — две цветовые вариации одной системы и ясное правило их выбора. В следующей главе рассмотрим объекты, которые имеют собственный интерфейс: видео и встроенные демонстрации.