AI 地图
产品服务
解决方案
文档与支持
定价
为什么选择百度地图
联系我们 控制台

所有文档

Maps UI-Kit

开始使用主题系统类参考
更新时间: 2026/03/10 19:45

组件样式通过 CSS 自定义属性（变量）控制，默认值在样式表:root中定义。通过applyTheme()在运行时覆盖，内置主题（深色、暖色、冷色）仅覆盖与配色相关的变量，字体、圆角、间距等未列出的变量沿用默认值。

快速使用
import BMapUIKit from '@baidumap/jsapi-ui-kit';


// 内置预设：'default' | 'dark' | 'warm' | 'cool'
BMapUIKit.applyTheme('dark');


// 切回默认
BMapUIKit.applyTheme('default');


// 注册自定义主题
BMapUIKit.registerTheme('brand', {
    '--bmap-ui-primary': '#7c3aed',
    '--bmap-ui-primary-hover': '#8b5cf6',
    '--bmap-ui-panel-bg': '#faf5ff',
    '--bmap-ui-text': '#1e1b4b',
    // ... 按需覆盖其他变量
});
BMapUIKit.applyTheme('brand');

自定义主题无需覆盖全部变量，未指定的变量将保持:root中的默认值。

内置主题预设
名称说明主色调

default

默认浅色主题

#38f蓝色

dark

深色主题

#5ba3ff亮蓝

warm

暖色主题

#e67e22橙棕

cool

冷色主题

#0891b2青蓝

主题 API
方法说明

applyTheme(name)

切换到已注册的主题，传入'default'恢复默认

applyTheme(vars)

传入Record<string, string>直接应用自定义变量（无需注册）

registerTheme(name, vars)

注册一个自定义主题，之后可通过applyTheme(name)切换

CSS 变量说明（按用途分组）

以下变量均可在自定义主题中覆盖。✓ 表示该变量在对应组件中被使用。

颜色（基础）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-panel-bg

✓

✓

✓

面板背景色

#fff/#1a1a2e

--bmap-ui-text

✓

✓

主文本色（标题、评论内容）

#333/#e0e0e0

--bmap-ui-text-secondary

✓

✓

✓

次要文本色（地址、营业时间、电话）

#11141a/#b0b0c0

--bmap-ui-panel-border

✓

✓

✓

分割线、边框

#e8e8e8/#2d2d44

--bmap-ui-primary

✓

主色调（关键词高亮、POI 图标）

#38f/#5ba3ff

--bmap-ui-divider

✓

建议项分割线

rgba(0,0,0,0.06)

颜色（交互状态）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-item-hover-bg

✓

✓

✓

列表项 / 操作按钮悬停背景

rgba(0,0,0,0.02)

--bmap-ui-item-active-bg

✓

✓

列表项选中背景

rgba(51,136,255,0.06)

颜色（评分）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-rating-color

✓

✓

评分数字颜色

#ff5e27

颜色（标签）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-tag-bg

✓

POI 标签背景（如「必吃」「人气」）

rgba(15,153,119,0.08)

--bmap-ui-tag-text

✓

POI 标签文字

#0f9977

--bmap-ui-tag-detail-bg

✓

详情类型标签背景（如「中餐」「川菜」）

rgba(0,0,0,0.04)

颜色（榜单）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-rank-border

✓

✓

榜单标识边框

#f6cdb4

--bmap-ui-rank-text

✓

✓

榜单标识文字（如「美食榜第1名」）

#984f35

颜色（分类标签）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-label-border

✓

✓

行业 / 类型分类标签边框

#d0d3d9

--bmap-ui-label-text

✓

✓

分类标签文字

#5c6373

颜色（推荐理由）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-reason-bg

✓

推荐理由卡片背景

#f7f8fc

--bmap-ui-reason-text

✓

推荐理由卡片文字

#984f35

颜色（详情页专用）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-phone-icon-border

✓

电话图标圆形边框

rgba(17,20,26,1)

--bmap-ui-gallery-badge-bg

✓

图片画廊数量角标背景

rgba(0,0,0,0.4)

颜色（自动补全专用）
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-autocomplete-shadow

✓

输入框与下拉列表阴影

rgba(0,0,0,0.1)

字体与布局
变量名PlaceSearchPlaceDetailPlaceAutocomplete说明示例值

--bmap-ui-font-family

✓

✓

✓

字体族（系统字体栈）

-apple-system, sans-serif

--bmap-ui-font-size-base

✓

✓

基础字号

14px

--bmap-ui-radius

✓

列表容器圆角

4px

--bmap-ui-spacing-xs

✓

✓

超小间距

4px

--bmap-ui-spacing-xsm

✓

小间距（图片画廊间距）

6px

--bmap-ui-spacing-sm

✓

✓

中小间距（信息行间距）

8px

--bmap-ui-spacing-md

✓

✓

中间距（区块间距）

12px

--bmap-ui-spacing-lg

✓

✓

✓

大间距

16px

默认主题（:root）完整变量表

样式表中定义的默认 CSS 变量，作为所有主题的基准。

变量名说明默认值

--bmap-ui-primary

主色

#38f

--bmap-ui-primary-hover

主色悬停

#5ba3ff

--bmap-ui-panel-bg

面板背景

#fff

--bmap-ui-panel-border

面板边框

#e8e8e8

--bmap-ui-text

正文文字颜色

#333

--bmap-ui-text-secondary

次要文字颜色

#11141a

--bmap-ui-font-family

字体族

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

--bmap-ui-font-size-base

基础字号

14px

--bmap-ui-radius

圆角

4px

--bmap-ui-spacing-xs

超小间距

4px

--bmap-ui-spacing-xsm

小间距

6px

--bmap-ui-spacing-sm

小间距

8px

--bmap-ui-spacing-md

中间距

12px

--bmap-ui-spacing-lg

大间距

16px

--bmap-ui-item-hover-bg

列表项悬停背景

rgba(0, 0, 0, 0.02)

--bmap-ui-item-active-bg

列表项选中背景

rgba(51, 136, 255, 0.06)

--bmap-ui-rating-color

评分颜色

#ff5e27

--bmap-ui-tag-bg

标签背景

rgba(15, 153, 119, 0.08)

--bmap-ui-tag-text

标签文字

#0f9977

--bmap-ui-rank-border

榜单边框

#f6cdb4

--bmap-ui-rank-text

榜单文字

#984f35

--bmap-ui-label-border

标签边框

#d0d3d9

--bmap-ui-label-text

标签文字

#5c6373

--bmap-ui-reason-bg

推荐理由背景

#f7f8fc

--bmap-ui-reason-text

推荐理由文字

#984f35

--bmap-ui-phone-icon-border

电话图标边框

rgba(17, 20, 26, 1)

--bmap-ui-gallery-badge-bg

图集角标背景

rgba(0, 0, 0, 0.4)

--bmap-ui-tag-detail-bg

详情页标签区域背景

rgba(0, 0, 0, 0.04)

--bmap-ui-divider

建议项分割线（自动补全）

rgba(0, 0, 0, 0.06)

--bmap-ui-autocomplete-shadow

输入框与下拉列表阴影（自动补全）

rgba(0, 0, 0, 0.1)

深色主题（dark）变量值

仅列出与默认主题不同的变量，其余沿用默认值。

变量名说明深色主题值

--bmap-ui-primary

主色

#5ba3ff

--bmap-ui-primary-hover

主色悬停

#7bb8ff

--bmap-ui-panel-bg

面板背景

#1a1a2e

--bmap-ui-panel-border

面板边框

#2d2d44

--bmap-ui-text

正文文字颜色

#e0e0e0

--bmap-ui-text-secondary

次要文字颜色

#b0b0c0

--bmap-ui-item-hover-bg

列表项悬停背景

rgba(255, 255, 255, 0.06)

--bmap-ui-item-active-bg

列表项选中背景

rgba(91, 163, 255, 0.15)

--bmap-ui-rating-color

评分颜色

#ff7e4f

--bmap-ui-tag-bg

标签背景

rgba(45, 212, 168, 0.12)

--bmap-ui-tag-text

标签文字

#2dd4a8

--bmap-ui-rank-border

榜单边框

#8b5e3c

--bmap-ui-rank-text

榜单文字

#f6cdb4

--bmap-ui-label-border

标签边框

#4a4a5e

--bmap-ui-label-text

标签文字

#9a9ab0

--bmap-ui-reason-bg

推荐理由背景

#252538

--bmap-ui-reason-text

推荐理由文字

#f6cdb4

--bmap-ui-phone-icon-border

电话图标边框

rgba(224, 224, 224, 0.6)

--bmap-ui-gallery-badge-bg

图集角标背景

rgba(0, 0, 0, 0.55)

--bmap-ui-tag-detail-bg

详情页标签区域背景

rgba(255, 255, 255, 0.08)

暖色主题（warm）变量值

以橙棕色为主色，搭配米色背景。仅列出覆盖的变量。

变量名说明暖色主题值

--bmap-ui-primary

主色

#e67e22

--bmap-ui-primary-hover

主色悬停

#f39c12

--bmap-ui-panel-bg

面板背景

#fdf6ec

--bmap-ui-panel-border

面板边框

#f0d9b5

--bmap-ui-text

正文文字颜色

#5d4037

--bmap-ui-text-secondary

次要文字颜色

#795548

--bmap-ui-item-hover-bg

列表项悬停背景

rgba(230, 126, 34, 0.06)

--bmap-ui-item-active-bg

列表项选中背景

rgba(230, 126, 34, 0.12)

--bmap-ui-rating-color

评分颜色

#e74c3c

--bmap-ui-tag-bg

标签背景

rgba(230, 126, 34, 0.1)

--bmap-ui-tag-text

标签文字

#e67e22

--bmap-ui-rank-border

榜单边框

#f0d9b5

--bmap-ui-rank-text

榜单文字

#d35400

--bmap-ui-label-border

标签边框

#dcc6a0

--bmap-ui-label-text

标签文字

#8d6e63

--bmap-ui-reason-bg

推荐理由背景

#fef9e7

--bmap-ui-reason-text

推荐理由文字

#d35400

--bmap-ui-phone-icon-border

电话图标边框

rgba(93, 64, 55, 0.6)

--bmap-ui-gallery-badge-bg

图集角标背景

rgba(0, 0, 0, 0.4)

--bmap-ui-tag-detail-bg

详情页标签区域背景

rgba(230, 126, 34, 0.08)

冷色主题（cool）变量值

以青蓝色为主色，搭配冷灰背景。仅列出覆盖的变量。

变量名说明冷色主题值

--bmap-ui-primary

主色

#0891b2

--bmap-ui-primary-hover

主色悬停

#06b6d4

--bmap-ui-panel-bg

面板背景

#f0f9ff

--bmap-ui-panel-border

面板边框

#bae6fd

--bmap-ui-text

正文文字颜色

#164e63

--bmap-ui-text-secondary

次要文字颜色

#475569

--bmap-ui-item-hover-bg

列表项悬停背景

rgba(8, 145, 178, 0.06)

--bmap-ui-item-active-bg

列表项选中背景

rgba(8, 145, 178, 0.12)

--bmap-ui-rating-color

评分颜色

#f59e0b

--bmap-ui-tag-bg

标签背景

rgba(8, 145, 178, 0.1)

--bmap-ui-tag-text

标签文字

#0891b2

--bmap-ui-rank-border

榜单边框

#bae6fd

--bmap-ui-rank-text

榜单文字

#0e7490

--bmap-ui-label-border

标签边框

#94a3b8

--bmap-ui-label-text

标签文字

#64748b

--bmap-ui-reason-bg

推荐理由背景

#ecfeff

--bmap-ui-reason-text

推荐理由文字

#0e7490

--bmap-ui-phone-icon-border

电话图标边框

rgba(22, 78, 99, 0.6)

--bmap-ui-gallery-badge-bg

图集角标背景

rgba(0, 0, 0, 0.4)

--bmap-ui-tag-detail-bg

详情页标签区域背景

rgba(8, 145, 178, 0.08)

设置示例
// 示例 1：直接应用变量（无需注册）
BMapUIKit.applyTheme({
    '--bmap-ui-panel-bg': '#ff0000',
    '--bmap-ui-text': '#ffffff',
    '--bmap-ui-rating-color': '#00ff00',
});


// 示例 2：注册后切换
BMapUIKit.registerTheme('custom', {
    '--bmap-ui-panel-bg': '#1a1a2e',
    '--bmap-ui-text-secondary': '#b0b0c0',
    '--bmap-ui-item-hover-bg': 'rgba(255, 255, 255, 0.06)',
});
BMapUIKit.applyTheme('custom');

导出的主题变量

可通过命名导入获取内置主题的变量对象，用于扩展自定义主题：

import { darkThemeVariables, warmThemeVariables, coolThemeVariables } from '@baidumap/jsapi-ui-kit';


// 基于深色主题扩展
BMapUIKit.registerTheme('custom-dark', {
    ...darkThemeVariables,
    '--bmap-ui-primary': '#7c3aed',  // 仅覆盖主色调
});

上一篇

开始使用

下一篇

类参考
本篇文章对您是否有帮助？