Config on root style

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css"
  rel="stylesheet"
/>
<link
  href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css"
  rel="stylesheet"
/>
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoibWFwYm94c2F0ZWxsaXRlIiwiYSI6ImNqZWZ0MHg0djFqZWoyeG9kN3ZiMmkyd3cifQ.y2HNjGo7FcKQ7psI_BfGqQ";

const style = {
  version: 8,
  imports: [{ id: "underlay", url: "mapbox://styles/mapbox/standard" }],
  sources: {
    composite: {
      url: "mapbox://mapbox.mapbox-streets-v8",
      type: "vector",
    },
  },
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  projection: { name: "globe" },
  schema: {
    color: {
      default: "red",
      type: "color",
    },
  },
  layers: [
    {
      id: "natural-label",
      type: "circle",
      source: "composite",
      "source-layer": "natural_label",
      minzoom: 3,
      layout: {},
      paint: {
        "circle-radius": 10,
        "circle-color": ["config", "color"],
      },
    },
  ],
};

const map = (window.map = new mapboxgl.Map({
  container: "map",
  center: [-104.1498, 44.7627],
  zoom: 6,
  style,
  config: {
    basemap: {              
      color: 'green'
    }
  }
}));

map.on('style.load', () => {
  map.setConfigProperty('basemap', 'color', 'orange');
});