Перейти к содержанию

Темизация

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

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

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

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

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

Clearleft dot com. Resilient Web Design dot com. The Session dot org.

В браузере Safari просматриваются три веб-сайта. Каждый из них имеет свой собственный цвет темы, распространяющийся на интерфейс браузера.

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

Цвет темы можно также задать в файле web app manifest. Это JSON-файл, содержащий метаданные о вашем сайте.

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

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

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

1
2
3
4
5
6
7
8
{
    "short_name": "Clearleft",
    "name": "Clearleft design agency",
    "start_url": "/",
    "background_color": "#00D494",
    "theme_color": "#00D494",
    "display": "standalone"
}

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

Узнайте больше о том, как добавить манифест веб-приложения.

Обеспечение темного режима

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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-файл для своего фавикона, его можно настроить для темного режима. Томас Штайнер писал о prefers-color-scheme в SVG-фавиконах для темного режима.

Темизация с помощью пользовательских свойств

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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, то не придется дважды писать все селекторы.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
}

Более продвинутые примеры тематизации с помощью пользовательских свойств см. в разделе Построение цветовой схемы.

Изображения

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

1
2
3
4
svg {
    stroke: var(--ink-color);
    fill: var(--page-color);
}

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

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

1
2
3
4
5
@media (prefers-color-scheme: dark) {
    img {
        filter: brightness(0.8) contrast(1.2);
    }
}

Три фотографии с нормальной яркостью. Три фотографии с чуть меньшей яркостью.

Эффект малозаметен, но в темном режиме можно уменьшить яркость изображений.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<picture>
    <source
        srcset="darkimage.png"
        media="(prefers-color-scheme: dark)"
    />
    <img
        src="lightimage.png"
        alt="A description of the image."
    />
</picture>

Две карты Брулина, на одной из которых использованы светлые цвета, а на другой - темные.

Две версии одной и той же карты, одна для светлого режима, другая для темного.

Формы

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

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

1
2
3
4
5
6
7
8
html {
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

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

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

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

1
2
3
html {
    accent-color: red;
}

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

1
2
3
4
5
6
7
8
html {
    accent-color: red;
}
@media (prefers-color-scheme: dark) {
    html {
        accent-color: pink;
    }
}

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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);
}

Подробнее об окрашивании элементов в цвета темы см. в разделе more tinting.

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

Комментарии