iOS 26 Safari toolbar rengini doğru ayarlama
iOS 26 beta yayınlandığında web geliştiricilerin ilk fark ettiği şey Safari'nin yeni Liquid Glass görünümü oldu. Toolbar artık yarı saydam, arkasındaki içeriği bulanıklaştıran cam benzeri bir yüzeye sahip. Bu değişiklik, daha önce theme-color meta etiketi ile tam kontrol edebildiğimiz toolbar rengini farklı bir davranışa taşıdı. Eski yöntemlerle ayarlanan renkler ya görmezden geliniyor ya da beklenmeyen sonuçlar üretiyor.
Bu yazıda iOS 26 Safari'de toolbar tint rengini doğru şekilde ayarlamayı, eski ve yeni davranış arasındaki farkları, dark mode desteğini anlatıyorum.
Liquid Glass öncesi durum
iOS 15'ten bu yana Safari, theme-color meta etiketini destekliyordu. Şöyle bir satır toolbar'ı tamamen boyayabiliyordu:
<meta name="theme-color" content="#1a1a2e">Bu değer opak bir renk olarak toolbar'a uygulanıyordu. Dark mode desteği için media attribute'ü kullanılabiliyordu:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">Bu yaklaşım hâlâ çalışıyor, ama iOS 26'da davranışı değişti.
iOS 26'da ne değişti?
Liquid Glass tasarımıyla Safari toolbar'ı artık opak bir yüzey değil. Apple'ın WWDC25'teki "Design for Safari on iOS 26" oturumunda açıkça belirttiği gibi, toolbar arkasındaki sayfa içeriğini gösteriyor ve theme-color değeri artık bir "tint" (renk tonu) olarak uygulanıyor, düz bir arka plan rengi olarak değil.
Pratikte bu şu anlama geliyor: #ff0000 gibi yoğun bir kırmızı verseniz bile toolbar tamamen kırmızı olmayacak. Safari bu rengi alıp Liquid Glass efektine bir tint olarak karıştıracak. Sonuç, sayfanın arka planına ve scroll pozisyonuna göre değişen yarı saydam bir ton.
theme-color hâlâ çalışıyor (ama farklı)
Apple theme-color meta etiketini kaldırmadı. Aynı sözdizimi geçerli:
<meta name="theme-color" content="#0a84ff">Fark şu: iOS 26 Safari bu rengi doğrudan arka plan rengi olarak kullanmak yerine Liquid Glass yüzeyinin tint'i olarak yorumluyor. Çok açık renkler (beyaza yakın) neredeyse hiç fark edilmezken, doygun renkler daha belirgin bir ton veriyor.
Bir noktayı vurgulamak gerek: alfa (transparency) değeri olan renkler yoksayılıyor. rgba(10, 132, 255, 0.5) gibi bir değer verildiğinde Safari bunu görmezden gelip varsayılan davranışa düşüyor. Sadece opak hex veya rgb değerleri kullanılmalı.
CSS ile dinamik kontrol
Sayfanın scroll durumuna veya kullanıcı etkileşimine göre toolbar rengini değiştirmek isteyebilirsiniz. theme-color meta etiketini JavaScript ile güncellemek mümkün:
function updateToolbarTint(color) {
let meta = document.querySelector('meta[name="theme-color"]');
if (!meta) {
meta = document.createElement('meta');
meta.name = 'theme-color';
document.head.appendChild(meta);
}
meta.content = color;
}
// Scroll pozisyonuna göre renk değiştirme
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
updateToolbarTint('#1a1a2e');
} else {
updateToolbarTint('#f0f0f5');
}
});Bu yöntem iOS 26'da çalışıyor. Safari meta etiketindeki değişiklikleri dinamik olarak algılıyor ve Liquid Glass tint'ini güncelliyor.
Dark mode desteği
Dark mode için iki ayrı meta etiketi kullanma yöntemi iOS 26'da da geçerli:
<meta name="theme-color" content="#f5f5f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1d1d1f" media="(prefers-color-scheme: dark)">Burada dikkat edilmesi gereken bir şey var. Liquid Glass dark mode'da zaten koyu bir yüzey gösteriyor. Çok koyu bir tint rengi verdiğinizde etki minimal kalıyor çünkü cam zaten karanlık. Light mode'da ise açık renkler yine neredeyse görünmez. Bu yüzden orta tonlarda, biraz doygunluğu olan renkler en iyi sonucu veriyor.
Benim gözlemim: light mode için markanızın ana renginin biraz desatüre edilmiş hali, dark mode için ise aynı rengin daha koyu bir tonu iyi çalışıyor.
Web app manifest ile birlikte kullanım
Eğer siteniz bir PWA ise manifest.json dosyasındaki theme_color alanı da toolbar'ı etkiliyor:
{
"name": "Uygulama Adı",
"short_name": "Uygulama",
"theme_color": "#0a84ff",
"background_color": "#ffffff",
"display": "standalone"
}iOS 26'da display: "standalone" modunda açılan PWA'lar Liquid Glass toolbar'ı göstermiyor; tam ekran deneyim sunuyorlar. Bu durumda theme_color status bar alanını etkiliyor. Ama display: "browser" ya da doğrudan Safari'de açılan sayfalarda theme-color meta etiketi manifest'teki değeri geçersiz kılıyor. Yani her iki yerde de tutarlı bir değer kullanmak mantıklı.
Sayfanın arka plan rengiyle uyum
Liquid Glass, toolbar'ın arkasındaki içeriği gösterdiği için sayfanızın üst kısmındaki arka plan rengi toolbar'ın görünümünü doğrudan etkiliyor. theme-color tint'i bu arka plan rengiyle birleşiyor.
Pratik bir örnek: sayfanızın üst kısmında beyaz bir header var ve theme-color olarak #0a84ff (mavi) verdiyseniz, toolbar hafif mavimsi bir cam görünümüne sahip olacak. Ama kullanıcı aşağı scroll edip koyu renkli bir bölüme geldiğinde, toolbar'ın arkasındaki içerik değiştiği için cam yüzeyin görünümü de değişecek. Tint rengi sabit kalır ama arkadaki içerikle birleşim değişir.
Bu durumu kontrol etmenin bir yolu, sayfanın en üstüne sabit yükseklikte bir arka plan alanı koymak:
body::before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top, 44px);
background-color: #f5f5f7;
z-index: -1;
}env(safe-area-inset-top) değeri status bar ve toolbar alanının yüksekliğini veriyor. Bu pseudo-element, toolbar'ın arkasında her zaman tutarlı bir renk göstermesini sağlıyor.
Sık yapılan hatalar
İlk hata: theme-color değerine transparent veya alfa değeri olan bir renk vermek. iOS 26 Safari bunu yoksayıyor ve varsayılan davranışa dönüyor.
İkinci hata: toolbar'ı tamamen gizlemeye veya maskelemeye çalışmak. Liquid Glass tasarımı Apple'ın sistem düzeyinde uyguladığı bir görünüm; CSS ile toolbar'ın saydamlığını veya blur miktarını değiştirmek mümkün değil.
Üçüncü hata: theme-color yerine eski -apple- prefix'li meta etiketlerini kullanmak. apple-mobile-web-app-status-bar-style etiketi standalone PWA'lar için hâlâ geçerli ama Safari'deki Liquid Glass toolbar'ını etkilemiyor.
<!-- Bu toolbar tint'ini DEĞİŞTİRMEZ -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Bu çalışır -->
<meta name="theme-color" content="#0a84ff">Minimal bir uygulama
Tüm parçaları bir araya getiren minimal bir HTML dosyası:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#2563eb" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1e3a5f" media="(prefers-color-scheme: dark)">
<title>iOS 26 Toolbar Tint Örneği</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background: #f5f5f7;
color: #1d1d1f;
padding: 1rem;
padding-top: calc(env(safe-area-inset-top) + 1rem);
}
@media (prefers-color-scheme: dark) {
body {
background: #1d1d1f;
color: #f5f5f7;
}
}
.content {
max-width: 600px;
margin: 0 auto;
}
h1 { font-size: 1.5rem; margin-bottom: 1rem; }
p { line-height: 1.6; margin-bottom: 1rem; }
</style>
</head>
<body>
<div class="content">
<h1>Liquid Glass toolbar tint</h1>
<p>Bu sayfada toolbar mavi bir tint ile renkleniyor.</p>
</div>
</body>
</html>Framework'lerde kullanım
React tabanlı bir projede, örneğin Next.js kullanıyorsanız, theme-color meta etiketini app/layout.tsx dosyasında Next.js'in Metadata API'si ile ayarlayabilirsiniz:
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Uygulama',
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#2563eb' },
{ media: '(prefers-color-scheme: dark)', color: '#1e3a5f' },
],
};Next.js bu değerleri otomatik olarak <meta name="theme-color"> etiketlerine dönüştürüyor.
iOS 26 henüz beta aşamasında (Haziran 2025 itibarıyla) ve Liquid Glass davranışında ince ayarlar yapılma ihtimali var. Ama theme-color meta etiketinin tint olarak kullanılması Apple'ın açıkça belgelediği bir tasarım kararı, geçici bir bug değil. Dolayısıyla toolbar'a opak bir arka plan rengi vermeye çalışmak yerine, Liquid Glass ile uyumlu çalışan doygun ama aşırı olmayan tint değerleri seçmek en doğru strateji. Renginizi iOS 26 Simulator'da veya fiziksel cihazda her iki color scheme'de de test edin; ekran görüntüsüne güvenmeyin, Liquid Glass efekti canlı render'da farklı görünüyor.