可视化 Ant Design Token

view-antd-token.tsx

import { Typography, List, theme } from "antd";
import { FastColor } from "@ant-design/fast-color";
import { createGlobalStyle, ThemeProvider, type ThemeMode } from "antd-style";
import { NuqsAdapter } from "nuqs/adapters/react";
import type { PropsWithChildren } from "react";
import { parseAsStringEnum, useQueryState } from "nuqs";

export const setupInstructions = `
  # Create a new directory for your project
  mkdir hi-antd-token && cd hi-antd-token
  # Create a new React project
  npm create vite@latest . --template react-ts
  # Install dependencies
  npm install antd antd-style @ant-design/fast-color nuqs
`;

const Demo = () => {
  const { token } = theme.useToken();

  const color = {
    text: token.colorText,
    background: token.colorBgContainer,
    error: token.colorError,
    primary: token.colorPrimary,
    success: token.colorSuccess,
    warning: token.colorWarning,
    info: token.colorInfo,
    link: token.colorLink,
    border: token.colorBorder,
    borderSecondary: token.colorBorderSecondary,
  } as const;

  const hexColor = Object.entries(color).reduce((acc, [key, value]) => {
    acc[key] = new FastColor(value).toHexString();
    return acc;
  }, {} as Record<string, string>);

  return (
    <List>
      {Object.entries(hexColor).map(([key, value]) => (
        <List.Item key={key}>
          <Typography.Text style={{ color: value }}>
            {key}: {value}
          </Typography.Text>
        </List.Item>
      ))}
    </List>
  );
};

const GlobalStyle = createGlobalStyle`
  body {
    color: ${({ theme }) => theme.colorBgBase};
    background-color: ${({ theme }) => theme.colorBgContainer};
  }
`;

const Theme = ({ children }: PropsWithChildren) => {
  const [themeMode] = useQueryState<ThemeMode>(
    "theme",
    parseAsStringEnum(["auto", "light", "dark"])
      .withDefault("auto")
      .withOptions({
        clearOnDefault: true,
      })
  );

  return (
    <ThemeProvider themeMode={themeMode}>
      <GlobalStyle />
      {children}
    </ThemeProvider>
  );
};

const App = () => {
  return (
    <NuqsAdapter>
      <Theme>
        <Demo />
      </Theme>
    </NuqsAdapter>
  );
};

export default App;

ScreenShot