如何覆盖Azure Map Controls默认配色以匹配自定义UI深色模式

能不能覆盖Azure Maps控件的默认配色？ #

可以覆盖。目前Azure Maps Web SDK官方仅公开了light和dark两个预设主题配置，没有提供直接的自定义主题参数，但可以通过覆盖SDK内置CSS类的方式实现完全自定义配色，适配你的自定义深色UI风格。

你遇到的主题配置仅对绘图工具栏生效的问题，优先先升级到最新版的Azure Maps Web SDK，旧版本SDK存在原生控件（缩放、罗盘、俯仰、样式选择控件）不继承全局style参数的已知bug。如果升级后仍未达到预期效果，直接用CSS样式覆盖即可。

具体实现方案 #

1. 用浏览器开发者工具定位你需要修改的地图控件元素，所有Azure Maps控件的类名均以azuremaps-为前缀，直接自定义对应类的样式即可，需要加!important保证优先级高于SDK内置样式。
   示例CSS代码如下：

/* 全局控件容器样式 */
.azuremaps-control {
    background-color: #1e1e2e !important; /* 替换为你的UI深色背景色 */
    border-color: #313244 !important;
    border-radius: 4px !important;
}

/* 控件按钮通用样式 */
.azuremaps-control button {
    background-color: transparent !important;
    color: #cdd6f4 !important; /* 替换为你的UI文字主色 */
    border: none !important;
}

/* 按钮hover、激活状态样式 */
.azuremaps-control button:hover,
.azuremaps-control button.active {
    background-color: #45475a !important;
    color: #f38ba8 !important; /* 替换为你的UI强调色 */
}

/* 样式选择控件下拉列表样式 */
.azuremaps-stylecontrol-list {
    background-color: #1e1e2e !important;
    color: #cdd6f4 !important;
    border-color: #313244 !important;
}

/* 绘图工具栏专属样式 */
.azuremaps-drawing-toolbar {
    background-color: #1e1e2e !important;
}

你提供的实际效果截图如下：

你提供的示例代码整理如下：

//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'
    });
});

内容的提问来源于stack exchange，提问作者OJB1