diff --git a/core/package.json b/core/package.json
index 23800dfc..ace9daa6 100644
--- a/core/package.json
+++ b/core/package.json
@@ -12,14 +12,15 @@
     "@turf/helpers": "^6.1.4",
     "@turf/transform-scale": "^7.2.0",
     "colorcolor": "^1.1.1",
+    "css-vars-ponyfill": "^2.2.1",
     "echarts": "^4.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.difference": "^4.5.0",
     "lodash.max": "^4.0.1",
     "lodash.merge": "^4.6.1",
     "lodash.mergewith": "^4.6.2",
-    "lodash.tonumber": "^4.0.3",
     "lodash.orderby": "^4.6.0",
+    "lodash.tonumber": "^4.0.3",
     "omit.js": "^2.0.2",
     "proj4": "^2.15.0",
     "simple-statistics": "^7.8.7",
diff --git a/core/utils/global-event.ts b/core/utils/global-event.ts
index 362d9a9d..663050ca 100644
--- a/core/utils/global-event.ts
+++ b/core/utils/global-event.ts
@@ -4,6 +4,8 @@ import { Events } from 'vue-iclient-core/types/event/Events';
 export class GlobalEvent extends Events {
   _theme: any = themeFactory[1];
   eventTypes: string[];
+  on: (data: Record<string, (...rest: any) => void>) => void;
+  un: (data: Record<string, (...rest: any) => void>) => void;
 
   constructor() {
     super();
diff --git a/core/utils/style/color/__tests__/colorPalette.spec.js b/core/utils/style/color/__tests__/colorPalette.spec.js
new file mode 100644
index 00000000..5a3d3fb0
--- /dev/null
+++ b/core/utils/style/color/__tests__/colorPalette.spec.js
@@ -0,0 +1,13 @@
+import colorPalette from '../colorPalette';
+
+describe('colorPalette test', () => {
+  beforeAll(() => {});
+
+  it('colorPalette', done => {
+    const res = colorPalette('#fff', 2);
+    expect(res).toBe('#fff2f0');
+    done();
+  });
+
+  afterAll(() => {});
+});
diff --git a/core/utils/style/color/colorPalette.ts b/core/utils/style/color/colorPalette.ts
new file mode 100644
index 00000000..be8bc873
--- /dev/null
+++ b/core/utils/style/color/colorPalette.ts
@@ -0,0 +1,63 @@
+import tinycolor from 'tinycolor2';
+
+const hueStep = 2;
+const saturationStep = 16;
+const saturationStep2 = 5;
+const brightnessStep1 = 5;
+const brightnessStep2 = 15;
+const lightColorCount = 5;
+const darkColorCount = 4;
+
+function getHue(hsv: any, i: number, isLight: boolean): number {
+  let hue;
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+  } else {
+    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+  }
+  if (hue < 0) {
+    hue += 360;
+  } else if (hue >= 360) {
+    hue -= 360;
+  }
+  return Math.round(hue);
+}
+
+function getSaturation(hsv: any, i: number, isLight: boolean): number {
+  let saturation: number;
+  if (isLight) {
+    saturation = Math.round(hsv.s * 100) - saturationStep * i;
+  } else if (i === darkColorCount) {
+    saturation = Math.round(hsv.s * 100) + saturationStep;
+  } else {
+    saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+  }
+  if (saturation > 100) {
+    saturation = 100;
+  }
+  if (isLight && i === lightColorCount && saturation > 10) {
+    saturation = 10;
+  }
+  if (saturation < 6) {
+    saturation = 6;
+  }
+  return Math.round(saturation);
+}
+
+function getValue(hsv: any, i: number, isLight: boolean): number {
+  if (isLight) {
+    return Math.round(hsv.v * 100) + brightnessStep1 * i;
+  }
+  return Math.round(hsv.v * 100) - brightnessStep2 * i;
+}
+
+export default function colorPalette(color: string, index: number): string {
+  const isLight = index <= 6;
+  const hsv = tinycolor(color).toHsv();
+  const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+  return tinycolor({
+    h: getHue(hsv, i, isLight),
+    s: getSaturation(hsv, i, isLight),
+    v: getValue(hsv, i, isLight)
+  }).toHexString(false);
+}
diff --git a/core/utils/style/color/serialColors.ts b/core/utils/style/color/serialColors.ts
new file mode 100644
index 00000000..42dafb3a
--- /dev/null
+++ b/core/utils/style/color/serialColors.ts
@@ -0,0 +1,207 @@
+import colorPalette from 'vue-iclient-core/utils/style/color/colorPalette';
+import themeFactory from 'vue-iclient-core/utils/style/theme/theme.json';
+import { getColorWithOpacity, getDarkenColor, getDataType } from 'vue-iclient-core/utils/util';
+import cssVars from 'css-vars-ponyfill';
+
+export interface styleConfigParams {
+  styleConfig: {
+    id?: string;
+    className?: string;
+    include?: string;
+  };
+}
+
+const lightTheme = themeFactory[1];
+export type ThemeStyleParams = typeof lightTheme & styleConfigParams;
+
+export interface FunctionColorParams {
+  successColor?: string | string[];
+  infoColor?: string | string[];
+  warningColor?: string | string[];
+  dangerColor?: string | string[];
+}
+
+export interface ExtraColorParams {
+  [prop: string]: string;
+}
+export interface ColorGroupExtraColorParams {
+  colorGroup: string[];
+  [prop: string]: any;
+}
+
+export interface StyleReplacerParams {
+  themeStyle: ThemeStyleParams;
+  primarySerialColors?: string[];
+  functionSerialColors?: FunctionColorParams;
+  extraSerialColors: ExtraColorParams;
+}
+
+const $blue6 = '#1890ff';
+const $green6 = '#52c41a';
+const $glod6 = '#faad14';
+const $red6 = '#f5222d';
+
+const antdPrimaryColor = $blue6;
+const antdFunctionColors: FunctionColorParams = {
+  infoColor: $blue6,
+  successColor: $green6,
+  warningColor: $glod6,
+  dangerColor: $red6
+};
+
+const isBrowser = typeof window !== 'undefined';
+const isNativeSupport = isBrowser && window.CSS && window.CSS.supports && window.CSS.supports('(--a: 0)');
+
+export function getPrimarySerialColors(nextThemeInfo?: ThemeStyleParams | ColorGroupExtraColorParams): string[] {
+  const series = [];
+  const nextThemeStyle = nextThemeInfo;
+  let prevPrimaryColor: string;
+  if (nextThemeStyle && nextThemeStyle.colorGroup && nextThemeStyle.colorGroup[0]) {
+    prevPrimaryColor = nextThemeStyle.colorGroup[0];
+  }
+  const acceptColor: string = prevPrimaryColor || antdPrimaryColor;
+  for (let index = 1; index <= 10; index++) {
+    let nextColor: string;
+    switch (index) {
+      case 2:
+        nextColor = nextThemeStyle.selectedColor || getColorWithOpacity(acceptColor, 0.15);
+        break;
+      case 5:
+        nextColor = nextThemeStyle.hoverColor || colorPalette(acceptColor, index);
+        break;
+      case 6:
+        nextColor = acceptColor;
+        break;
+      case 7:
+        nextColor = nextThemeStyle.clickColor || colorPalette(acceptColor, index);
+        break;
+      default:
+        nextColor = colorPalette(acceptColor, index);
+        break;
+    }
+    series.push(nextColor);
+  }
+  return series;
+}
+
+export function getFunctionSerialColors(functionColors?: ThemeStyleParams): FunctionColorParams {
+  const seriesIndex = [1, 2, 3, 4, 5, 6, 7];
+  const acceptFunctionColors = functionColors || antdFunctionColors;
+  const nextFunctionSerialColors: FunctionColorParams = {};
+  for (const key in acceptFunctionColors) {
+    if (Object.prototype.hasOwnProperty.call(antdFunctionColors, key)) {
+      const color = acceptFunctionColors[key] || antdFunctionColors[key];
+      nextFunctionSerialColors[key] = [];
+      seriesIndex.forEach(item => {
+        const nextColor = item === 6 ? color : colorPalette(color, item);
+        nextFunctionSerialColors[key].push(nextColor);
+      });
+    }
+  }
+  return nextFunctionSerialColors;
+}
+
+export function getExtralColors(
+  themeStyleData: ThemeStyleParams,
+  primarySerialColors: string[],
+  functionColors: FunctionColorParams
+): ExtraColorParams {
+  const tableHeaderSortActiveBg = getDarkenColor(themeStyleData.backgroundLight, 3);
+  const extraSerialColors: ExtraColorParams = {
+    textColorWithoutOpacity: getColorWithOpacity(themeStyleData.textColor, 1, false),
+    backgroundWithoutOpacity: getColorWithOpacity(themeStyleData.background, 1, false),
+    componentBackgroundWithoutOpacity: getColorWithOpacity(themeStyleData.componentBackground, 1, false),
+    primaryShadowColor: getColorWithOpacity(primarySerialColors[4], 0.25),
+    dangerShadowColor: getColorWithOpacity(functionColors.dangerColor[4], 0.25),
+    disabledDarkenBgColor10: getDarkenColor(themeStyleData.containerDisabled, 10),
+    tableHeaderSortActiveBg,
+    tableHeaderFilterActiveBg: getDarkenColor(tableHeaderSortActiveBg, 5)
+  };
+  return extraSerialColors;
+}
+
+export function dealWithTheme(nextThemeStyle: ThemeStyleParams): StyleReplacerParams {
+  const defaultThemeStyle = nextThemeStyle.style || 'light';
+  const defaultTheme = themeFactory.find((item: ThemeStyleParams) => item.label === defaultThemeStyle);
+  // 合并 lightTheme 是因为可能其他 theme 没有完整的参数，如 disableColor
+  const serialColorsReplacer = getPrimarySerialColors(
+    Object.assign({ colorGroup: defaultTheme && defaultTheme.colorGroup }, nextThemeStyle)
+  );
+  const themeStyleData = Object.assign({}, lightTheme, defaultTheme, nextThemeStyle);
+  const functionSerialColorsReplacer = getFunctionSerialColors(themeStyleData);
+  const nextThemeStyleData = Object.assign({}, themeStyleData, {
+    selectedColor: serialColorsReplacer[1],
+    hoverColor: serialColorsReplacer[4],
+    clickColor: serialColorsReplacer[6]
+  });
+  const nextThemeData = {
+    themeStyle: nextThemeStyleData,
+    primarySerialColors: serialColorsReplacer,
+    functionSerialColors: functionSerialColorsReplacer,
+    extraSerialColors: getExtralColors(themeStyleData, serialColorsReplacer, functionSerialColorsReplacer)
+  };
+  setRootStyle(nextThemeData);
+  return nextThemeData;
+}
+
+export function toStyleVariable(variable) {
+  return `--${variable.replace(/[A-Z]/g, '-$&').toLowerCase()}`;
+}
+
+export function getRootStyleSelector(themeStyle: ThemeStyleParams) {
+  return themeStyle.styleConfig?.className && isNativeSupport ? `.${themeStyle.styleConfig.className}` : ':root';
+}
+
+function setRootStyle(themeData: StyleReplacerParams): void {
+  const { themeStyle, primarySerialColors, functionSerialColors, extraSerialColors } = themeData;
+  const primaryColor = themeStyle.colorGroup[0];
+  const variables = {
+    '--antd-wave-shadow-color': primaryColor,
+    '--primary-color': primaryColor
+  };
+  const themeInfo = Object.assign({}, themeStyle, extraSerialColors);
+  const themeKeys = Object.keys(themeInfo);
+  primarySerialColors.forEach((color: string, index: number) => {
+    const varKey = `--primary-${index + 1}`;
+    variables[varKey] = color;
+  });
+  for (const key in functionSerialColors) {
+    functionSerialColors[key].forEach((color: string, index: number) => {
+      const varKey = `--${key.replace('Color', '')}-${index + 1}`;
+      variables[varKey] = color;
+    });
+  }
+  themeKeys.forEach((key: string) => {
+    if (!['[object Object]', '[object Array]'].includes(getDataType(themeInfo[key]))) {
+      const varKey = toStyleVariable(key);
+      variables[varKey] = themeInfo[key] || 'rgba(0, 0, 0, 0)';
+    }
+  });
+  const rootStyleSelector = getRootStyleSelector(themeStyle);
+  const antdStyleId = themeStyle.styleConfig?.id || 'sm-component-style';
+  const rootStyle = `${rootStyleSelector} ${JSON.stringify(variables, null, 2)
+    .replace(/(:.+),/g, '$1;')
+    .replace(/"/g, '')}`;
+  let antStyleTag = document.getElementById(antdStyleId);
+  if (!antStyleTag) {
+    antStyleTag = document.createElement('style');
+    antStyleTag.setAttribute('id', antdStyleId);
+    antStyleTag.setAttribute('type', 'text/css');
+    document.head.insertBefore(antStyleTag, document.head.firstChild);
+  }
+  const defaultInclude = 'style#sm-component-style, link[href*=vue-iclient-mapboxgl]';
+  const options = {
+    include: themeStyle.styleConfig?.include || defaultInclude,
+    silent: true,
+    onlyLegacy: true,
+    variables: {},
+    watch: false
+  };
+  if (!isNativeSupport) {
+    options.onlyLegacy = false;
+    options.watch = true;
+    options.variables = variables;
+  }
+  cssVars(options);
+  antStyleTag.innerHTML = rootStyle;
+}
diff --git a/core/utils/style/theme/set-theme.ts b/core/utils/style/theme/set-theme.ts
new file mode 100644
index 00000000..c96691cd
--- /dev/null
+++ b/core/utils/style/theme/set-theme.ts
@@ -0,0 +1,34 @@
+import globalEvent from 'vue-iclient-core/utils/global-event';
+import themeFactory from 'vue-iclient-core/utils/style/theme/theme.json';
+import { dealWithTheme, ThemeStyleParams } from 'vue-iclient-core/utils/style/color/serialColors';
+import { objectWithoutProperties } from 'vue-iclient-core/utils/util';
+
+interface triggerParams {
+  triggerEvent: boolean;
+  ignoreElements: string[];
+}
+
+export const setTheme = (themeStyle: any = {}, triggerInfo?: triggerParams) => {
+  let acceptedThemeStyle = themeStyle;
+  if (typeof themeStyle === 'string') {
+    acceptedThemeStyle = themeFactory.find((item: ThemeStyleParams) => item.label === themeStyle) || themeFactory[1];
+  } else if (acceptedThemeStyle.componentBackground) {
+    if (!acceptedThemeStyle.collapseCardHeaderBg) {
+      acceptedThemeStyle.collapseCardHeaderBg = acceptedThemeStyle.componentBackground;
+    }
+    if (!acceptedThemeStyle.collapseCardBackground) {
+      acceptedThemeStyle.collapseCardBackground = acceptedThemeStyle.componentBackground;
+    }
+  }
+  const nextThemeData = dealWithTheme(acceptedThemeStyle);
+  const nextTheme = {
+    ...nextThemeData.themeStyle
+  };
+  if (themeStyle && (typeof themeStyle === 'string' || 'componentBackground' in themeStyle)) {
+    nextTheme.background = nextTheme.componentBackground;
+  }
+  globalEvent.theme = nextTheme;
+  if (!triggerInfo || triggerInfo.triggerEvent === true) {
+    globalEvent.changeTheme(objectWithoutProperties(nextTheme, (triggerInfo || {}).ignoreElements || []));
+  }
+};
diff --git a/vue3/package.json b/vue3/package.json
index 9161b353..39690f0e 100644
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -38,6 +38,7 @@
     "@types/mapbox-gl": "^3.4.1",
     "ant-design-vue": "^4.2.6",
     "colorcolor": "^1.1.1",
+    "css-vars-ponyfill": "^2.2.1",
     "echarts": "^4.8.0",
     "lodash-es": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
diff --git a/vue3/packages/common/components/collapse-card/collapseCard.vue b/vue3/packages/common/components/collapse-card/collapseCard.vue
index 58184d30..fd0f9550 100644
--- a/vue3/packages/common/components/collapse-card/collapseCard.vue
+++ b/vue3/packages/common/components/collapse-card/collapseCard.vue
@@ -12,8 +12,7 @@
       :style="[collapseCardHeaderBgStyle, headingTextColorStyle]"
       @click="iconClicked"
     >
-      <!-- <i :style="iconStyle" :class="{ [iconClass]: true, ['is-auto-rotate']: autoRotate }" /> -->
-      <SwitcherOutlined />
+      <i :style="iconStyle" :class="{ [iconClass]: true, ['is-auto-rotate']: autoRotate }" />
     </div>
     <transition name="sm-component-zoom-in" @after-leave="toggleTransition('leave')" @enter="toggleTransition('enter')">
       <div
@@ -42,9 +41,8 @@
 </template>
 
 <script setup>
-// import Theme from 'vue-iclient/src/common/_mixin/Theme';
-import { ref, computed, watch, onMounted, onBeforeMount, nextTick } from 'vue';
-import { SwitcherOutlined } from '@ant-design/icons-vue';
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { useTheme } from '@supermapgis/common/hooks'
 
 const props = defineProps({
   iconPosition: {
@@ -71,14 +69,15 @@ const props = defineProps({
   }
 });
 
+const { getTextColorStyle, headingTextColorStyle, collapseCardHeaderBgStyle, collapseCardBackgroundStyle } = useTheme()
+
 const isShow = ref(true);
 const transform = ref(null);
 
 // 计算属性
 const getCardStyle = computed(() => {
   const style = { background: 'transparent' };
-  // return !props.iconClass && !props.headerName ? style : collapseCardBackgroundStyle;
-  return !props.iconClass && !props.headerName ? style : {};
+  return !props.iconClass && !props.headerName ? style : collapseCardBackgroundStyle;
 });
 
 const iconStyle = computed(() => {
diff --git a/vue3/packages/common/hooks/index.ts b/vue3/packages/common/hooks/index.ts
index ef88d34b..87648b0e 100644
--- a/vue3/packages/common/hooks/index.ts
+++ b/vue3/packages/common/hooks/index.ts
@@ -1,3 +1,5 @@
 export * from './useLocale'
 export * from './useMapGetter'
 export * from './useVmProps'
+export * from './useTheme'
+
diff --git a/vue3/packages/common/hooks/useTheme.ts b/vue3/packages/common/hooks/useTheme.ts
new file mode 100644
index 00000000..1ae2692b
--- /dev/null
+++ b/vue3/packages/common/hooks/useTheme.ts
@@ -0,0 +1,208 @@
+import type { ThemeProps } from '@supermapgis/common/utils'
+import type { ThemeStyleParams } from 'vue-iclient-core/utils/style/color/serialColors';
+import { ref, computed, reactive, watch, toRefs, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import globalEvent from 'vue-iclient-core/utils/global-event';
+import { getDerivedColorsByTextColor } from 'vue-iclient-core/utils/util';
+import { getPrimarySerialColors, getRootStyleSelector } from 'vue-iclient-core/utils/style/color/serialColors';
+import { themeProps } from '@supermapgis/common/utils'
+
+interface ThemeData {
+  backgroundData: string
+  textColorsData: string
+  collapseCardBackgroundData: string
+  collapseCardHeaderBgData: string
+  subComponentSpanBgData: string
+  tablePopupBgData: string
+  colorGroupsData: string[]
+}
+
+export function useTheme(themeStyleName: string[] = []) {
+  const componentInstance = getCurrentInstance()
+  const props = componentInstance.props as unknown as ThemeProps
+
+  const themeData = reactive<ThemeData>({
+    backgroundData: '',
+    textColorsData: '',
+    collapseCardBackgroundData: '',
+    collapseCardHeaderBgData: '',
+    subComponentSpanBgData: '',
+    tablePopupBgData: '',
+    colorGroupsData: []
+  })
+  // 对接 TimeLine 和 TimeRange 会用到
+  const themeStyleMap = ref<Record<string, string>>({})
+
+  const getBackgroundStyle = computed(() => ({
+    background: themeData.backgroundData
+  }))
+
+  const collapseCardBackgroundStyle = computed(() => ({
+    background: themeData.collapseCardBackgroundData
+  }))
+
+  const collapseCardBackgroundLightStyle = computed(() => ({
+    background: getPrimarySerialColors({ colorGroup: [themeData.collapseCardBackgroundData] })[2]
+  }))
+
+  const collapseCardHeaderBgStyle = computed(() => ({
+    background: themeData.collapseCardHeaderBgData
+  }))
+
+  const subComponentSpanBgStyle = computed(() => ({
+    background: themeData.subComponentSpanBgData
+  }))
+
+  const tablePopupBgStyle = computed(() => ({
+    background: themeData.tablePopupBgData
+  }))
+
+  const getTextColorStyle = computed(() => ({
+    color: themeData.textColorsData
+  }))
+
+  const headingTextColorStyle = computed(() => ({
+    color: getDerivedColorsByTextColor(themeData.textColorsData, 0.85)
+  }))
+
+  const secondaryTextColorStyle = computed(() => ({
+    color: getDerivedColorsByTextColor(themeData.textColorsData, 0.45)
+  }))
+
+  const disabledTextColorStyle = computed(() => ({
+    color: getDerivedColorsByTextColor(themeData.textColorsData, 0.25)
+  }))
+
+  const getBackground = computed(() => themeData.backgroundData)
+
+  const getTextColor = computed(() => themeData.textColorsData)
+
+  const getColorStyle = computed(() => {
+    return (index: number) => ({
+      color: themeData.colorGroupsData[index]
+    })
+  })
+
+  const getColor = computed(() => {
+    return (index: number) => themeData.colorGroupsData[index]
+  })
+
+  const changeThemeCallback = ({ themeStyle }: { themeStyle: ThemeStyleParams }) => {
+    setDataRelatedProps(themeStyle, true)
+    if ('background' in themeStyle) {
+      setDataRelatedWithBackgound('', themeStyle)
+    }
+    initNeedTheme(themeStyle)
+  }
+
+  const initThemeData = () => {
+    setDataRelatedProps()
+    setDataRelatedWithBackgound(props.background)
+  }
+
+  const initNeedTheme = (themeStyle: ThemeStyleParams) => {
+    themeStyleMap.value = themeStyleName.reduce((list, name) => {
+      if (name === 'primaryColor') {
+        list[name] = themeStyle.colorGroup?.[0]
+      } else {
+        list[name] = getRealColor(name, themeStyle)
+      }
+      return list;
+    }, {} as Record<string, string>);
+  }
+
+  const registerPropListener = () => {
+    const propNames = getSelfProps()
+    propNames.forEach((prop: string) => {
+      watch(() => props[prop], (next: string) => {
+        const dataName: string = getDataNameOfProp(prop)
+        themeData[dataName] = next || getRealColor(prop)
+        if (prop === 'background') {
+          setDataRelatedWithBackgound(next)
+        }
+      })
+    })
+  }
+
+  const setDataRelatedProps = (themeStyle?: ThemeStyleParams, themePriority?: boolean) => {
+    const themeStyleData = themeStyle || globalEvent.theme || {}
+    const propNames = getSelfProps()
+    propNames.forEach((prop: string) => {
+      if (prop in themeStyleData) {
+        const dataName: string = getDataNameOfProp(prop)
+        const propValue = themePriority ? '' : props[prop]
+        themeData[dataName] = propValue || getRealColor(prop, themeStyle)
+      }
+    })
+  }
+
+  const setDataRelatedWithBackgound = (background?: string, themeStyle?: ThemeStyleParams) => {
+    themeData.collapseCardHeaderBgData = background || getRealColor('collapseCardHeaderBg', themeStyle)
+    themeData.subComponentSpanBgData = background || getRealColor('subComponentSpanBg', themeStyle)
+    themeData.collapseCardBackgroundData =
+      background || getRealColor('collapseCardBackground', themeStyle)
+    themeData.tablePopupBgData = background || getRealColor('messageBackground', themeStyle)
+  }
+
+  const getSelfProps = () => {
+    return Object.keys(themeProps())
+  }
+
+  const getRealColor = (prop: string, acceptThemeStyle?: ThemeStyleParams) => {
+    const themeStyle = (acceptThemeStyle || globalEvent.theme) as unknown as ThemeStyleParams
+    if (prop === 'colorGroup' || !themeStyle?.[prop]?.includes('var')) {
+      return themeStyle?.[prop]
+    }
+    const rootStyleSelector = getRootStyleSelector(themeStyle)
+    const computedStyle = window.getComputedStyle(document.querySelector(rootStyleSelector))
+    const themeColor = themeStyle[prop].replace(/var\((.+)\)/g, '$1')
+    const colorValue = computedStyle.getPropertyValue(themeColor)
+    return colorValue.trim()
+  }
+
+  const getDataNameOfProp = (prop: string) => {
+    switch (prop) {
+      case 'textColor':
+        return 'textColorsData'
+      case 'colorGroup':
+        return 'colorGroupsData'
+      default:
+        return `${prop}Data`
+    }
+  }
+
+  onBeforeMount(() => {
+    initThemeData()
+    registerPropListener()
+  })
+
+  onMounted(() => {
+    globalEvent.on({
+      'change-theme': changeThemeCallback
+    })
+  })
+
+  onBeforeUnmount(() => {
+    globalEvent.un({
+      'change-theme': changeThemeCallback
+    })
+  })
+
+  return {
+    ...toRefs(themeData),
+    themeStyleMap,
+    getBackgroundStyle,
+    collapseCardBackgroundStyle,
+    collapseCardBackgroundLightStyle,
+    collapseCardHeaderBgStyle,
+    subComponentSpanBgStyle,
+    tablePopupBgStyle,
+    getTextColorStyle,
+    headingTextColorStyle,
+    secondaryTextColorStyle,
+    disabledTextColorStyle,
+    getBackground,
+    getTextColor,
+    getColorStyle,
+    getColor
+  }
+}
diff --git a/vue3/packages/common/utils/index.common.ts b/vue3/packages/common/utils/index.common.ts
index 0bb8b69f..ac22f25f 100644
--- a/vue3/packages/common/utils/index.common.ts
+++ b/vue3/packages/common/utils/index.common.ts
@@ -1 +1,3 @@
 export * from './install'
+export * from './theme-props'
+export * from './vue-types'
diff --git a/vue3/packages/common/utils/theme-props.ts b/vue3/packages/common/utils/theme-props.ts
new file mode 100644
index 00000000..3dcfae60
--- /dev/null
+++ b/vue3/packages/common/utils/theme-props.ts
@@ -0,0 +1,14 @@
+export const themeProps = () => ({
+  background: String,
+  textColor: String,
+  colorGroup: Array as PropType<Array<string>>
+})
+
+// export type ThemeProps = Partial<ExtractPropTypes<ReturnType<typeof themeProps>>>
+export type ThemeProps = {
+  background?: string
+  textColor?: string
+  colorGroup?: string[]
+}
+
+export default themeProps
diff --git a/vue3/packages/common/utils/vue-types.ts b/vue3/packages/common/utils/vue-types.ts
index 970bae6c..a6ef58e6 100644
--- a/vue3/packages/common/utils/vue-types.ts
+++ b/vue3/packages/common/utils/vue-types.ts
@@ -17,8 +17,11 @@ export type ShortEmits<T extends Record<string, any>> = UnionToIntersection<
     [K in keyof T]: (evt: K, ...args: T[K]) => void
   }>
 >
+
+type NativeTypeConstructor = StringConstructor | ObjectConstructor | BooleanConstructor | NumberConstructor | ArrayConstructor
+
 type PropsDef = {
-  [K: string]: StringConstructor | ObjectConstructor | BooleanConstructor | NumberConstructor | { type: any; default?: NativeType }
+  [K: string]: { type: any; default?: NativeType } | NativeTypeConstructor
 }
 export function getPropsDefaults<T>(props: PropsDef) {
   return Object.entries(props).reduce(
diff --git a/vue3/packages/mapboxgl/components/layer-list/demo/Demo.vue b/vue3/packages/mapboxgl/components/layer-list/demo/Demo.vue
index d3c92d70..585a18ca 100644
--- a/vue3/packages/mapboxgl/components/layer-list/demo/Demo.vue
+++ b/vue3/packages/mapboxgl/components/layer-list/demo/Demo.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import WebMap from '../../web-map/webmap.vue'
+import WebMap from '@supermapgis/vue-iclient-mapboxgl/web-map/webmap.vue'
 import LayerList from '../layerList.vue'
+import { Button } from 'ant-design-vue';
+import { ref } from 'vue'
 import '../style'
+
+const position = ref('top-left')
+const mapTarget = ref(null)
+
+
+const changePosition = (pos: string) => {
+  position.value = pos;
+}
+const changeMapTarget = () => {
+  mapTarget.value = mapTarget.value === 'map1' ? 'map' : 'map1';
+}
 </script>
 <template>
-  <div>
-    <WebMap server-url="https://www.supermapol.com/" :map-id="505367620" style="height:700px">
-      <LayerList v-bind="$attrs"></LayerList>
+  <div> 
+    <div><Button @click="changePosition('top-right')">切换位置</Button></div>
+    <div><Button @click="changeMapTarget">切换绑定地图</Button></div>
+    <WebMap serverUrl="http://172.16.14.44:8190/iportal" :map-id="1641486307" target="map1">
+      <LayerList :position="position" :map-target="mapTarget" headerName="tuceng"></LayerList>
     </WebMap>
   </div>
 </template>
 <style>
-#map {
-  width: 100%;
-  height: 900px;
-}
 </style>
diff --git a/vue3/packages/mapboxgl/components/layer-list/layerGroup.vue b/vue3/packages/mapboxgl/components/layer-list/layerGroup.vue
index 94bf3a9a..27dd2866 100644
--- a/vue3/packages/mapboxgl/components/layer-list/layerGroup.vue
+++ b/vue3/packages/mapboxgl/components/layer-list/layerGroup.vue
@@ -13,18 +13,18 @@
             <span class="add-ellipsis">{{ item.title }}</span>
             <div :class="['icon-buttons', showIconsItem === item.id ? 'icon-buttons-visible' : 'icon-buttons-hidden']">
               <div v-if="operations.fitBounds" class="sm-component-layer-list__zoom">
-                <FullscreenOutlined
+                <i
                   :class="['sm-components-icon-suofangzhituceng', (item.visible || !item.disabled) && 'highlight-icon']"
                   :style="!item.visible && { cursor: 'not-allowed' }" :title="t('layerList.zoomToLayer')"
                   @click.stop="item.visible && zoomToBounds(item)" />
               </div>
               <div v-if="(item && item.type) !== 'group' && attributesEnabled(item)"
                 class="sm-component-layer-list__attributes">
-                <FullscreenOutlined :class="attributesIconClass" :style="!item.visible && { cursor: 'not-allowed' }"
+                <i :class="attributesIconClass" :style="!item.visible && { cursor: 'not-allowed' }"
                   title="layerList.attributes" @click.stop="item.visible && toggleAttributesVisibility($event, item)" />
               </div>
               <div v-if="operations.opacity && (item && item.type) !== 'group'" class="sm-component-layer-list__style">
-                <FullscreenOutlined :class="[
+                <i :class="[
                   'sm-components-icon-tucengyangshi01',
                   'sm-components-icon-not-active',
                   showOpacityItem === item.id && 'sm-components-icon-active'
@@ -32,14 +32,10 @@
                   @click.stop="item.visible && changeItemOpacity(item)" />
               </div>
               <div>
-                <!-- <i
+                <i
                   :class="item.visible ? 'sm-components-icon-visible' : 'sm-components-icon-hidden'"
                   @click.stop="toggleItemVisibility(item)"
-                /> -->
-                <EyeOutlined v-if="item.visible" class="sm-components-icon-visible"
-                  @click.stop="toggleItemVisibility(item)" />
-                <EyeInvisibleOutlined v-else class="sm-components-icon-hidden"
-                  @click.stop="toggleItemVisibility(item)" />
+                />
               </div>
             </div>
           </div>
@@ -58,7 +54,6 @@
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
 import { Tree as ATree, Slider as ASlider } from 'ant-design-vue';
-import { DownOutlined, FullscreenOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 import { useLocale } from '@supermapgis/common/hooks';
 
 const { t } = useLocale()
diff --git a/vue3/packages/mapboxgl/components/layer-list/layerList.ts b/vue3/packages/mapboxgl/components/layer-list/layerList.ts
index 8dd38efd..d8bc313d 100644
--- a/vue3/packages/mapboxgl/components/layer-list/layerList.ts
+++ b/vue3/packages/mapboxgl/components/layer-list/layerList.ts
@@ -1,5 +1,5 @@
 import type { PropType, CSSProperties } from 'vue'
-import type { ShortEmits } from '@supermapgis/common/utils/vue-types'
+import type { ShortEmits, ThemeProps } from '@supermapgis/common/utils'
 import type { ControlPosition } from 'vue-iclient-core/controllers/mapboxgl/utils/MapControl'
 import type {
   PaginationParams,
@@ -10,7 +10,7 @@ import type {
   ToolbarParams
 } from '@supermapgis/vue-iclient-mapboxgl/attributes/attributes.vue'
 import type { CardProps, ControlProps } from '@supermapgis/mapboxgl/utils'
-import { getPropsDefaults } from '@supermapgis/common/utils/vue-types'
+import { getPropsDefaults, themeProps } from '@supermapgis/common/utils'
 import { cardProps, controlProps } from '@supermapgis/mapboxgl/utils'
 
 export interface AttributesParams {
@@ -90,13 +90,13 @@ export const layerListProps = () => ({
 })
 
 // export type LayerListProps = Partial<ExtractPropTypes<ReturnType<typeof layerListProps>>>
-export interface LayerListProps extends CardProps, ControlProps {
+export interface LayerListProps extends CardProps, ControlProps, ThemeProps {
   attributes?: AttributesParams
   operations?: Operations
 }
 
 export const layerListPropsDefault = getPropsDefaults<LayerListProps>(
-  Object.assign(cardProps(), controlProps(), layerListProps())
+  Object.assign(cardProps(), controlProps(), themeProps(), layerListProps())
 )
 
 export type layerListEmitsMap = {
diff --git a/vue3/packages/mapboxgl/components/layer-list/layerList.vue b/vue3/packages/mapboxgl/components/layer-list/layerList.vue
index 5c3d5059..5ce77288 100644
--- a/vue3/packages/mapboxgl/components/layer-list/layerList.vue
+++ b/vue3/packages/mapboxgl/components/layer-list/layerList.vue
@@ -6,10 +6,12 @@
     :auto-rotate="autoRotate"
     :collapsed="collapsed"
     :split-line="splitLine"
+    :background="background"
+    :textColor="textColor"
     ref="root-el"
     class="sm-component-layer-list"
   >
-    <a-card class="sm-component-layer-list__a-card" :bordered="false" style="">
+    <a-card class="sm-component-layer-list__a-card" :bordered="false" :style="headingTextColorStyle">
       <div class="sm-component-layer-list__content">
         <layer-group
           :currentOpacity="currentOpacity"
@@ -36,9 +38,6 @@
 </template>
 
 <script lang="ts" setup>
-// import Theme from 'vue-iclient/src/common/_mixin/Theme';
-// import Control from 'vue-iclient/src/mapboxgl/_mixin/control';
-// import BaseCard from 'vue-iclient/src/common/_mixin/Card';
 import type { Map } from 'mapbox-gl'
 import type {
   LayerListProps,
@@ -56,7 +55,7 @@ import {
   useTemplateRef,
   onBeforeMount
 } from 'vue'
-import { useMapGetter, useLocale } from '@supermapgis/common/hooks'
+import { useMapGetter, useLocale, useTheme } from '@supermapgis/common/hooks'
 import { useMapControl } from '@supermapgis/mapboxgl/hooks'
 import { Card as ACard } from 'ant-design-vue'
 import SmAttributes from '@supermapgis/vue-iclient-mapboxgl/attributes/attributes.vue'
@@ -89,6 +88,12 @@ const props = withDefaults(defineProps<LayerListProps>(), layerListPropsDefault)
 
 defineEmits(['loaded']) as unknown as LayerListEmits
 
+let viewModel: InstanceType<typeof LayerListViewModel>
+const { getTargetName, setViewModel } = useMapGetter<Map>({ loaded, removed })
+const { isShow, parentIsWebMapOrMap } = useMapControl()
+const { t } = useLocale()
+const { headingTextColorStyle } = useTheme()
+
 const sourceList = ref([])
 const attributesProps = ref<AttributesParams>({})
 const displayAttributes = ref(false)
@@ -96,10 +101,6 @@ const currentOpacity = ref(0)
 const attributesEl = useTemplateRef<HTMLElement>('attributes-el')
 const rootEl = useTemplateRef<HTMLElement>('root-el')
 
-let viewModel: InstanceType<typeof LayerListViewModel>
-const { getTargetName, setViewModel } = useMapGetter<Map>({ loaded, removed })
-const { isShow, parentIsWebMapOrMap } = useMapControl()
-const { t } = useLocale()
 
 // Computed
 const attributesStyle = computed(() => {
diff --git a/vue3/packages/mapboxgl/components/layer-list/style/index.ts b/vue3/packages/mapboxgl/components/layer-list/style/index.ts
index 983e34c0..73502f15 100644
--- a/vue3/packages/mapboxgl/components/layer-list/style/index.ts
+++ b/vue3/packages/mapboxgl/components/layer-list/style/index.ts
@@ -1,3 +1 @@
-import '@supermapgis/mapboxgl/theme-chalk/base.scss'
 import '@supermapgis/mapboxgl/theme-chalk/layerList.scss'
-import '@supermapgis/common/theme-chalk/collapseCard.scss'
diff --git a/vue3/packages/mapboxgl/components/web-map/demo/Demo.vue b/vue3/packages/mapboxgl/components/web-map/demo/Demo.vue
index 3ae290e5..44049e1d 100644
--- a/vue3/packages/mapboxgl/components/web-map/demo/Demo.vue
+++ b/vue3/packages/mapboxgl/components/web-map/demo/Demo.vue
@@ -14,13 +14,23 @@ const handleMousedown = (params: Record<string, any>) => {
 </script>
 <template>
   <div>
-    <Button @click="changeMapId(1641486307)">切换地图</Button>
-    <WebMap serverUrl="http://172.16.14.44:8190/iportal" :map-id="mapId" @mousedown="handleMousedown"></WebMap>
+    <div><Button @click="changeMapId(1641486307)">切换地图</Button></div>
+    <WebMap serverUrl="http://172.16.14.44:8190/iportal" :map-id="mapId" target="map" @mousedown="handleMousedown"></WebMap>
   </div>
 </template>
 <style>
-#map {
-  width: 100%;
+#map, #map1 {
+  position: absolute;
+  top: 80px;
+  width: 48%;
   height: 900px;
+  margin-top: 300px;
+}
+#map {
+  margin-right: 20px;
+  left: 0;
+}
+#map1 {
+  right: 0;
 }
 </style>
diff --git a/vue3/packages/mapboxgl/theme-chalk/base.scss b/vue3/packages/mapboxgl/theme-chalk/base.scss
index f934766c..51fd6e65 100644
--- a/vue3/packages/mapboxgl/theme-chalk/base.scss
+++ b/vue3/packages/mapboxgl/theme-chalk/base.scss
@@ -1,5 +1,3 @@
-// @use '../../common/theme-chalk/base/theme.scss';
-// @use '../../../../core/assets/iconfont/icon-sm-components.css';
 @use '@supermapgis/common/theme-chalk/mixins/mixins' as * ;
 @use '@supermapgis/common/theme-chalk/base/theme.scss';
 @use 'vue-iclient-core/assets/iconfont/icon-sm-components.css';
\ No newline at end of file
diff --git a/vue3/packages/mapboxgl/theme-chalk/layerList.scss b/vue3/packages/mapboxgl/theme-chalk/layerList.scss
index 0e572fda..4e932856 100644
--- a/vue3/packages/mapboxgl/theme-chalk/layerList.scss
+++ b/vue3/packages/mapboxgl/theme-chalk/layerList.scss
@@ -1,2 +1,2 @@
-@use '../../common/theme-chalk/mixins/mixins.scss' as *;
-@use '../../common/theme-chalk/base/theme.scss' as *;
+@use './base.scss';
+@use '@supermapgis/common/theme-chalk/collapseCard.scss'
diff --git a/vue3/site/src/App.vue b/vue3/site/src/App.vue
index 580072d5..1b07d19f 100644
--- a/vue3/site/src/App.vue
+++ b/vue3/site/src/App.vue
@@ -1,12 +1,56 @@
 <script setup>
-import { WebMapDemo, AttributesDemo } from './register-components'
+import { WebMapDemo, AttributesDemo, LayerListDemo } from './register-components'
+import { setTheme } from 'vue-iclient-core/utils/style/theme/set-theme'
+import { ref } from 'vue'
+import { Button } from 'ant-design-vue'
+
+const theme = ref('light')
+setTheme(theme)
+
+const changeStyle = () => {
+  setTheme('dark')
+}
+const changeStyle1 = () => {
+  setTheme('light')
+}
+const changeStyle2 = () => {
+  let transparent = {
+    style: 'light',
+    textColor: '#000',
+    background: 'transparent',
+    componentBackground: 'pink',
+    collapseCardHeaderBg: 'red',
+    collapseCardBackground: 'green',
+    hoverColor: 'blue',
+    clickColor: 'grey',
+    selectedColor: 'black'
+  }
+  setTheme(transparent)
+}
+const changeStyle3 = () => {
+  setTheme('warmGray')
+}
 </script>
 
 <template>
   <Fragement>
+    <div class="changeTheme">
+      <Button @click="changeStyle">深色主题</Button>
+      <Button @click="changeStyle1">浅色主题</Button>
+      <Button @click="changeStyle3">暖灰色主题</Button>
+      <Button @click="changeStyle2">透明主题</Button>
+    </div>
     <WebMapDemo server-url="http://172.16.14.44:8190/iportal" :map-id="692091022"></WebMapDemo>
     <AttributesDemo></AttributesDemo>
+    <LayerListDemo></LayerListDemo>
   </Fragement>
 </template>
 
-<style scoped></style>
+<style scoped>
+.changeTheme {
+  position: absolute;
+  left: 50%;
+  transform: translate(-100px);
+  z-index: 100;
+}
+</style>
diff --git a/vue3/site/vite.config.js b/vue3/site/vite.config.js
index c0074e78..6e97e15e 100644
--- a/vue3/site/vite.config.js
+++ b/vue3/site/vite.config.js
@@ -12,18 +12,21 @@ export default defineConfig({
   plugins: [vue(), vueDevTools()],
   resolve: {
     alias: {
-      '@supermapgis/mapboxgl': fileURLToPath(
-        new URL('../packages/mapboxgl', import.meta.url)
-      ),
-      '@supermapgis/common': fileURLToPath(
-        new URL('../packages/common', import.meta.url)
-      ),
-      'vue-iclient-core': fileURLToPath(
-        new URL('../../core', import.meta.url)
-      )
+      '@supermapgis/mapboxgl': fileURLToPath(new URL('../packages/mapboxgl', import.meta.url)),
+      '@supermapgis/common': fileURLToPath(new URL('../packages/common', import.meta.url)),
+      'vue-iclient-core': fileURLToPath(new URL('../../core', import.meta.url))
       // node_modules: fileURLToPath(new URL('../node_modules', import.meta.url))
     }
   },
+  server: {
+    fs: {
+      allow: [
+        // 添加包含字体文件的目录
+        fileURLToPath(new URL('../../core/assets/iconfont', import.meta.url)),
+        fileURLToPath(new URL('../', import.meta.url)),
+      ]
+    }
+  },
   css: {
     preprocessorOptions: {
       scss: {