# Look and feel

> 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. From the Lia developer docs: https://docs.lialabs.org/concepts/look-and-feel

## Lia's theme

Lia passes its colours to your page, light or dark, as the person has Lia set. After [`Lia.init()`](/reference/sdk-lifecycle#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`](/reference/sdk-layout#lia-setbackgroundcolor) and [`Lia.setHeaderColor`](/reference/sdk-layout#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:

```js
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.

```js
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.