antdTheme.dark.App.js

import { Button, ConfigProvider, Space, Select, theme } from 'antd';

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
  { value: 'disabled', label: 'Disabled', disabled: true },
];

function App() {
  return (
    <div style={{ background: 'black', height: 'calc(100vh - 40px)', padding: '20px' }}>
      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
        <Space direction="vertical">
          <Space wrap>
            <Button type="primary">Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
          </Space>
          <Space wrap>
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              options={options}
            />
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              disabled
              options={options}
            />
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              loading
              options={options}
            />
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              allowClear
              options={options}
            />
          </Space>
        </Space>
      </ConfigProvider>
    </div>
  );
}

export default App;