# # 自定义主题

Vue-iClient3D-WebGL 内置了 13 套主题
，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。

你可以通过以下方式定义主题。

### # 使用 Vue-iClient3D-WebGL 内置主题

    import Vue from 'vue';
    import VueiClient from '@supermap/vue-iClient3D-WebGL';
    import App from './App.vue';

    // 可以通过两种方式使用内置主题
    // 1 初始化组件时传入主题配置
    Vue.use(VueiClient, { theme: 'light' });

    // 2 通过 setTheme 方法设置主题
    VueiClient.setTheme({ theme: 'light' });

### # 使用自定义主题

你需要定义一个 theme 对象，包含 `textColor` `background` `colorGroup` 三个属性。

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
textColor | 字体颜色 | string | - | -
background | 背景颜色 | string | - | -
colorGroup | 颜色数组 | string[ ] | - | -

如下例所示：

    let theme = {
      textColor: '#eee',
      background: 'rgba(0,0,0,0)',
      colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
    };

    Vue.use(VueiClient, { theme });
    // 或
    VueiClient.setTheme({ theme });