antd-pixel-theme

为 Ant Design 6 提供 Fusion Pixel Font 像素风主题预设。默认预设使用 Fusion Pixel 原生 12px UI 字号，视觉密度接近 Ant Design 默认的 14px。

English

[!WARNING] 当前仅支持英文（Latin）和简体中文。 本包仅内置 Fusion Pixel Font 的 Latin 与 zh_hans 字体子集；日语、韩语、繁体中文及其他所有语言均会使用系统字体回退栈。

安装

npm install antd-pixel-theme

快速开始

在应用入口引入一次样式表，然后将主题预设传给 Ant Design 的 ConfigProvider：

import { App, ConfigProvider } from 'antd';
import { pixelTheme } from 'antd-pixel-theme';
import 'antd-pixel-theme/style.css';

export default function Root() {
  return (
    <ConfigProvider theme={pixelTheme}>
      <App>
        <YourApp />
      </App>
    </ConfigProvider>
  );
}

主题

| 主题 | UI 字号 | 颜色模式 | | --- | ---: | --- | | pixelTheme | 12px 原生默认 | 浅色 | | pixelDarkTheme | 12px 原生默认 | 深色 |

import { pixelDarkTheme, pixelTheme } from 'antd-pixel-theme';

<ConfigProvider theme={pixelTheme}>{/* 浅色 */}</ConfigProvider>
<ConfigProvider theme={pixelDarkTheme}>{/* 深色 */}</ConfigProvider>

自定义字号

import { createPixelTheme } from 'antd-pixel-theme';

const sixteenPxLight = createPixelTheme(16);
const eighteenPxDark = createPixelTheme(18, true);

createPixelTheme(fontSize?, dark?) 默认值为 12 和 false。非 12px 字号在非整数设备像素比下可能出现模糊，请在目标浏览器中验证。

API

| 导出 | 说明 | | --- | --- | | pixelTheme | 原生 12px 浅色 ThemeConfig 预设。 | | pixelDarkTheme | 原生 12px 深色 ThemeConfig 预设。 | | createPixelTheme(fontSize?, dark?) | 创建 ThemeConfig；默认值为 12 和 false。 | | pixelAlgorithm | Ant Design MappingAlgorithm，强制零圆角和 2px 实线边框。 | | pixelFontFamily | Fusion Pixel 字体栈，包含系统字体回退。 | | PixelFontSize | TypeScript 类型别名，表示 createPixelTheme 接受的数值 UI 字号。 |

CSS 引入

• antd-pixel-theme/style.css — 字体声明 + Tooltip/Slider 浮层像素几何样式（推荐）
• antd-pixel-theme/pixel-font.css — 仅字体声明

Demo

https://rosapr.github.io/antd-pixel-theme/

许可

MIT。内置 Fusion Pixel Font 字体资源采用 SIL Open Font License 1.1。