Skip to content

Background

Custom backgrounds can be configured on mobile.

  • background: Array
  • match: regex that matches the path
  • styles: style object to apply
  • variant: image
  • urls: string array of images

Example

"background": [
    {
      "match": "^/[\\w\\d\\-]*/stream/home",
      "styles": {
        "backgroundColor": "#E9ECBE",
        "height": "100vh",
        "marginTop": "calc(0px - var(--safe-area-inset-top))",
        "paddingTop": "var(--safe-area-inset-top)"
      }
    },
    {
      "match": "^/[\\w\\d\\-]*/page/glossary",
      "variant": "image",
      "urls": [
        "https://images.unsplash.com/photo-1588793043912-6d6f30f5b885?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1024",
        "https://images.unsplash.com/photo-1592135841592-b635e8350ed8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1024"
      ]
    },
    {
      "match": "^/[\\w\\d\\-]*/page/projects",
      "urls": [
        "https://images.unsplash.com/photo-1484849890624-e23c6d5791d1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1024"
      ]
    }
  ]