Skip to main content

Add a custom theme

Additional Developer Resources

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/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 MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
window.addEventListener('load', () => {
    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>
Additional Developer Resources
Was this example helpful?