Top/bottom bars
-
Hi,
I'm experiencing an issue with Lay Theme (v11.5.6) on iOS 26.5.2 Safari.
Website:
https://tepposara.com/
https://tepposara.com/tattoos/
https://tepposara.com/illustrations/Expected behaviour:
The Safari top and bottom browser bars should match the page color.
For example:Home & Tattoos → #fcbc00
Illustrations → #198cffWhat I have tested:
Added <meta name="theme-color">
Updated theme-color dynamically with JavaScript after page changes.
Tested with and without Lay Theme's AJAX page transitions.
Added apple-mobile-web-app-status-bar-style.
Cleared caches and tested on iOS 26.5.2 Safari.None of these affect the Safari toolbar colors.
From Apple's recent Safari changes it appears that iOS 26 may now derive toolbar colors from the rendered page instead of the theme-color meta tag.
Is Lay Theme currently compatible with this new Safari behaviour?
If not, are there any recommended CSS/HTML changes (fixed header, background element, etc.) or is this something that will be addressed in a future Lay Theme update?
Thank you!
And yeah did try to solve this with ai.
-
hey @teemuhoo, yes, recent iOS Safari versions may derive the toolbar appearance from the rendered page and scroll state and can ignore theme-color. unfortunately a website can no longer reliably force a different Safari toolbar color for every AJAX-loaded page.
keeping the dynamic theme-color value is still correct, but Safari may decide not to use it. at the moment there isn’t a Lay Theme setting or CSS rule that can guarantee these colors. -
you may try changing the html or body colors via css, or the grid colors using the "background" colorpicker in the gridder
or you may try to set the bg color in customize -> background
but if apple doesnt specifiy exactly how it determines the color, all you can do is try out different things
We also code custom websites or bespoke Lay features. Drop me a line at info@laytheme.com or check out my work at arminunruh.com.
Want to support my work? paypal.me/arminunruh
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it