Como Alterar a Cor do Safari com a Meta Theme-color

Mude a cor do toolbar e de todo o frame do Safari com este CODExpress que é só copiar e colar no seu projeto.

Lógica

O Safari permite que você modifique as cores para elementos do navegador, utilizando a meta theme-color, ao definir a cor você customiza a cor do Safari podendo por exemplo colocar o navegador da mesma cor do seu site. A funcionalidade está disponível na versão 15 do Safari. O valor theme-color para o atributo name do elemento indica uma cor sugerida que os navegadores devem usar para personalizar a exibição da página ou da interface do usuário ao redor.

Código Expresso

                
<meta name="theme-color" content="#8a3f05">
 
/* Você ainda pode definir as cores de preferência para o tema dark e light.*/
 
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#8a3f05">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#7d876e">

1

CSS: The Definitive Guide: Visual Presentation for the Web (English Edition)

If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a comprehensive guide to CSS implementation, along with a thorough review of the latest CSS specifications. CSS is a constantly evolving language for describing the presentation of web content on screen, printers, speech synthesizers, screen readers, and chat windows. It is used by all browsers on all screen sizes on all types of IoT devices, including phones, computers, video games, televisions, watches, kiosks, and auto consoles. Authors Eric Meyer and Estelle Weyl show you how to improve user experience, speed development, avoid potential bugs, and add life and depth to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques. This guide covers: Selectors, specificity, and the cascade Values, units, fonts, and text properties Padding, borders, outlines, and margins Colors, backgrounds, and gradients Floats and positioning tricks Flexible box layout The new Grid layout system 2D and 3D transforms, transitions, and animation Filters, blending, clipping, and masking Media and feature queries

Saiba mais