@hootool/x-theme

通用 React 多主题与 CSS Variables（与具体 token 来源解耦；API 对齐 MUI 的 palette / augmentation 思路，类型命名加 Brand 前缀避免与 MUI Theme 冲突）。

Usage

pnpm install @hootool/x-theme

import React from 'react';
import {
  BrandThemeProvider,
  createBrandTheme,
  useBrandTheme,
} from '@hootool/x-theme';

const brandTheme = createBrandTheme({
  name: 'brand',
  mode: 'dark',
  palette: {
    background: { c0: '#0e0d1f' },
    text: { c5: '#ffffff' },
  },
  cssVariables: { cssVarPrefix: 'app' },
});

function App() {
  const theme = useBrandTheme();
  return (
    <div style={{ color: theme.getCssVar('palette.text.c5', '#ffffff') }} />
  );
}

export default () => (
  <BrandThemeProvider theme={brandTheme}>
    <App />
  </BrandThemeProvider>
);

业务方自行准备 palette / layout（任意嵌套 TokenMap）后传入即可。完整说明见 src/index.md；TypeScript module augmentation 示例见 src/types.ts。

Development

pnpm install
pnpm start
pnpm run build

LICENSE

MIT