Apple has quietly abandoned support for using <meta name="theme-color"> to set the color of Safari browser UI, in favor of using the background-color of standard page element.
View how your web browser supports color in its UI:
Safari versions 15 through 18.6 supported a theme-color meta tag, allowing developers to directly declare the color of browser UI elements.
<head>
<meta name="theme-color" content="#0044FF">
</head>While Safari 26+ still parses the
theme-colormeta tag, Safari no longer uses this color.
Safari 26 now derives browser UI colors automatically:
Safari 26 uses the background-color of the <body> element as the default source for browser UI color.
<body style="background-color: #0088FF;">body { background-color: #0088FF; }Safari re-samples body as needed. WebKit has a live observer that directly updates the the color of Safari UI as it changes.
If no <body> background-color is set, Safari falls back to the <html> element's background-color. If neither is set, Safari defaults to white in light mode and black in dark mode.
Note
viewport-fit=cover in the viewport meta tag is required for controlling the bottom bar tint and for env(safe-area-inset-*) CSS environment variables to work, particularly for home-screen web apps.
If a qualifying fixed or sticky element exists with a background-color, it takes priority over <body>. Safari will sample an element that is:
- within 4 pixels from the top
OR - 3 pixels from the bottom on iOS
OR - partially off-screen (up to
bottom: -8pxwithmin-height: 12pxstill sampled)
- at least 80% wide on iOS
OR - at least 90% wide on macOS
- at least 3 pixels high
<div style="position: fixed; top: 4px; width: 90%; background-color: #F70;">div { position: sticky; top: 0; width: 90%; background-color: #F70; }Safari tinting has several edge cases: elements that are not sampled, properties that prevent sampling, and properties that still result in sampling.
position: absolutechildren inside fixed or sticky parents- pseudo-elements
::before::afteron fixed or sticky elements display: nonebackdrop-filter:opacity: 0.9saturate(50%)blur(8px)
visibility: hiddenpointer-events: none
Safari uses the luma (perceived brightness) of the selected color to determine if the browser UI text should be dark or light.
Users can enable or disable browser UI color tinting in Safari 26:
macOS: Safari › Settings › Tabs › Appearance: ✓ Show color in tab bar
iOS: Settings › Apps › Safari › Tabs: Allow Website Tinting ✓
The theme-color meta tag remains part of web standards: