Тематика

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

Настройте интерфейс браузера

Некоторые браузеры позволяют предложить цвет темы на основе цветовой палитры вашего сайта. Интерфейс браузера адаптируется к предложенному вами цвету. Добавьте цвет в meta элемент с именем theme-color в head ваших страниц.

<meta name="theme-color" content="#00D494">

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

Цвет темы также можно указать в файле манифеста веб-приложения . Это JSON-файл с метаданными о вашем веб-сайте.

Создайте ссылку на файл манифеста в head документа. Используйте элемент ` link со значением rel , равным manifest .

<link rel="manifest" href="/manifest.json">

В файле манифеста перечислите метаданные, используя пары ключ/значение.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

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

Предусмотреть темный режим

Многие операционные системы позволяют пользователям указывать предпочтение светлой или темной цветовой палитры, что является хорошей идеей для оптимизации вашего сайта в соответствии с предпочтениями пользователей. Доступ к этой настройке можно получить в медиа-функции, называемой prefers-color-scheme .

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Цвета темы задаются с помощью медиа-функции prefers-color-scheme в элементе meta .

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Вы также можете использовать функцию prefers-color-scheme в SVG. Если вы используете SVG-файл для своего значка сайта (favicon), его можно настроить для темного режима. Томас Штайнер написал о prefers-color-scheme в статье «SVG-значки сайтов для темного режима» .

Оформление с использованием пользовательских свойств

Если вы используете одни и те же значения цвета в нескольких местах вашего CSS-кода, повторение всех селекторов в медиа-запросе prefers-color-scheme может оказаться довольно утомительным.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

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

Если вы обновляете значения пользовательских свойств в медиазапросе prefers-color-scheme , вам не придется писать все селекторы дважды.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Более сложные примеры оформления с использованием пользовательских свойств см. в разделе «Создание цветовой схемы» .

Изображения

Если вы используете SVG в HTML, вы также можете применять там пользовательские свойства.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Теперь ваши значки будут менять цвет вместе с другими элементами на странице.

Если вы хотите уменьшить яркость ваших фотографий при отображении в темном режиме, вы можете применить фильтр в CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Для некоторых изображений может потребоваться полная замена в темном режиме. Например, вы можете захотеть отобразить карту в более темной цветовой гамме. Используйте элемент <picture> , содержащий элемент <source> , с медиа-запросом prefers-color-scheme .

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Формы

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

Добавьте это в свой CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Вы также можете использовать HTML. Добавьте это в head ваших документов:

<meta name="supported-color-schemes" content="light dark">

Используйте свойство accent-color в CSS для оформления флажков, переключателей и некоторых других полей форм.

html {
  accent-color: red;
}

Для темных тем часто используются приглушенные фирменные цвета. Вы можете изменить значение accent-color для темного режима.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Для этого целесообразно использовать пользовательское свойство, чтобы хранить все объявления цветов в одном месте.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Включение темного режима — это лишь один из примеров адаптации вашего сайта к предпочтениям пользователей. Далее вы узнаете, как сделать ваш сайт доступным для людей с ограниченными возможностями .

Проверьте свое понимание

Проверьте свои знания в области тематического оформления.