@fesjs/fes-design/es/_theme/useTheme.js

fes-design for PC

import { ref, watch } from 'vue';
import { createSharedComposable } from '@vueuse/core';
import { useConfig } from '../config-provider';
import { applyTheme } from './applyTheme';
import { baseTheme } from './base';

function _useTheme() {
  // TODO: theme 和当前组件 config provider 的 getContainer 关联，目前只有第一个调用 useTheme 的组件生效
  const config = useConfig();
  const themeVars = ref(baseTheme());
  watch([() => {
    var _config$getContainer;
    return (_config$getContainer = config.getContainer) === null || _config$getContainer === void 0 ? void 0 : _config$getContainer.value;
  }, () => {
    var _config$theme;
    return (_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.value;
  }, () => {
    var _config$themeOverride;
    return (_config$themeOverride = config.themeOverrides) === null || _config$themeOverride === void 0 ? void 0 : _config$themeOverride.value;
  }], _ref => {
    let [getContainer, theme, themeOverrides] = _ref;
    if (!getContainer) {
      return;
    }
    const {
      themeVars: currentThemeVars
    } = applyTheme(getContainer(), theme, themeOverrides);
    themeVars.value = currentThemeVars;
  }, {
    immediate: true
  });
  return {
    config,
    themeVars
  };
}
const useTheme = createSharedComposable(_useTheme);

export { useTheme };