ant-design / ant-design/compatible
[Bug] dark generateColorPalettes ignores theme bg — status colors mix against hardcoded #141414 instead of v4's @component-background
- Dominant language
- TypeScript
- Stars
- 93
- Forks
- 29
- PR merge metrics
- No merged PRs in 30d
Description
# [Bug] dark `generateColorPalettes` ignores theme bg — status colors mix against hardcoded `#141414` instead of v4's `@component-background`
## Summary
`@ant-design/compatible`'s dark theme `generateColorPalettes` does not forward
`backgroundColor` to `@ant-design/colors`' `generate()`, so the dark status
palettes (success / warning / error / info backgrounds and borders) are always
mixed against the hardcoded `#141414` fallback inside `@ant-design/colors`.
v4 LESS mixed those palettes against `@component-background`, a user-overridable
variable (commonly customized in light-on-dark UIs). As a result, projects that
migrate from v4 LESS to `@ant-design/compatible` with a non-`#141414` dark
background see noticeably darker Alert / Tag / Notification / etc. backgrounds.
## Reproduction
Set a dark theme with a custom `colorBgContainer` (e.g. `#262626` instead of the
default `#000` / mixed-to-`#141414`):
```ts
import { ConfigProvider, theme as themeV6 } from 'antd';
import { darkTheme, darkAlgorithm } from '@ant-design/compatible';
```
## Expected (v4 LESS behavior)
`@gold-1` in `antd@4 lib/style/themes/dark.less`:
```less
@component-background: #262626; // user override
@gold-1: mix(colorPalette('@{gold-base}', 8), @component-background, 15%);
// → #3a3020
```
→ `Alert[type="warning"]` background ≈ `#3a3020`.
## Actual
`@ant-design/compatible/lib/theme/dark.js`:
```js
const generateColorPalettes = (baseColor) => {
const colors = generate(baseColor, { theme: 'dark' });
// ^ no backgroundColor — falls back to #141414
// ...
};
```
`@ant-design/colors/lib/generate.js`:
```js
if (opts.theme === 'dark') {
return darkColorMap.map(({ index, amount }) =>
new FastColor(opts.backgroundColor || '#141414').mix(patterns[index], amount).toHexString()
);
}
```
→ `colorWarningBg` ≈ `#2b2111` regardless of the actual theme background, and
the Alert looks visibly darker than its v4 counterpart against `#262626`.
## Suggested fix
Pass the seed's `colorBgBase` (or `colorBgContainer`, depending on intent)
through to `generate()`:
```diff
- const generateColorPalettes = (baseColor) => {
- const colors = generate(baseColor, { theme: 'dark' });
+ const generateColorPalettes = (baseColor, opts) => {
+ const colors = generate(baseColor, { theme: 'dark', backgroundColor: opts?.colorBgBase });
```
…and thread the seed through `derivative` so `generateColorPalettes` receives
it. This restores parity with v4 LESS and matches user intent when `colorBgBase`
is overridden.
## Affected versions
- `@ant-design/compatible`: 5.1.4 (also 5.1.2 — same code path)
- `@ant-design/colors`: 8.0.1
- `antd`: 6.3.7
## Workaround
Bypass the algorithm by precomputing the palette in app code:
```ts
import { generate } from '@ant-design/colors';
const c = generate('#faad14', { theme: 'dark', backgroundColor: '#262626' });
const token = {
colorWarningBg: c[0], colorWarningBorder: c[2], colorWarning: c[5], /* etc. */
};
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in lib/theme/dark.js at generateColorPalettes and trace the derivative path that supplies its seed. Verify how colorBgBase and colorBgContainer are represented, then confirm that generated dark status palettes use the customized background instead of the #141414 fallback; done means the affected Alert, Tag, and Notification colors match the intended background behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100