Как задать цвет интерфейса Safari 26

Кратко

В Safari 26 на macOS/iOS/iPadOS 26 цвет браузерного интерфейса (URL-бар, кнопки навигации и т.д.) берется:

либо из background-color элемента body,
либо из фиксированного (position: fixed) элемента в самом верху страницы, если он есть и подходит под условия.

При этом meta name="theme-color" и theme_color в манифесте на это больше не влияют.

Если вы пользуетесь Safari 26 на macOS/iOS/iPadOS 26, то могли заметить: на части сайтов интерфейс браузера окрашивается в цвет страницы. Автор с коллегой проверили, откуда именно Safari берет этот цвет, и выяснили, что поведение не такое очевидное, как кажется.

Прощай, theme-color

Раньше для этого часто использовали theme-color в meta (например, в iOS full-screen PWA и некоторых браузерах вроде Vivaldi).
Но в Safari 26 эта схема фактически перестала работать: поддержка такого сценария убрана.

Автор отдельно отмечает, что более логичным местом для такой настройки выглядит theme_color в манифесте, но и там есть вопросы — например, как удобно задавать разные цвета для светлой и темной темы.

Что происходит в Safari 26

Сначала кажется, что все просто: Safari берет цвет из body.

Примеры:

На этих сайтах это действительно похоже на правду: меняешь фон body в DevTools — меняется и цвет интерфейса Safari.

Но есть и контрпример — ankerbrot.at:
фон body там бежевый, а интерфейс Safari — темно-красный, как шапка сайта.

Упрощенное правило

По наблюдениям автора, Safari делает так:

Берет background-color у body,
кроме случая, когда в самом верху страницы есть элемент с:
- position: fixed,
- фоном,
- шириной 100%,
- высотой минимум 6px.

position: sticky для этого не подходит.

Как принудительно задать цвет

На проекте автора не было подходящей фиксированной шапки, поэтому он попробовал «подложить» технический фиксированный элемент высотой 6px и скрыть его от пользователя.

Проблема: многие способы скрытия Safari не принимает — тогда элемент перестает участвовать в выборе цвета интерфейса.

Что не работает для такого элемента

opacity: 0
visibility: hidden
display: none
z-index: -1
scale: 0
transform: scaleX(-100%)
transform: translateX(-100%)
clip: rect(1px, 1px, 1px, 1px)
zoom: 0.000001
translate: 0 0 -1px

Решение через scroll-driven animations

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

.custom-theme-color {
  position: fixed;
  top: 0px;
  background-color: #bada55;
  height: 6px;
  width: 100%;
  animation-name: hide-on-scroll;
  animation-timeline: scroll();
  animation-fill-mode: both;
  animation-range-start: 10px;
  animation-range-end: 11px;
  animation-duration: 0.1s;
  z-index: 1; /* должен быть ниже z-index реальной шапки */
}
 
@keyframes hide-on-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

Так элемент почти сразу уходит из видимой зоны, но Safari продолжает использовать его цвет для интерфейса.

Интересное наблюдение: если задать этому элементу border-bottom, Safari иногда берет цвет именно бордера, а не фона.

Демо еще раз

Ограничения

Если перезагрузить страницу не в верхней точке, решение может не сработать.
Нужна проверка поддержки scroll-driven animations.
В продакшене автор это пока не использует: требуется дополнительное тестирование, особенно на iOS.

Примечание

Есть сообщение, что на macOS 15 Safari 26 может вообще не применять цвета страницы к интерфейсу браузера.

Теги: browsers, safari, css

Источник https://grooovinger.com/notes/2026-02-27-safari-26-header-background

RuWeb Blog

Проводник