# Make it feel like Lia > A checklist and starter code so your app feels part of Lia. Theme, safe areas, language, buttons, back navigation, haptics and sound. From the Lia developer docs: https://docs.lialabs.org/guides/feel-native ## A starter ```html title="index.html"

``` ## The checklist - **Call `Lia.ready()` as soon as your first screen is drawn**, not after everything has loaded. Lia's loader covers your app until then. - **Use Lia's colours.** Build on `--lia-bg-color`, `--lia-text-color`, `--lia-hint-color` and `--lia-secondary-bg-color`, and your app switches with Lia between light and dark. - **Mind the safe areas.** Pad the bottom with `--lia-safe-area-inset-bottom`; in fullscreen, keep content below `--lia-content-safe-area-inset-top`. - **Speak their language.** Use `Lia.language` for your words, set `dir` from `Lia.rtl`, and listen for `languageChanged`. Lia speaks 13 languages; English is a fine fallback. - **Use Lia's buttons for the main action.** `Lia.mainButton` sits where people expect it, above the home bar, in Lia blue. - **Use the back button for your own screens.** Show `Lia.backButton` one screen in, and handle `onClick`; hide it on your first screen. - **Use Lia's dialogs.** `Lia.confirm`, `Lia.showPopup` and `Lia.toast` look like the rest of Lia and read right to left when they should. - **Feel it.** `Lia.haptic("selection")` for choices, `"success"` and `"error"` for results. Not every frame. - **Respect sound.** Play only while `Lia.soundOn`, and stop on `soundChanged` and `pause`. - **Pause on `pause`.** Timers, game loops, music and sockets that matter. - **Ask before closing a game under way** with `Lia.enableClosingConfirmation()`, and turn it off when it's over. - **Stop swipes from closing a game that uses them** with `Lia.disableVerticalSwipes()`. - **No hover, no tiny targets.** It's a phone: 44 px tap targets at least, and no text selection on buttons. ## Colour your header If your app has a strong colour of its own, give Lia's header and background the same: ```js Lia.setHeaderColor("#0E1A3A"); Lia.setBackgroundColor("#0E1A3A"); ``` Lia turns the header's text and buttons light or dark to suit.