Темизация¶

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

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

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

1

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

Вы можете обновлять значение 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);
}

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

Комментарии