> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt)
# Configure the Basemap in Mapbox GL JS
This tutorial walks you through creating and applying a custom colors to the Mapbox Standard style at runtime. By the end, you'll have adjusted the colors of the [basemap](https://docs.mapbox.com/help/help/glossary/basemap) to fit the needs of your webpage.
> **Note: To make more in-depth style changes**
>
> This tutorial covers more quick minor adjustments to style your map, with limited options on adjustment. If you want to create a more stylized map with more options, see the [create a custom style](https://docs.mapbox.com/help/help/tutorials/create-a-custom-style) tutorial.
## Prerequisites
There are 3 resources you will need to follow along with this guide:
- **A Mapbox account:** Sign up for a free account on [Mapbox](https://account.mapbox.com/auth/signup/).
- **Front-end familiarity**: Some familiarity with front-end development (HTML, CSS, and JavaScript)
- **A Code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/).
## Create a map
First you will create and add a map to a page by copying the code below and pasting it into an `html` file.
Once the code is pasted, check for the term `YOUR_MAPBOX_ACCESS_TOKEN`. If you are logged into the Mapbox documentation it will automatically inject your access token into the code. Otherwise, you will need to go to the [Access Token page](https://console.mapbox.com/account/access-tokens/) in your Mapbox Console, copy your token and replace `YOUR_MAPBOX_ACCESS_TOKEN` in the code.
Because no explicit style is specified, this code will render a map using [Mapbox Standard](https://docs.mapbox.com/map-styles/standard/guides/) by default. Mapbox Standard is a default basemap style provided by Mapbox to allow for quick map creation with some customization options.
```html
Mapbox GL JS map
```
After adding the code above, save your file and open it in a browser Your map should render like in the image below:
## Adding `config` parameter to your Map constructor
Mapbox Standard allows you to make edits to the style of the map. This functionality is added to your map by default, and you can pass parameters into it by adding a `config` object with a `basemap` property to the constructor of your map. Adding properties to `config.basemap` will allow you to adjust the appearance of the Mapbox Standard Style, which you will learn more about in the next step.
To add the `config`, copy the code below:
```html
Mapbox GL JS map
```
Now that you have the `config`, you can walk through examples of what types of map adjustments can be added to the map.
## Pass parameters to Mapbox Standard
Now that you have the `config` added, you can start passing variables to affect different aspects of the map.
If you would like to view your changes ahead of time before applying them in code, see the following playground:
> **Related content (playground): [Mapbox Standard Style Playground](https://docs.mapbox.com/playground/standard-style/)**
>
> Experiment with these configuration options in our interactive playground. You can change the lighting conditions, toggle features, and set other configuration options to see how they affect the map's appearance.
This allows you to make adjustments to standard and see what the look of the map will be before implementing your code. The playground also includes code snippets for you to choose from.
Once you have viewed the playground, you can continue to walkthrough the next steps below, to see how to apply these changes to your code.
### 1. Light Presets
Light presents allow you to adjust the lighting of the map to mimic different times of day.
Mapbox Standard provides the following: Dawn, Day, Dusk and Night
To add a lighting theme to your map, add the following to your `config` struct:
```html
...
config: {
basemap: {
lightPreset: "dawn"
}
},
...
```
> **Note: Using the night light present**
>
> If using the night light present, you will need to make sure to set `emissive-strength` on your layers to greater than 0, if you add any markers or other POIs to the map, otherwise layers will appear black.
### 2. Color themes
Color themes allow you to apply an adjustment on all the colors of the map. This will override any present colors and adjust the hues according to the theme selected.
Mapbox offers two themes: Faded and Monochrome.
Add one of the base themes to the `config` with the code below:
```html
...
config: {
basemap: {
lightPreset: "dawn",
//highlight-start
theme: "faded"
//highlight-end
}
},
...
```
If you want to expand your color options to apply a theme, follow this tutorial:
> **Related content (tutorial): [Use a Look-up Table(LUT) to create a custom color theme with Mapbox Standard](https://docs.mapbox.com/help/help/tutorials/create-a-custom-color-theme/)**
>
> Learn how to use Look-up tables(LUT) to add a color theme to Mapbox, by creating your own Look-up table with a graphics editor like Photoshop and applying the LUT to the map.
### 3. Coloring individual components
You can also color individual components on the map, like the Greenspace of the map or the water at runtime. To do this, you can reference a specific component and assign it a HEX code as seen below:
```html
...
config: {
basemap: {
colorGreenspace: "#e392fe"
}
},
...
```
To see a full list of the aspects of the map you can color and adjust, view the related [API Reference Page](https://docs.mapbox.com/map-styles/standard/api/).
## Finished Product
You've made an interactive marker map with custom data and styling using Mapbox GL JS.
### Finished Interactive Map
### Finished Code Snippet
```html
Demo: Color your map at runtime
```
## What's Next?
**Congratulations**, you've adjusted different aspects of Mapbox Standard to customize the look of your map! Experiment with additional adjustments to create unique map designs and refine your style.
### What we covered
- Accessing the Mapbox Standard `config`
- Adjusting lighting presets
- Adding a color theme
- Coloring different aspects of the map
### Related learning
You might also be interested in:
- Learning more about [Map design and styles](https://docs.mapbox.com/help/dive-deeper/map-design/) in our dive deeper guide.
- [Creating a custom style](https://docs.mapbox.com/help/tutorials/create-a-custom-style/) tutorial.
- [Create a custom color theme, using a Look-up Table (LUT)](https://docs.mapbox.com/help/tutorials/create-a-custom-color-theme/) tutorial.