How to change chrome header color in Flutter Web?

Question

The default color for this header at the top with the link URL is blue, does anyone know how to change the color of it ?

Solution

Put this meta tag between "head" tag in index.html file.

<meta name="theme-color" content="#393557">

It will change your mobile browser's top menu color.

Comments

[Ahmed ibrahim]

can you post the tag here ?

[macosta]

<meta name="theme-color" content="#393557">

[Hashem Aboonajmi]

how to change it based on app theme color? instead of hardcoding the color?

[Markus Rubey]

@HashemAboonajmi you could specify the theme in your meta tag. Or set it dynamically via dart:js. See this answer: stackoverflow.com/a/71474183/1399597