组件样式通过 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 变量说明（按用途分组）
以下变量均可在自定义主题中覆盖。✓ 表示该变量在对应组件中被使用。
颜色（基础）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--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) |
颜色（交互状态）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-item-hover-bg |
✓ |
✓ |
✓ |
列表项 / 操作按钮悬停背景 |
rgba(0,0,0,0.02) |
--bmap-ui-item-active-bg |
✓ |
|
✓ |
列表项选中背景 |
rgba(51,136,255,0.06) |
颜色（评分）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-rating-color |
✓ |
✓ |
|
评分数字颜色 |
#ff5e27 |
颜色（标签）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--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) |
颜色（榜单）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-rank-border |
✓ |
✓ |
|
榜单标识边框 |
#f6cdb4 |
--bmap-ui-rank-text |
✓ |
✓ |
|
榜单标识文字（如「美食榜第1名」） |
#984f35 |
颜色（分类标签）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-label-border |
✓ |
✓ |
|
行业 / 类型分类标签边框 |
#d0d3d9 |
--bmap-ui-label-text |
✓ |
✓ |
|
分类标签文字 |
#5c6373 |
颜色（推荐理由）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-reason-bg |
✓ |
|
|
推荐理由卡片背景 |
#f7f8fc |
--bmap-ui-reason-text |
✓ |
|
|
推荐理由卡片文字 |
#984f35 |
颜色（详情页专用）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-phone-icon-border |
|
✓ |
|
电话图标圆形边框 |
rgba(17,20,26,1) |
--bmap-ui-gallery-badge-bg |
|
✓ |
|
图片画廊数量角标背景 |
rgba(0,0,0,0.4) |
颜色（自动补全专用）
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--bmap-ui-autocomplete-shadow |
|
|
✓ |
输入框与下拉列表阴影 |
rgba(0,0,0,0.1) |
字体与布局
| 变量名 |
PlaceSearch |
PlaceDetail |
PlaceAutocomplete |
说明 |
示例值 |
--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', // 仅覆盖主色调
});