| title | Theming |
|---|
Mini Apps are designed to look native inside Telegram. To achieve this, the Telegram client provides a set of theme colors that the app can apply to its UI.
Theme colors are available in two ways.
Launch parameter. The tgWebAppThemeParams launch parameter contains a JSON-encoded object with color values. Parse it at startup to apply the initial theme.
Runtime updates. The Telegram client can change the theme while the app is running (for example, when the user switches between light and dark mode). Call the web_app_request_theme method and listen for the theme_changed event to receive the updated colors.
The theme object contains the following optional properties:
| Property | Description |
|---|---|
bg_color |
Main background color. |
secondary_bg_color |
Secondary background color. |
text_color |
Primary text color. |
hint_color |
Hint and placeholder text color. |
link_color |
Link color. |
button_color |
Default button background color. |
button_text_color |
Default button text color. |
accent_text_color |
Accent text color (highlights, active elements). |
destructive_text_color |
Destructive action text color (delete, remove). |
header_bg_color |
Header background color. |
bottom_bar_bg_color |
Bottom bar background color. |
section_bg_color |
Section background color. |
section_header_text_color |
Section header text color. |
section_separator_color |
Section separator line color. |
subtitle_text_color |
Subtitle text color. |
Example value:
{
"accent_text_color": "#6ab2f2",
"bg_color": "#17212b",
"button_color": "#5288c1",
"button_text_color": "#ffffff",
"bottom_bar_bg_color": "#ffffff",
"destructive_text_color": "#ec3942",
"header_bg_color": "#17212b",
"hint_color": "#708499",
"link_color": "#6ab3f3",
"secondary_bg_color": "#232e3c",
"section_bg_color": "#17212b",
"section_header_text_color": "#6ab3f3",
"subtitle_text_color": "#708499",
"text_color": "#f5f5f5"
}A Mini App is displayed inside a native container that has a header bar and a body area. Telegram provides methods to change the colors of both:
web_app_set_header_color— set the header color using a theme key or a custom RGB string.web_app_set_background_color— set the body background color.