Skip to main content

Theming

Join the Mapbox Developers Discord Communityarrow-right
Public beta for Mapbox Search JS

Mapbox Search JS is in public beta. During the public beta phase, frameworks may be subject to potential changes as they stabilize.

Theme

The Control Theme API is a way to apply your own design system to Mapbox Search JS Web elements.

Control themes use a combination of CSS variables, custom scoped CSS, and SVG icons.

Example

const theme = {
  variables: {
    fontFamily: 'Avenir, sans-serif',
    unit: '14px',
    padding: '0.5em',
    borderRadius: '0',
    boxShadow: '0 0 0 1px silver',
  }
};

autofill({ theme });

Instance Members

Was this section on Theme helpful?

ThemeVariables

ThemeVariables are a collection of CSS variables that style Control Theme API elements.

Instance Members

Sizing

Colors

Borders and box shadows

Typography

Transitions

Was this section on ThemeVariables helpful?

ThemeIcons

ThemeIcons are SVG icons that are used in Control Theme API elements.

Roughly, icon names and their defaults are the same as Mapbox's Assembly.

Values must be valid SVG plain-text. Unless otherwise noted, icons should be 18px in size and have appropriate dimensions set.

Icons can also be filled with 'currentColor'.

Example

const icons = {
  close: `
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.79289 3.79289C4.18342 3.40237 4.81658 3.40237 5.20711 3.79289L9 7.58579L12.7929 3.79289C13.1834 3.40237 13.8166 3.40237 14.2071 3.79289C14.5976 4.18342 14.5976 4.81658 14.2071 5.20711L10.4142 9L14.2071 12.7929C14.5976 13.1834 14.5976 13.8166 14.2071 14.2071C13.8166 14.5976 13.1834 14.5976 12.7929 14.2071L9 10.4142L5.20711 14.2071C4.81658 14.5976 4.18342 14.5976 3.79289 14.2071C3.40237 13.8166 3.40237 13.1834 3.79289 12.7929L7.58579 9L3.79289 5.20711C3.40237 4.81658 3.40237 4.18342 3.79289 3.79289Z" fill="currentColor"/>
</svg>
`
}

Instance Members

Was this section on ThemeIcons helpful?

ThemeImages

ThemeImages are raster images that are used in Control Theme API elements.

There are currently only two images, "toggle default" and "toggle satellite," which specify images for a Map/Satellite toggle button.

Values must be valid URLs accessible by the expected browser environment. Data URLs and Blob URLs are also supported.

Instance Members

Was this section on ThemeImages helpful?

Expression

Currently, the only expression supported is ['mobile', mobile_value, tablet_and_desktop_value].

Type

["mobile", string, string]
Was this section on Expression helpful?
Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?