Updating the App Bar at Runtime

Last updated: May 23, 2026

The App Bar Bridge lets you update the app bar's appearance at runtime from your website JavaScript. This is useful when you want a different look on specific pages — for example, changing the background color and title when a user navigates to a particular section of your website.

Updating the App Bar

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            app_bar: {
                settings: {
                    bg_color: {
                        light: "#186E62",
                        dark: "#000000"
                    },
                    title_color: {
                        light: "#ffffff",
                        dark: "#ffffff"
                    },
                    default_title: "Page Title"
                }
            }
        }
    }
}));

Updatable Properties

PropertyDescription
bg_color.lightApp bar background color in Light Mode (HEX)
bg_color.darkApp bar background color in Dark Mode (HEX)
title_color.lightTitle text color in Light Mode (HEX)
title_color.darkTitle text color in Dark Mode (HEX)
default_titleThe title text shown in the app bar

All properties are optional — you can update any combination in a single call.

Common Use Cases

Change the app bar color and title when navigating to the contact page:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            app_bar: {
                settings: {
                    bg_color: {
                        light: "#1A3C5E",
                        dark: "#0D1F33"
                    },
                    title_color: {
                        light: "#ffffff",
                        dark: "#ffffff"
                    },
                    default_title: "Contact Us"
                }
            }
        }
    }
}));

Update only the title without changing colors:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            app_bar: {
                settings: {
                    default_title: "My Orders"
                }
            }
        }
    }
}));
The update takes effect immediately and persists for the current app session. The configured default app bar settings are restored when the app is next launched.

For a general introduction to the JavaScript Bridge, see the Overview article.