Concepts

Look and feel

Copy page

Make your app feel part of Lia. Lia's theme as CSS variables, the viewport and safe areas, the person's language and right to left text, and sound they can mute.

#Lia's theme

Lia passes its colours to your page, light or dark, as the person has Lia set. After Lia.init() they're CSS variables on your page's root, kept current when the person switches:

css

body {
  background: var(--lia-bg-color);
  color: var(--lia-text-color);
}
.card { background: var(--lia-secondary-bg-color); }
.hint { color: var(--lia-hint-color); }
button.primary { background: var(--lia-button-color); color: var(--lia-button-text-color); }

Variable	From `Lia.theme`	What it is
`--lia-bg-color`	`bg_color`	The page's background
`--lia-text-color`	`text_color`	Text
`--lia-hint-color`	`hint_color`	Quieter text
`--lia-link-color`	`link_color`	Links (Lia blue)
`--lia-button-color`	`button_color`	Buttons (Lia blue)
`--lia-button-text-color`	`button_text_color`	Text on buttons
`--lia-secondary-bg-color`	`secondary_bg_color`	Cards and wells
`--lia-header-bg-color`	`header_bg_color`	Lia's header
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Behind the bottom buttons
`--lia-accent-text-color`	`accent_text_color`	Accented text
`--lia-section-bg-color`	`section_bg_color`	Sections
`--lia-section-header-text-color`	`section_header_text_color`	Section headings
`--lia-subtitle-text-color`	`subtitle_text_color`	Subtitles
`--lia-destructive-text-color`	`destructive_text_color`	Destructive actions
`--lia-section-separator-color`	`section_separator_color`	Hairlines
`--lia-color-scheme`	`Lia.colorScheme`	`light` or `dark`

The names follow Telegram's theme parameters, so code written for Telegram mini apps maps across. Listen for the theme event to redraw anything you paint yourself (a canvas, say).

You can also set the colour behind your page and of Lia's header with Lia.setBackgroundColor and Lia.setHeaderColor.

#The viewport

Lia.viewport is { height, expanded }: the height your page has in px, and whether a sheet is pulled up to full height. The viewport event fires when it changes (the sheet pulled up, bottom buttons shown), and --lia-viewport-height holds the height.

#Safe areas

Phones have notches and home bars. Lia passes them as Lia.safeArea and CSS variables, in px:

Variable	What it is
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	The phone's own safe area (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Clear of Lia's floating Close and ⋯ in fullscreen too (`Lia.contentSafeArea`)

In a sheet or under Lia's header, you mostly need the bottom one. In fullscreen, keep content below the content safe area's top:

css

.app {
  padding-top: var(--lia-content-safe-area-inset-top, 0px);
  padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
}

#Language

Lia.language is the language the person uses Lia in, one of Lia's 13:

Code	Language	Code	Language
`en`	English	`id`	Bahasa Indonesia
`es`	Español	`fil`	Filipino
`pt`	Português	`sw`	Kiswahili
`fr`	Français	`hi`	हिन्दी
`tr`	Türkçe	`ar`	العربية (right to left)
`ru`	Русский	`zh`	中文
`vi`	Tiếng Việt

Show your app's own words in it. The SDK sets your page's lang for you; Lia.rtl says whether the language reads right to left, so set the direction yourself:

JavaScript

Lia.init().then(function () {
  document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
  render(WORDS[Lia.language] || WORDS.en);
  Lia.ready();
});
Lia.on("languageChanged", function (data) {
  document.documentElement.dir = data.rtl ? "rtl" : "ltr";
  render(WORDS[data.language] || WORDS.en);
});

#Sound

People can mute your app from Lia's ⋯ menu, and Lia remembers it for your app. Lia.soundOn says whether they want your sounds, and soundChanged says when it changes. Play sounds only while it's on.

JavaScript

let soundOn = Lia.soundOn;
Lia.on("soundChanged", function (data) {
  soundOn = data.on;
  if (!soundOn) music.pause();
});
function play(sound) { if (soundOn) sound.play(); }

Your page may play sound without waiting for a first tap. To mix with music already playing on the phone instead of stopping it, set navigator.audioSession.type = "ambient" where the phone supports it (Lia's own games do).

#Platform

Lia.platform is ios or android after init(). Lia's frame is the phone's own web view: Safari's on iPhone, Chrome's on Android.