71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import type { ThemeConfig } from '../context';
|
|
import { defaultConfig } from '../../_theme/internal';
|
|
import type { Ref } from 'vue';
|
|
import { computed } from 'vue';
|
|
import useThemeKey from './useThemeKey';
|
|
import devWarning from '../../vc-util/warning';
|
|
|
|
export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<ThemeConfig>) {
|
|
const themeConfig = computed(() => theme?.value || {});
|
|
const parentThemeConfig = computed<ThemeConfig>(() =>
|
|
themeConfig.value.inherit === false || !parentTheme?.value ? defaultConfig : parentTheme.value,
|
|
);
|
|
|
|
const themeKey = useThemeKey();
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const cssVarEnabled = themeConfig.value.cssVar || parentThemeConfig.value.cssVar;
|
|
const validKey = !!(
|
|
(typeof themeConfig.value.cssVar === 'object' && themeConfig.value.cssVar?.key) ||
|
|
themeKey
|
|
);
|
|
devWarning(
|
|
!cssVarEnabled || validKey,
|
|
'[Ant Design Vue ConfigProvider] Missing key in `cssVar` config. Please set `cssVar.key` manually in each ConfigProvider inside `cssVar` enabled ConfigProvider.',
|
|
);
|
|
}
|
|
|
|
const mergedTheme = computed(() => {
|
|
if (!theme?.value) {
|
|
return parentTheme?.value;
|
|
}
|
|
|
|
// Override
|
|
const mergedComponents = {
|
|
...parentThemeConfig.value.components,
|
|
};
|
|
|
|
Object.keys(theme.value.components || {}).forEach(componentName => {
|
|
mergedComponents[componentName] = {
|
|
...mergedComponents[componentName],
|
|
...theme.value.components![componentName],
|
|
} as any;
|
|
});
|
|
|
|
const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
|
|
const mergedCssVar = (themeConfig.value.cssVar ?? parentThemeConfig.value.cssVar) && {
|
|
prefix: 'ant', // Default to ant
|
|
...(typeof parentThemeConfig.value.cssVar === 'object' ? parentThemeConfig.value.cssVar : {}),
|
|
...(typeof themeConfig.value.cssVar === 'object' ? themeConfig.value.cssVar : {}),
|
|
key:
|
|
(typeof themeConfig.value.cssVar === 'object' && themeConfig.value.cssVar?.key) ||
|
|
cssVarKey,
|
|
};
|
|
|
|
// Base token
|
|
return {
|
|
...parentThemeConfig.value,
|
|
...themeConfig.value,
|
|
|
|
token: {
|
|
...parentThemeConfig.value.token,
|
|
...themeConfig.value.token,
|
|
},
|
|
components: mergedComponents,
|
|
cssVar: mergedCssVar,
|
|
};
|
|
});
|
|
|
|
return mergedTheme;
|
|
}
|