Ant Design 暗黑主题教程

戚展焰Beatrix

于 2024-09-03 07:09:05 发布

阅读量522

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00590/article/details/141836202

版权

Ant Design 暗黑主题教程

ant-design-dark-themeDark theme variables of Ant Design项目地址:https://gitcode.com/gh_mirrors/ant/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 应用中，使用 ConfigProvider 来启用暗黑主题。以下是一个简单的示例：

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;