Theme Color and App Icons
Customize the browser chrome color and home screen icon.
theme-color Meta Tag
The <meta name="theme-color" content="#1f2937"> tag sets the browser address bar color on mobile and the title-bar color on desktop PWAs. It gives the page a polished, app-like look without changing any content.
<meta name="theme-color" content="#1f2937">Dark Mode Theme Colors
Provide separate colors for light and dark modes: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> and a second tag with the dark color. Browsers pick the matching one based on the user's OS preference.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">All lessons in this course
- The Web App Manifest
- Service Worker Registration from HTML
- Theme Color and App Icons
- Offline Fallback Page