antd text color can not be changed

[Hyjal]

I use this plugin for dynamic theme changing;

Most styles work well, except text color

As you see, there are two classes of elements. The original styles override my styles. How can I fix that.

[Zohaib Ijaz]

@HyjalHaven it seems that your import order is not correct. Kindly share more info, how are you importing your styles in main.less/index.less. What about if you disable/remove dynamic styling?

[Hyjal]

`
@import 'variables.less';

@import './routes/Home/Home.less';
@import './routes/List/BasicList.less';
@import './routes/PrimeObject/PrimeObjectInfo.less';
@import './routes/User/Login.less';
@import './layouts/NewLayout.less';
@import './layouts/PageHeaderLayout.less';
@import './components/CaseAnalysis/index.less';
@import './components/CaseStatistics/Components/FilterMenu.less';
@import './components/CaseStatistics/Components/index.less';
@import './components/HeaderMenu/index.less';
@import './components/Login/index.less';
@import './components/PageHeader/index.less';
@import './components/SiderMenu/index.less';
@import './components/SiderMenu/myIndex.less';

@guidingTextShadow: 0 2px 4px rgba(0, 0, 0, 0.15);

html,
body,
:global(#root) {
height: 100%;
min-width: 1190px;
position: relative;
}

body {
background-color: @layout-body-background !important;
}

:global {
.ant-layout {
min-height: 100%;
}

.ant-card-head-title,
.ant-modal-title {
font-weight: bold !important;
}

.ant-table-content {
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15) !important;

th {
  text-shadow: @guidingTextShadow !important;
}

}

.ant-card-body {
height: 100% !important;
}
}

:global {
.screen-lg,
.screen-xl,
.screen-md,
.screen-sm,
.screen-xs {
height: 100%;
min-height: 100%;
}
}

:global(.treeNode) {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
}

canvas {
display: block;
}

body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.globalSpin {
width: 100%;
margin: 40px 0 !important;
}

// temp fix for ant-design/ant-design@a1fafb5
:global {
.ant-spin-container {
overflow: visible !important;
}
}

//list paging align
:global {
.ant-divider-inner-text {
& > span {
text-shadow: @guidingTextShadow;
}
}

.ant-list-pagination {
position: absolute;
bottom: 4px;
right: 4px;
width: 90%;
box-sizing: border-box;

.ant-pagination-total-text {
  text-shadow: @guidingTextShadow;
  user-select: none;
}

}
}

`

This is the index.less for now. I'm going to test the order issues to see if import sequence has something to do with the problem.

No such problem without dynamic styling.(say every style follows variables.less, and dynamic means 'window.less.modifyVars({})')

BTW, the plugin works with Antd Pro

[Zohaib Ijaz]

@HyjalHaven Can you create a demo project and reproduce this bugs, I'll look into that and try to find the cause. Share the repo/code with me.

[Hyjal]

Sure, I'm going to do a demo this weekend. Hope I could find some hints.

[Yuval Stein]

Is there anything new on this issue? Doesn't work for me either 🤕

[Zohaib Ijaz]

@CY3ER-C0D3R @HyjalHaven Have a look at this demo
https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

Here is the code, this might help you, how to setup

https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra