Ant Design 暗色主题教程

最新推荐文章于 2025-03-20 18:44:22 发布

苏承根

最新推荐文章于 2025-03-20 18:44:22 发布

阅读量1.2k

点赞数 20

本文链接：https://blog.csdn.net/gitblog_00708/article/details/140972860

版权

Ant Design 暗色主题教程

项目地址:https://gitcode.com/gh_mirrors/an/ant-design-dark-theme

项目介绍

Ant Design 是一个广泛使用的企业级 UI 设计语言和 React UI 库。Ant Design 暗色主题（Ant Design Dark Theme）是 Ant Design 官方提供的一个主题包，允许开发者轻松地将应用的外观切换为暗色模式，以提升用户体验。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Ant Design：

npm install antd

引入暗色主题

在你的 React 项目中，引入暗色主题并应用它。以下是一个简单的示例：

import React, { useState } from 'react';
import { ConfigProvider, Button, Card } from 'antd';
import { theme } from 'antd';

const { defaultAlgorithm, darkAlgorithm } = theme;

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleClick = () => {
    setIsDarkMode((previousValue) => !previousValue);
  };

  return (
    <ConfigProvider theme={{ algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm }}>
      <Card style={{ width: 'max-content' }}>
        <Button onClick={handleClick}>
          Change Theme to {isDarkMode ? 'Light' : 'Dark'}
        </Button>
      </Card>
    </ConfigProvider>
  );
}

export default App;