# Appearance (/docs/settings/appearance)





## 1. Theme [#1-theme]

Select one of:

1. System
2. Dark
3. Light

See also: `Settings -> JS Scripts -> Apply App Theme`.

**Default:** System

## 2. Floating Toolbar Mode [#2-floating-toolbar-mode]

Control the visibility and behaviour of the floating toolbar menu button:

1. Hidden
2. Hidden when locked
3. Shown

When set to **Hidden**, the "Settings" button will be visible from the
Kiosk Control Panel.

**Default:** Hidden when locked

## 3. Window Insets [#3-window-insets]

Controls padding for full-screen content relative to system UI elements. Use
`WebViewInset` in your app to select the desired inset for full-height/width
components. For details, see the
[Android Compose System Insets guide](https://developer.android.com/develop/ui/compose/system/insets).

| Inset           | Description                                                                                                                                                                                                                                                                         |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| None            | No padding applied.                                                                                                                                                                                                                                                                 |
| Status Bars     | The insets describing the status bars. These are the top system UI bars containing notification icons and other indicators.                                                                                                                                                         |
| Navigation Bars | The insets describing the navigation bars. These are the system UI bars on the left, right, or bottom side of the device, describing the taskbar or navigation icons. These can change at runtime based on the user's preferred navigation method and interacting with the taskbar. |
| System Bars     | The union of the system bar insets, which include the status bars, navigation bars, and caption bar.                                                                                                                                                                                |
| Display Cutout  | The insets representing the amount of spacing needed to avoid overlapping with a display cutout (notch or pinhole).                                                                                                                                                                 |
| Safe Drawing    | Insets representing safe drawing area that avoids system UI and cutouts.                                                                                                                                                                                                            |
| Safe Gestures   | Insets representing areas where system gestures are active and the app should avoid placing interactive elements.                                                                                                                                                                   |
| Safe Content    | Insets representing the safe content area where important UI should not be obscured by system UI.                                                                                                                                                                                   |

**Default:** System Bars

## 4. Immersive Mode [#4-immersive-mode]

In immersive mode, your system bars (status and navigation) are hidden.

You can temporarily reveal the system bars with gestures such as swiping
from the edge of the screen where the bar is hidden from.

Note: immersive mode is enabled automatically when entering fullscreen
(for example, when watching a video), irrespective of this setting.

| Mode             | Description                                                                   |
| ---------------- | ----------------------------------------------------------------------------- |
| Always On        | System bars are always hidden.                                                |
| Always Off       | System bars are never hidden (unless in fullscreen).                          |
| Only when locked | System bars are only hidden when the device is in locked/pinned (kiosk) mode. |

For more details, refer to:

* [Android Immersive Mode Official Documentation](https://developer.android.com/develop/ui/views/layout/immersive)
* [BEHAVIOR\_SHOW\_TRANSIENT\_BARS\_BY\_SWIPE](https://developer.android.com/reference/androidx/core/view/WindowInsetsControllerCompat#BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE\(\))

**Default:** Only when locked

## 5. Blocked Message [#5-blocked-message]

The message to display when a URL matches the blacklist regex filter rule.

**Default:** This site is blocked by Webview Kiosk

## 6. Custom Block Page HTML [#6-custom-block-page-html]

Define the custom HTML content to show when a page is blocked.

Leave blank to use the default block page.

Examples:

<CodeBlockTabs defaultValue="Minimal">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Minimal">
      Minimal
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Redirect">
      Redirect
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Full">
      Full
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Minimal">
    ```html
    <div style="text-align:center; margin-top:10%;">
      <h1 style="font-size:4rem;">Blocked</h1>
      <p style="font-size:3rem;">This site is not accessible.</p>
    </div>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Redirect">
    ```html
    <meta http-equiv="refresh" content="0; url=https://webviewkiosk.nktnet.uk">
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Full">
    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Blocked</title>
      <style>
        body {
          text-align: center;
          margin-top: 10%;
          font-family: sans-serif;
          color: darkred;
        }
        h1 {
          font-size: 5rem;
          margin: 1rem 0;
        }
        p {
          font-size: 3.5rem;
          margin: 1rem 0;
        }
        button {
          font-size: 3rem;
          height: 100px;
          width: 280px;
          padding: 0.75rem 2rem;
          margin: 1rem;
          cursor: pointer;
          border-radius: 20px;
        }
      </style>
      <script>
        function goHome() {
          window.location.href = "https://webviewkiosk.nktnet.uk";
        }
      </script>
    </head>
    <body>
      <h1>Blocked</h1>
      <p>This site is not accessible.</p>
      <div>
        <button onclick="window.history.back()">Go Back</button>
        <button onclick="goHome()">Go Home</button>
      </div>
    </body>
    </html>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

**Default:** (blank)

## 7. Address Bar Mode [#7-address-bar-mode]

Customise the visibility of the address bar. Select one of:

1. Hidden
2. Hidden when locked
3. Shown

With `Hidden when locked`, the address bar will be visible in the default view,
but disappears when the app is locked (pinned) using the floating toolbar
<span className="inline-flex">(<Wrench className="-rotate-90" />)</span>.

**Default:** Hidden when locked

## 8. Address Bar Size [#8-address-bar-size]

Customise the size of the address bar, which will determine the
height, font size, padding and icon size. Select one of:

1. Extra Small
2. Small
3. Medium
4. Large
5. Extra Large

**Default:** Medium

## 9. Address Bar Position [#9-address-bar-position]

Customise the position of the address bar. Select one of:

1. Top
2. Bottom

**Default:** Top