Add a custom theme
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.comconst 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>