emeks-studio / antd-custom-theme-generator Goto Github PK

View Code? Open in Web Editor NEW

30.0 3.0 6.0 373 KB

A simple way to create an antd theme css file with zero configuration.

Home Page: https://www.npmjs.com/package/@emeks/antd-custom-theme-generator

License: Apache License 2.0

JavaScript 100.00%

javascript reactjs antdesign react antd css custom-theme

antd-custom-theme-generator's Introduction

Antd custom theme generator

A simple way to create an antd theme css file with zero configuration.

Ant Design provides plenty of UI components, styled with less. You can customize the default theme modifying less variables (check their doc for multiple ways to achieve this), but the main issue being that you don't have a simple way to create a static .css file with zero configuration.

This package was created with Antd Design v4.6.6 and aims to ease the theme's customization process without having to install more dependencies yourself, set up less or eject your React project.

Usage

Generate custom theme styles

Define your custom theme creating a .less file overriding Antd's variables (by default: ./custom-theme.less).
- Example:
```
@primary-color: #9063cd;
@success-color: #a8d3c4;
```

Generate custom theme's .css file.

Option A:
Without installing this package:

$ npx @emeks/antd-custom-theme-generator

output > ./custom-theme.css

Option B:
Installing this package as a dev dependency:

$ npm i -E --save-dev @emeks/antd-custom-theme-generator

Then generating your theme:

$ generate-theme

default output > ./custom-theme.css

Replace "antd/dist/antd.css" import in your project, with the output file of your custom theme generated by this script (by default: ./custom-theme.css).

Options

Name	Default	Description
`--verbose` or `-v`		Prints a little bit more info for debugging purposes
`--watch` or `-w`		Keeps script running, recompile on `<customThemeFilePath>` change
`--antd`	./node_modules/antd	Path to the antd library directory
`--theme`	default	Antd theme you want to use as base (e.g. `dark` or `compact`) - Check available options
`<customThemeFilePath>`	./custom-theme.less	Path to the custom `.less` file with Antd variables overriden
`<generatedThemeFilePath>`	./custom-theme.css	Output Path to the compiled `.css` file containing your new theme

Notes:
The order of paths is important.

  $ generate-theme [--verbose] [--watch] [--antd <dir>] [--theme <theme>] [<customThemeFilePath>] [<generatedThemeFilePath>]

Examples

Generate a custom theme using dark theme as base:

$ npx @emeks/antd-custom-theme-generator --theme dark

Generate a custom theme using default theme as base specifying non default paths:

$ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css

FAQ

Q1: Which variables can I override?

You may override any variable exposed by Antd in this file.

Q2: Should I run this command every time I change my custom-theme.less file?

No, you could pass the -w argument to let the script observe <customThemeFilePath> file and recompile it if it changes.

Development

Inside package folder, link it globally:
```
$ npm link
```
Use the package in your project (with antd already installed and a <customThemeFilePath> file created as well):
```
$ generate-theme
```

antd-custom-theme-generator's People

Contributors

Stargazers

Watchers

Forkers

mehdiraized mleg pengcheng789 komodood serdar-irmak israel1281

antd-custom-theme-generator's Issues

using with Next js

I really want to thank you for what this amazing job you have done to allow customizing antd theme without any configuration.
I have a question, I have made it work in a react application but I was unable to use it in Next js projet.
May be I am doing wrong ?
is it planned to work with Next js ? if yes, can you explan how , please ?

Best Regards

Watch mode doesn't seem to work on Windows

$ generate-theme --watch src/glowsite-theme.less src/glowsite-theme.css
Generating theme...
AntDesign theme (./custom-theme.css) successfully generated.

The process pauses here but when I change the less file it doesn't pick up and regenerate.

Invalid cwd path for lessc command

Tested with a mac running node v14.15.4

This command that generates the css file via lessc is currently not correct when running as a npm script

Npm Script in my package.json:
"generate-theme": "generate-theme verbose ./styles/custom-theme.less ./styles/custom-theme.css"

The problem seems to be line 61. { cwd: __dirname },. When i remove this line it works properly.

When using cwd: __dirname the script tries to find lessc under /<fullpath-to-root-folder>/node_modules/@emeks/antd-custom-theme-generator. By removing line 61, the script instead defaults to /<fullpath-to-root-folder>/.

Generate theme path error on Windows

$ generate-theme './styles/custom-theme.less' './styles/custom-theme.css'
Error: Command failed: node_modules/less/bin/lessc --js /tmp/generated-theme.less C:\Users\Administrator\Desktop\test\rtimer'.\styles\custom-theme.css'
'node_modules' is not recognized as an internal or external command,
operable program or batch file.

at ChildProcess.exithandler (child_process.js:308:12)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1048:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) {

killed: false,
code: 1,
signal: null,
cmd: "node_modules/less/bin/lessc --js /tmp/generated-theme.less C:\Users\Administrator\Desktop\test\rtimer\'.\styles\custom-theme.css'"
}

cant use generate theme command

dynamic variables

hey, nice job.
i want to make variables dynamic using css variables, i mean change all of less variables to css variable when we are using less.render.i think we can achieve that with some plugins like https://github.com/miyamarisubs/less-plugin-custom-properties

Wrong docs examples for generate theme

The docs has wrong examples with the command to generate the themes with npx.

Where it says npx @emeks/antd-custom-theme-generator generate-theme it should say npx @emeks/antd-custom-theme-generator with out the generate-theme arg.

It would be nice to also add some examples of how to use it with the other args, for example npx @emeks/antd-custom-theme-generator verbose ./custom-theme.less ./custom-theme.css ./node_modules/antd dark