This component works by injecting and updating <meta> tags in the document head and applying background styles to the html and body elements. This approach ensures that even strict browsers like Safari on iOS recognize the intended theme color.

How to Use

1. Add Dependency: In your application, search for Browser Theme Color and add the block as a dependency.
2. Place the Block: Drag and drop the BrowserThemeHandler block into your Global Layout (e.g., LayoutTopMenu or LayoutBlank).
   • Tip: Placing it in the Layout ensures the color is applied to all screens using that layout.
3. Set the Color: Pass a Hexadecimal color code to the Color input parameter (e.g., "#FF5733").
4. Dynamic Changes: If you want to change the color based on user interaction (like a Dark Mode toggle), simply bind the Color input to a variable.

Technical Notes & Best Practices

• iOS (Safari/Chrome): On iOS, the browser tints the status bar based on the background color of the html element. This component automatically handles this, but ensure your main content area has its own background color (usually white or dark) so the theme color doesn't "leak" into the app body.
• PWA Manifest: If you have a PWA, it is recommended to set a default "Theme Color" in the OutSystems PWA settings. This component will then override that color dynamically once the app loads.
• Incognito Mode: Most browsers disable theme color customization while in Incognito/Private mode for security and privacy reasons.
• Hex Colors: For best results and compatibility, always use Hexadecimal values (e.g., #000000) instead of CSS color names.

Input Parameters

• Color (Text): The color to be applied to the browser UI. Accepts Hex codes (e.g., #2563eb).