Color Palette

You can completely customize the color palette used for the user interface!

Update theme settings in the launch config

To change the text and other colors of certain elements, they have to be defined in the launch config. This can be done by adding the "theme" key along with the keys and hex color values for all items to be changed. In the code below, we are changing the widget/overlay text to red and the general text color to orange:

<!DOCTYPE html>
<html lang="en">

	<head>
		<script type="module">

			import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

			const config = {
				venueId: 'lax',
				accountId: 'A11F4Y6SZRXH4X',
				headless: false,
				theme: {colors: 
						{widgetText: "#FF0000",    // red 
						 primaryText: "#FFA500"}}  // orange 
			}

			window.LMInit = LMInit
			LMInit.setLogging(true)
			LMInit.newMap('.mymap', config)
				.then(m => { window.map = m; })
				.catch(e => console.error('Error initializing map: ', e))

		</script>
		<style>
			html, body, .mymap {
				height: 100%; margin: 0; padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mymap" style="height: 100%;"></div>
	</body>

</html>

Try it out

See a live preview here. After the map loads it will show a red search bar and text and all other text will be in orange as shown in the following image:

List of all keys available for customization

theme: {
  colors: {
    primary: '#522981',
    primaryButton: '#8559a6',
    primaryButtonText: '#FFFFFF',
    primaryButtonHover: '#722fa5',
    secondary: '#999999',
    secondaryButton: '#EEEEEE',
    secondaryButtonText: '#8559a6',
    secondaryButtonHover: '#D9D9D9',
    errorState: '#E52727',
    primaryText: '#333333',
    secondaryText: '#666666',
    background: '#FFFFFF',
    toolTipBackground: '#000',
    toolTipText: '#FFFFFF',
    mapNavBackground: '#522981',
    mapNavText: '#FFFFFF',
    mapNavSearchResults: '#9f147b',
    mapNavSearchResultsText: '#FFFFFF',
    widgetBackground: '#F9f9f9',
    widgetIconFill: '#522981',
    widgetText: '#522981',
    statusOpenBackground: '#219653',
    statusOpenText: '#FFFFFF',
    statusClosedBackground: '#ebebeb',
    statusClosedText: '#333333',
    statusEarlyBackground: '#0088DD',
    statusEarlyText: '#FFFFFF',
    statusDelayedBackground: '#CA4800',
    statusDelayedText: '#FFFFFF',
    statusCancelledBackground: '#E52727',
    statusCancelledText: '#FFFFFF'
  }
}