When I open the browser in Safari on iOS 26, I want to specify the background color for the header notch (where the time, battery, etc. are displayed) and the footer indicator area.
Specifying the theme color in HTML as shown below did not change anything.
<meta name="theme-color" content="#ff0000">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000">
The HTML below specifies the background color as green, but is it necessary to specify the background color directly in the body like this? Or is there some kind of metadata, like theme color?
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#ff0000">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000">
<title>サンプル</title>
</head>
<body style="background:#00ff00">
<main>
<p>テキスト</p>
</main>
<div
id="overlay"
role="dialog"
aria-modal="true"
data-test-id="health-warning-modal"
style="
color:#000000;
position:fixed;
inset:0;
z-index:30000;
background:#2563eb;
display:grid; /* 初期表示：表示中 */
align-items:center;
justify-content:center;
overflow-y:auto;
"
>
<div
style="
padding:60px 16px;
display:flex;
flex-direction:column;
gap:20px;
width:100%;
box-sizing:border-box;
"
>
<p
style="
font-weight:700;
text-align:center;
margin-top:20px;
font-size:28px;
line-height:1.4;
"
>
オーバーレイ
</p>
</div>
</div>
</body>
</html>