Theming

Mini Apps are web applications designed to have a native appearance. This includes not only the use of components that mimic native elements but also the adoption of the parent application's color scheme.

Mini Apps are provided with colors that currently match those used in your native application. These colors should be utilized by Mini Apps to ensure a consistent and native look.

Retrieving Launch Parameter

Here is a complete example of the parameter value:

{
  "accent_text_color": "#6ab2f2",
  "bg_color": "#17212b",
  "button_color": "#5288c1",
  "button_text_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"
}

Background and Header Colors

As long as a Mini App is always displayed within a native component, which consists of parts such as the header and body, The Mini Apps also allows changing their colors.

window.OpenWeb3.WebApp.setHeaderColor("#B0E0E6")
window.OpenWeb3.WebApp.setBackgroundColor("#B0E0E6")