@dayu-sec/bizcom-theme

DySec 业务系统的主题包，提供 Ant Design 配置、语义化主题 token 和 CSS 变量。

安装

pnpm add @dayu-sec/bizcom-theme

应用根配置

同一个 mode 同时驱动 Ant Design 和业务样式。useDySecCssVariableScope 将 CSS 变量挂载到应用根 class 对应的受控 stylesheet；主题切换和微应用卸载时会自动替换和清理，不要使用 React 的 style 属性写入变量。

命名约定：主应用使用 dy-sec-container-theme-scope，微应用使用 dy-sec-microapp-theme-scope。

import { useMemo, useState } from 'react';
import { ConfigProvider, theme } from 'antd';
import { type DySecThemeMode, getDySecAntdTheme, useDySecCssVariableScope } from '@dayu-sec/bizcom-theme';

export function App() {
  const [mode] = useState<DySecThemeMode>('light');
  const antdTheme = useMemo(() => getDySecAntdTheme(mode), [mode]);
  useDySecCssVariableScope({
    selector: '.dy-sec-microapp-theme-scope',
    theme: mode,
  });

  return (
    <ConfigProvider
      theme={{
        algorithm: mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
        ...antdTheme,
      }}
    >
      <main className="dy-sec-microapp-theme-scope">...</main>
    </ConfigProvider>
  );
}

业务样式

在业务 CSS 或 CSS Modules 中使用语义变量：

.panel {
  background: var(--dy-sec-bg-panel);
  border: 1px solid var(--dy-sec-border-subtle);
  color: var(--dy-sec-text-primary);
}