Azure Map Controls override the CSS style

Question

Is it possible to somehow override the default color scheme that is used for the Azure Map Controls? I cant find anything in MS Docs other than setting between 'light' & 'dark', however neither of their colour choices look very nice and I want some uniformity with the color scheme of my own dark mode on my UI.

In addition, setting light/dark for the style only works for the drawing toolbar, but not for other the map controls, hence the screenshot below:

Sample code:

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl(),
        new atlas.control.CompassControl(),
        new atlas.control.PitchControl(),
    ], {
        position: "top-right",
        style: theme, // theme == 'light' or 'dark'
    });
});

Answer 1

I should learn to use the inspect element more often in the browser debug and I would have found the required css much quicker!

Update to the code sample that corrects the issue with the drawing toolbar not showing the dark mode.

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            style: theme, // theme == 'light' or 'dark'
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // Terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.CompassControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.PitchControl({
            style: theme, // theme == 'light' or 'dark'
        }),
    ], {
        position: "top-right",
    });
});

Then for the CSS overrides to change the colors:

.azure-maps-control-button {
    background-color: #22262A !important;
    color: white !important;
}

.azure-maps-control-container.dark > .style-options.list button {
    background-color: #22262A !important;
}
    .azure-maps-control-container.dark > .style-options.list button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }

    .dark .azure-maps-drawtoolbar-button {
        background-color: #22262A !important;
        color: white !important;
    }
    .dark .azure-maps-drawtoolbar-button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }