Add a custom theme | Mapbox Search JS

This example makes use of the Control Theme API to theme a listbox with a "retro" style.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a custom theme</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.17/web.js"></script>
</head>
<body>
<form class="prose">
<h3>Start typing for a custom theme!</h3>
<input name="address" autocomplete="shipping street-address" placeholder="Address">
</form>
<script>
// TO MAKE THE EXAMPLE WORK YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
 
const script = document.getElementById('search-js');
script.onload = () => {
const collection = mapboxsearch.autofill({
accessToken: ACCESS_TOKEN
});
 
// Our retro theme!
collection.theme = {
variables: {
unitHeader: '28px',
fontFamily: '"MS Sans Serif",Tahoma,Verdana,Segoe,sans-serif',
border: '2px solid #424242',
borderRadius: '0',
boxShadow: '0 0 1px 1px rgba(0,0,0,0.1)',
colorText: '#212529',
colorPrimary: '#08216b',
colorSecondary: '#424242',
colorBackground: 'silver'
},
cssText: `
.Results,
.Modal,
.Input {
border-top-color:#fff;
border-left-color:#fff;
border-right-color:#333;
border-bottom-color:#333;
}
`,
};
};
</script>
</body>
</html>