---
title: "drawThemeStyles"
description: "Generate a mapbox-gl-draw styles array from theme options, with per-feature user_color overrides."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/extensions/draw-theme"
---
# drawThemeStyles

> Generate a mapbox-gl-draw styles array from theme options, with per-feature user_color overrides.

## Introduction

`drawThemeStyles` generates a complete mapbox-gl-draw `styles` array from theme options, intended for use with `userProperties: true`. Colors are resolved via `coalesce(user_color, themeColor)`, so a per-feature `user_color` property can override the theme color.

Auto-imported from `@movk/mapbox` — no manual import needed.

## Usage

Switch the primary color to generate theme styles (preset polygons update instantly):

```vue [DrawThemeExample.vue]
<script setup lang="ts">
import { computed } from 'vue'
import type { Feature } from 'geojson'

const props = withDefaults(defineProps<{ color?: string }>(), {
  color: '#8b5cf6'
})

// 预置多边形，主题色即时可见
const features = ref<Feature[]>([{
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [[[116.38, 39.90], [116.41, 39.90], [116.41, 39.92], [116.38, 39.92], [116.38, 39.90]]]
  }
}])

const options = computed(() => ({
  displayControlsDefault: false,
  userProperties: true,
  styles: drawThemeStyles({ color: props.color })
}))
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.395, 39.91], zoom: 12 }">
      <!-- color 变化经 :key 重建控件按新主题重绘 -->
      <MapboxDrawControl :key="color" v-model:features="features" :options="options" />
    </MapboxMap>
  </div>
</template>
```

## API

### `drawThemeStyles()`

Accepts `options: DrawThemeOptions` (all optional, defaults apply) and returns `StyleSpec[]`, which can be passed directly to [MapboxDrawControl](https://mapbox.mhaibaraai.cn/docs/extensions/draw) via `options.styles`.

**color** (`string`): Primary color for inactive features.
@defaultValue '#3b82f6'

**activeColor** (`string`): Primary color for active (drawing / selected) features.
@defaultValue '#f59e0b'

**fillOpacity** (`number`): Fill opacity for polygons.
@defaultValue 0.1

**lineWidth** (`number`): Line width.
@defaultValue 2

**vertexRadius** (`number`): Vertex circle radius.
@defaultValue 5

## Changelog

See commit history for [src/runtime/utils/drawTheme.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/drawTheme.ts).

---

- [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw)


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.