https://github.com/antvis/theme-set
💄 Customize theme for G2, G2Plot of AntV（孵化中）
https://github.com/antvis/theme-set
antvis g2 g2plot theme
Last synced: 12 months ago
JSON representation
💄 Customize theme for G2, G2Plot of AntV（孵化中）
- Host: GitHub
- URL: https://github.com/antvis/theme-set
- Owner: antvis
- License: mit
- Created: 2021-04-01T16:24:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-24T05:55:38.000Z (about 4 years ago)
- Last Synced: 2024-10-29T21:05:31.362Z (over 1 year ago)
- Topics: antvis, g2, g2plot, theme
- Language: TypeScript
- Homepage: https://theme-set.antv.vision
- Size: 33.9 MB
- Stars: 35
- Watchers: 21
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.en-US.md
- License: LICENSE.md
Awesome Lists containing this project
README
[简体中文](./README.md) | English
ThemeSet
ThemeSet is an online tool theme configs generator.
## 💡 How to use
G2 提供了自定义主题机制以允许用户切换、定义图表主题。利用 ThemeSet 工具，工程师或者设计师可以在线设计图表通用主题规范，然后导出或复制主题配置，直接使用 `registerTheme` API 进行主题定制。
** Use in G2**. More details in [自定义主题 | G2](https://g2.antv.vision/zh/docs/api/advanced/register-theme)
```ts
import { registerTheme } from '@antv/g2';
// method 1:
registerTheme('newTheme', {
// Theme configs exported of copied
});
chart.theme('newTheme');
// method 2:
chart.theme({
// Theme configs exported of copied
});
```
** Use in G2Plot**. More details in [图表主题 | G2Plot](https://g2plot.antv.vision/zh/docs/api/options/theme)
```ts
import { G2, Line } from '@antv/g2plot';
// method 1:
G2.registerTheme('newTheme', {
// Theme configs exported of copied
});
const plot = new Line({
// ... other configurations of Line plot
theme: 'newTheme',
});
// or
plot.update({ theme: 'newTheme' });
// method 2:
const plot = new Line({
// ... 折线图的其他配置
theme: {
// Theme configs exported of copied
},
});
// 或者
plot.update({
theme: {
// Theme configs exported of copied
},
});
```
## ⌨️ Contribute
```bash
# Clone repository
git clone git@github.com:antvis/theme-set.git
# Enter file dir
cd theme-set
# Install dependencies and start
npm install && npm start
# Open website: http://localhost:8000
```
## 📧 Contact us
DingTalk Group: 30233731
