ant-design / ant-design-dark-theme Goto Github PK

View Code? Open in Web Editor NEW

481.0 481.0 33.0 38 KB

🌚 Dark theme variables of Ant Design

Home Page: https://www.antdtheme.com/dark

License: MIT License

JavaScript 45.25% TypeScript 54.75%

ant-design ant-design-pro antd dark-theme less

ant-design-dark-theme's Introduction

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

Performance Stats of ant-design/ant-design - Last 28 days

✨ Features

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or use opensumi.run, a free online pure front-end dev environemt.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Active Contributors of ant-design/ant-design - Last 28 days

Let's build a better antd together.

We welcome all contributions. Please read our Contributing Guide first. You can submit any ideas as Pull Requests or as GitHub Issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request Principle to create a Pull Request with our Pull Request Template.

❤️ Sponsors and Backers

ant-design-dark-theme's People

Contributors

Stargazers

Watchers

ant-design-dark-theme's Issues

Instructions when using with create-react-app and react-app-rewired

I am following the official instructions with create-react-app and have ant integrated.
I currently override them variables using the customize theme info given here
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
using addLessLoader and config-overrides.js

If I follow instructions the usage instructions for dark theme in this case they dont work.
import darkTheme from '@ant-design/dark-theme';

// webpack.config.js: less-loader
{
loader: 'less-loader',
options: {
modifyVars: darkTheme,
},
},

Can you please help.

Problem about circular dependency

I clone antd and try to modify some component

Then, I found antd require antd-pro-merge-less
antd-pro-merge-less require @ant-design/dark-theme, and then @ant-design/dark-theme require antd.

Yeah, When i try to run node ./scripts/generate-color-less in antd, its throw

Error: Cannot find module 'antd/dist/dark-theme'

@ant-design/dark-theme not install antd, because its a devDependency.

How can i fix it?
Thanks for your reply

Is this ready to use?

Hey - the README indicates this is experimental software. Would using it in a project be fine? When will it be okay to use?

Looks great, by the way!

Table 组件hover样式问题

dark theme is overriding my classes

<Wrapper className="onyx-layout">

.onyx-layout { min-height: 100vh; background-color: #000; }

implemented dark-theme using craco

const CracoLessPlugin = require("craco-less");
const darkTheme = require("@ant-design/dark-theme");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: darkTheme,
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

now it is.

Description List Title field text

The CSS for Description list title field needs to be changed for better contrast. It is barely visible with the dark theme.

Thank you.

Usage instructions for Yarn ?

Usage instructions for Yarn / react-app-rewired?

import darkTheme from '@ant-design/dark-theme';

Gives

SyntaxError: Unexpected token import

有些细节不是很到位

重现方式：

访问 https://www.antdtheme.com/
选择黑色主题

问题：

Radio.Button
Menu
Select 弹出层
基础 Hover 效果对比度不够

移动端右上角样式Bug

屏幕尺寸低于768px时, 出现了白色.

[RFC] add index.less

多一种引用方式。

写一个脚本，自动通过 index.ts -> index.less

Buffer报错

(node:8084) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(),
or Buffer.from() methods instead.

config-overrides.js 中直接配置darkTheme无法生效

`const {
override,
fixBabelImports,
addLessLoader,
} = require("customize-cra");

const darkTheme = require("@ant-design/dark-theme");

process.env.GENERATE_SOURCEMAP = "false"; //打包时去除map文件
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true // change importing css to less
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: darkTheme
})
);`