![Apple Safari Browser Icon in blue, on a light blue background](/_app/immutable/assets/theme-colour-hero.64d0e92d.jpg)
WWDC 2021 highlighted a new feature launching in Safari 15+ (2:50)
This added support for the theme-color
meta tag to change the tab bar background and over-scroll area in macOS and iPadOS, and the status bar in iOS.
This can be used by adding a simple meta tag to the head of a page.
<head>
<meta name="theme-color" content="#ecd96f" />
</head>
Safari wasn’t respecting my colour theming on desktop
Despite the colours being set it was just ignoring them, I wasn’t quite sure why. Turns out there were two settings that needed to be switched on - the first was Compact mode:
![Safari 16 settings on macOS, going to Safari then Preferences, then Tabs. This reveals settings called Tab Layout with two options: Separate and Compact. In order to display the theme-colour meta tag, this has to be updated to Compact](/_app/immutable/assets/theme-colour-1.6b245356.jpg)
In Separate mode the theme-colour is simply ignored:
![Safari 16 settings on macOS, going to Safari then 'Preferences', then 'Tabs'. This reveals settings called 'Tab Layout' with two options: Separate and Compact. When Seperate is selected the theme-colour cannot be seen.](/_app/immutable/assets/theme-colour-2.062455cc.jpg)
First, select Compact mode
Selecting Compact mode and the colour is visible:
![Safari 16 settings on macOS, going to Safari then 'Preferences', then 'Tabs'. This reveals settings called 'Tab Layout' with two options: Separate and Compact. When Compact is selected the theme-colour can be seen.](/_app/immutable/assets/theme-colour-3.a8f50361.jpg)
Secondly
There was a second setting that needed to be checked, this was under Accessibility “Show colour in compact tab bar” - this was on by default.
![Safari 16 settings on macOS, going to Safari then 'Preferences', then 'Advanced'. This reveals settings under Accessibility called 'Show colour in compact tab bar' when selected the theme-colour can now be seen.](/_app/immutable/assets/theme-colour-4.af7163fb.jpg)
Done
After this the theme colour will display.