ant-design / ant-design/compatible

[Bug] dark generateColorPalettes ignores theme bg — status colors mix against hardcoded #141414 instead of v4's @component-background

Open
#176 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.