В стандартной настройке Tilda цвет статус-бара в мобильных браузерах остается фиксированным, независимо от темы устройства. С помощью этой модификации можно указать свой цвет шапки браузера и даже настроить автоматическую адаптацию цвета под светлую и тёмную тему пользователя. Это не только улучшает визуальное восприятие сайта, но и делает его более профессиональным и современным.
Инструкция по установке
- Копируем код в глобальный хедер сайта. Для этого переходим в настройки / Еще / Html-код для вставки внутрь head. Не забываем сохранить и переопубликовать страницы.
<!--TICODE --><!-- Смена цвета шапки браузера на мобилках | https://ticode.dev -->
<meta name="theme-color" content="#ff5733"> /* Указываем свой цвет */Вариант модификации с автоматической настройки цвета шапки браузера в зависимости от выбора светлой или тёмной темы пользователем. Инструкция установки такая же как и в первом случае.
<!--TICODE --><!-- Смена цвета шапки браузера на мобилках под разные темы браузера | https://ticode.dev -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> /* Указываем свой цвет для светлой версии */
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> /* Указываем свой цвет для темной версии */Изменение цвета и адаптация не поддерживаются в старых версиях браузеров. Например, в Safari до версии 15 нет возможности изменить цвет шапки.
Другие модификации для кастомизации элементов браузера
Стилизация скроллбара (ползунка): позволяет сделать настроить внешний вид ползунка прокрутки, делая скроллбар частью общей концепции дизайна.
