> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt) # Theming This page includes reference documentation for types related to the `Control Theme API`, used to configure custom styling, icons, and images for **Mapbox Search JS Web** elements. ## Options and Type Definitions ### 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. #### Type [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) #### Properties

Name	Description
cssText string	Optional CSS text to be inserted into Scoped CSS elements. As such, any CSS will not interact with the rest of the page. Class names are specific to each component's own template — see the `theme` property documentation on the component you're styling for its available class names.
icons ThemeIcons	SVG icon overrides to be applied to the control.
images ThemeImages	Raster image URLs to be applied to the control.
variables ThemeVariables	CSS variables to be applied to the control.

#### Example ```js const theme = { variables: { fontFamily: 'Avenir, sans-serif', unit: '14px', padding: '0.5em', borderRadius: '0', boxShadow: '0 0 0 1px silver', } }; const autofillElement = new MapboxAddressAutofill(); autofillElement.theme = theme; ``` このsection on Themeは役に立ちましたか？[Yes](null)[No](null) ### ThemeVariables `ThemeVariables` are a collection of CSS variables that style Control Theme API elements. #### Type [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) #### Properties

Name	Description
border string	Border color of elements such as modals and listboxes. Analogous to CSS `border`.
borderRadius string	Border radius of elements such as modals and listboxes. Analogous to CSS `border-radius`.
boxShadow string	Box shadow of elements such as modals and listboxes. Analogous to CSS `box-shadow`.
colorBackdrop string	Backdrop color of body content behind modals. Analogous to CSS `color`. Default: black with alpha value
colorBackground string	Background color for elements such as modals and listboxes. Analogous to CSS `color`. Default: white
colorBackgroundActive string	Background color for items on press. Analogous to CSS `color`. Default: dark gray
colorBackgroundHover string	Background color for items on hover. Analogous to CSS `color`. Default: light gray
colorPrimary string	Color of the primary accent color. Analogous to CSS `color`. Default: variant of blue
colorSecondary string	Color of the secondary accent color. Analogous to CSS `color`. Default: blue-gray
colorText string	Color of the primary text. Analogous to CSS `color`. Default: dark gray
curve string	The timing function to use for listbox animations. Analogous to CSS `<easing-function>`. Default: `ease-out`
duration string	The duration to use for listbox animations. Analogous to CSS `<time>`. Default: `150ms`
fontFamily string	Font family. Analogous to CSS `font-family`. Default: Sans-serif system font stack
fontWeight string	Font weight for body text. Analogous to CSS `font-weight`. Default: normal
fontWeightBold string	Font weight for headings and item titles. Analogous to CSS `font-weight`. Default: bold
fontWeightSemibold string	Font weight for subheadings. Analogous to CSS `font-weight`. Default: 600
lineHeight string	Line height. Analogous to CSS `line-height`. Default: 1.2
minWidth string	Minimum width of elements such as modals and listboxes. Analogous to CSS `<length>`.
padding string	Padding of items in an element. Analogous to CSS `<length>`.
paddingFooterLabel string	Padding of powered by mapbox label in footer of search listbox. Analogous to CSS `<length>`.
paddingModal string	Padding for contents of modal elements. Analogous to CSS `<length>`.
spacing string	Spacing between items in an element. Analogous to CSS `<length>`.
unit (string \| Expression)	Unit is the base font size and can be referenced in other variables as multiples of `1em` . Analogous to `font-size`.
unitHeader (string \| Expression)	Unit header is a derivative of `unit` and is used for modal headers. Analogous to `font-size`.

このsection on ThemeVariablesは役に立ちましたか？[Yes](null)[No](null) ### ThemeIcons `ThemeIcons` are [SVG icons](https://developer.mozilla.org/en-US/docs/Web/SVG) that are used in Control Theme API elements. Roughly, icon names and their defaults are the same as [Mapbox's Assembly](https://labs.mapbox.com/assembly/icons/). 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'. #### Type [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) #### Properties | Name | Description | | --- | --- | | **addressMarker** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Icon for address results in search list box. | | **close** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Close icon. | | **marker** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Icon for map markers. Can be any size. | | **question** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Question mark icon. | | **search** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Icon for Search Box input. | | **street** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Icon for streets results in search list box. | #### Example ```js const icons = { close: ` ` } ``` このsection on ThemeIconsは役に立ちましたか？[Yes](null)[No](null) ### 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) and [Blob URLs](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) are also supported. #### Type [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) #### Properties | Name | Description | | --- | --- | | **styleToggleDefault** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Image for the "Map" of the Map/Satellite toggle button. | | **styleToggleSatellite** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Image for the "Satellite" of the Map/Satellite toggle button. | このsection on ThemeImagesは役に立ちましたか？[Yes](null)[No](null) ### Expression Currently, the only expression supported is `['mobile', mobile_value, tablet_and_desktop_value]`. #### Type [`"mobile"`, [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)] このsection on Expressionは役に立ちましたか？[Yes](null)[No](null)