antd-pixel-theme

Fusion Pixel Font theme presets for Ant Design 6. The default preset uses Fusion Pixel's native 12px UI size, which is close to Ant Design's familiar 14px density.

简体中文

Warning

Language support is limited to English (Latin) and Simplified Chinese. The package ships only Latin and zh_hans Fusion Pixel Font subsets. Japanese, Korean, Traditional Chinese, and every other language use the system-font fallback stack.

Installation

npm install antd-pixel-theme

Quick start

Import the stylesheet once at the application entry point, then pass the preset to Ant Design's 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>
  );
}

Themes

Theme	UI font size	Color mode
pixelTheme	12px native default	Light
pixelDarkTheme	12px native default	Dark

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

<ConfigProvider theme={pixelTheme}>{/* light */}</ConfigProvider>
<ConfigProvider theme={pixelDarkTheme}>{/* dark */}</ConfigProvider>

Custom font size

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

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

createPixelTheme(fontSize?, dark?) defaults to 12 and false. Non-12px sizes may render blurry on non-integer device-pixel ratios; validate on your target browsers.

API

Export	Description
pixelTheme	Native-12px light ThemeConfig preset.
pixelDarkTheme	Native-12px dark ThemeConfig preset.
createPixelTheme(fontSize?, dark?)	Creates a ThemeConfig; defaults to 12 and false.
pixelAlgorithm	Ant Design MappingAlgorithm that forces zero border radii and 2px solid borders.
pixelFontFamily	The Fusion Pixel font-family stack, including system fallbacks.
PixelFontSize	TypeScript type alias for the numeric UI font size.

CSS imports

• antd-pixel-theme/style.css — font faces + pixel Tooltip/Slider geometry (recommended)
• antd-pixel-theme/pixel-font.css — font faces only

Demo

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

License

MIT. Bundled Fusion Pixel Font assets are licensed under the SIL Open Font License 1.1.