Как сменить цвет окна браузера на телефоне

2025-03-25 18:19 Прочее

В стандартной настройке 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 нет возможности изменить цвет шапки.

Другие модификации для кастомизации элементов браузера

Стилизация скроллбара (ползунка): позволяет сделать настроить внешний вид ползунка прокрутки, делая скроллбар частью общей концепции дизайна.

{$co}

TiCode