GithubHelp home page GithubHelp logo

luffyzh / dynamic-antd-theme Goto Github PK

View Code? Open in Web Editor NEW
250.0 250.0 29.0 2.69 MB

🌈 A simple plugin to dynamic change ant-design theme whether less or css.

Home Page: https://dynamic-antd-theme.luffyzh.now.sh/

License: MIT License

JavaScript 20.49% CSS 79.51%
ant-design antd css dynamic theme

dynamic-antd-theme's People

Contributors

dependabot[bot] avatar luffyzh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

dynamic-antd-theme's Issues

关于二次封装的组件的样式换肤问题。

我这边的组件库是基于antd 3.0 版本的组件二次封装的,引用该组件换肤大部分颜色可以置换,二次封装过的组件修改过颜色 无法换色,求给点思路和解决方案

微服务 - 主题颜色问题

我用的是umi中的qiankun微服务应用,切换到子应用时,你的主题颜色被默认的antd的颜色覆盖了,原因可能是因为子应用的样式优先级更高,不知道这个可以处理吗
image

第一次打开站点时没有应用primaryColor(该属性设置未起到作用)

根据源码:

componentDidMount() {
const { storageName, themeChangeCallback, customCss } = this.props;
// initial storage color
const storageColor = window.localStorage.getItem(storageName);
if (storageColor) {
changeAntdTheme(storageColor, { customCss });
document.getElementById('change_antd_theme_color').style.backgroundColor = storageColor;
if (themeChangeCallback) {
themeChangeCallback(storageColor);
}
}
}

组件加载的时候没有使用设置的primaryColor属性去设置颜色,只是更改了picker显示的颜色。

而用户第一次打开站点的时候,localeStorage里是没有颜色的键值的,所以不会调用到changeThemeColor修改主题颜色。

修改建议:
在storageColor为空时使用primaryColor为参数调用changeThemeColor函数。

Color does not change when hovering input

When hovering input, the color does not change. Though it is changed when the input is focused.

image

Please be noted, I am using antd version 4.14.0

The color is over writing here:

image

primary-shadow-color不应该使用透明度

image
例如带有固定列的表格,在横向拖动时,已选择行会因为背景变成透明色而发生文字重叠。
image
image
微吐槽:这个shadow颜色的算法是否可以优化?目前算出来的结果和antd原版差距较大,颜色普遍偏灰暗。

如何本地调试呢

我本地用npm link了项目和这个插件,
我修改了theme.css,然后run pre build 然后build。发现代码是变了,但是我新写的代码在style里并没有出现,想问一下如何本地调试你的代码

antd bug

image
可以更改组件的主题色 但是无法改变其他用了主题色的div等
image

Add more variables other than primary-color

Would it be a good idea to add other variables to the configuration? As far as I can tell you can only change the main color, but it would be worth adding options for warning and success colors, border-radius, active-color etc. I see there's a similar thread on this but sadly I don't speak mandarin :(

dynamic-antd-theme

使用插件 大部分样式都会更改主题色 但是输入框这种表单类的不生效
image

能否不通过colorPicker,而是传color来改变主题色

首先,感谢亲提供了这么方便的组件 (づ ̄3 ̄)づ╭❤~
不过,现在的组件只能通过自带的colorPicker选择了颜色后改变theme

我现在有这样一个需求,有以下2个按钮

<Button onClick={()=>this.setState(color: 'red')}>点击变红色</Button>
<Button onClick={()=>this.setState(color: 'green')}>点击变绿色</Button>

能否给该组件填加个props,可以通过手动传入的颜色来改变theme,比如

<DynamicAntdTheme customColor={this.state.color} />

这样,不单单只能通过colorPicker修改颜色了,也能通过手动传颜色值改变颜色 😇

Vue里如何携带customCSS

按照文档来走的话,演示的参数写到了customCSS的属性,但不论是作为变量还是字符都会出错。
image

Add the demo code in example folder

Hi,
Appreciate your great effort for this wonderful package. Could you add the demo code in a folder called "example" , its better to have all the example codes in a seperate example folder. It will be easy to follow the example by the developers also .

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.