Skip to content

fix(theme): ensure colorLink follows colorPrimary when not explicitly set - #38517

Merged
sadpandajoe merged 9 commits into
apache:masterfrom
LevisNgigi:fix-theme
Mar 19, 2026
Merged

fix(theme): ensure colorLink follows colorPrimary when not explicitly set#38517
sadpandajoe merged 9 commits into
apache:masterfrom
LevisNgigi:fix-theme

Conversation

@LevisNgigi

@LevisNgigi LevisNgigi commented Mar 9, 2026

Copy link
Copy Markdown
Contributor

User description

SUMMARY

This PR fixes an issue where Superset themes generated from the Ant Design Theme Builder did not correctly apply link colors when only colorPrimary was overridden.
In Ant Design v5, colorLink is derived from colorInfo, not colorPrimary. When a user theme only defined colorPrimary, Superset rendered links using the base theme's default teal color instead of the intended palette. If colorPrimary is provided but colorLink is not, colorLink is derived from colorPrimary before computing Ant Design tokens.
After merging the base theme and user config, if the user set colorPrimary but not colorLink, the merged colorLink is updated to match the merged colorPrimary.
Explicit colorLink values provided by the user are always respected. The derivation only applies when colorLink is absent.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:
Screenshot from 2026-03-09 15-56-59

AFTER:
Screenshot from 2026-03-09 15-55-22

TESTING INSTRUCTIONS

1)Open the Ant Design Theme Builder.
2)Set the Primary Color to a custom color (e.g., #eb2f96).
3)Export the theme config
4)Apply this configuration as a Superset theme.
5)Navigate to pages containing links (e.g., dashboards list, charts list).
Verify that:
6)Links follow the primary color palette instead of appearing teal/green.
7)Explicitly setting colorLink in the theme config still overrides the derived value.
8} If we choose to "inherit" link and info color in ant design theme builder, it should be respected.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • [x ] Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CodeAnt-AI Description

Ensure links use primary color when only primary is set in theme

What Changed

  • When a user theme provides a custom primary color but does not set a link color, links now use the provided primary color instead of falling back to the base theme's default
  • Explicit link color values supplied by the user are still respected and not overridden
  • The same behavior applies both when merging a user theme with a base theme and when applying a theme via the theme update flow; tests were added to cover these scenarios

Impact

✅ Links match the chosen brand/primary color
✅ Consistent theme appearance after importing/exporting Ant Design themes
✅ Explicit link color overrides are preserved

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@bito-code-review

bito-code-review Bot commented Mar 9, 2026

Copy link
Copy Markdown
Contributor

Bito Automatic Review Failed - Technical Failure

Bito encountered technical difficulties while generating code feedback . To retry, type /review in a comment and save. If the issue persists, contact support@bito.ai and provide the following details:

Agent Run ID: 9fab0b90-31de-49ae-a847-7524f6cb2504

@dosubot dosubot Bot added change:frontend Requires changing the frontend global:theming Related to theming Superset packages labels Mar 9, 2026
@codeant-ai-for-open-source codeant-ai-for-open-source Bot added the size:M This PR changes 30-99 lines, ignoring generated files label Mar 9, 2026
@bito-code-review

bito-code-review Bot commented Mar 9, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #c67624

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 91c91fc..a90d0d7
    • superset-frontend/packages/superset-core/src/theme/Theme.test.tsx
    • superset-frontend/packages/superset-core/src/theme/Theme.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@codeant-ai-for-open-source codeant-ai-for-open-source Bot added size:M This PR changes 30-99 lines, ignoring generated files and removed size:M This PR changes 30-99 lines, ignoring generated files labels Mar 9, 2026
@LevisNgigi LevisNgigi closed this Mar 10, 2026
@LevisNgigi LevisNgigi reopened this Mar 10, 2026
@bito-code-review

bito-code-review Bot commented Mar 10, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #7415d5

Actionable Suggestions - 0
Additional Suggestions - 1
  • superset-frontend/packages/superset-core/src/theme/Theme.tsx - 1
    • Incorrect documentation comment · Line 70-70
      The comment on line 70 incorrectly states that colorLink 'derives from colorInfo' in Ant Design v5. According to official Ant Design documentation, colorLink is an independent seed token, not derived from colorInfo or colorPrimary. The code's logic of setting colorLink to match colorPrimary when not explicitly set is correct for consistency, but the comment should be updated to reflect this.
      Code suggestion
       @@ -70,4 +70,1 @@
      -      // In Ant Design v5, colorLink derives from colorInfo, not colorPrimary.
      -      // Currently we expectlinks to follow the brand/primary color. When the user
      -      // overrides colorPrimary without explicitly setting colorLink, update the
      -      // merged colorLink so links match the new primary palette.
      +      // In Ant Design v5, colorLink is an independent seed token. However, we set it to match the primary color for consistency when the user overrides colorPrimary without explicitly setting colorLink.
Review Details
  • Files reviewed - 2 · Commit Range: 08c7604..9d6cf94
    • superset-frontend/packages/superset-core/src/theme/Theme.test.tsx
    • superset-frontend/packages/superset-core/src/theme/Theme.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@codeant-ai-for-open-source codeant-ai-for-open-source Bot added size:M This PR changes 30-99 lines, ignoring generated files and removed size:M This PR changes 30-99 lines, ignoring generated files labels Mar 10, 2026
@codeant-ai-for-open-source

Copy link
Copy Markdown
Contributor

Sequence Diagram

This PR updates theme creation and configuration so that when a user sets a primary color but does not set a link color, the link color is derived from the primary color before Ant Design tokens are computed, while still respecting any explicit link color overrides.

sequenceDiagram
    participant Caller
    participant Theme
    participant AntdTokens
    participant UI

    Caller->>Theme: Create or update theme with user and base config
    Theme->>Theme: Merge base and user config
    Theme->>Theme: If primary set and link missing, set link to primary
    Theme->>AntdTokens: Compute Ant Design tokens from updated config
    AntdTokens-->>Theme: Return design tokens including link color
    Theme-->>UI: Provide theme where links follow primary color
Loading

Generated by CodeAnt AI

@codeant-ai-for-open-source codeant-ai-for-open-source Bot added size:M This PR changes 30-99 lines, ignoring generated files and removed size:M This PR changes 30-99 lines, ignoring generated files labels Mar 11, 2026
@codeant-ai-for-open-source

Copy link
Copy Markdown
Contributor

Sequence Diagram

This PR updates theme configuration so that when a theme overrides the primary color without explicitly setting a link color, the link color is derived from the primary color both during initial theme creation and later configuration updates.

sequenceDiagram
    participant Caller
    participant Theme
    participant AntDesign

    Caller->>Theme: fromConfig(user theme, base theme)
    Theme->>Theme: Merge base and user themes
    Theme->>Theme: If primary set and link missing, set link to primary
    Theme-->>Caller: Return Theme instance with updated tokens

    Caller->>Theme: setConfig(new theme config)
    Theme->>Theme: Normalize config and default link from primary if missing
    Theme->>AntDesign: Compute design tokens
    AntDesign-->>Theme: Return computed tokens
Loading

Generated by CodeAnt AI

@LevisNgigi LevisNgigi closed this Mar 11, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🎪 Showtime is building environment on GHA for 4dd3d73

@github-actions

Copy link
Copy Markdown
Contributor

🎪 Showtime deployed environment on GHA for 4dd3d73

Environment: http://35.88.81.211:8080 (admin/admin)
Lifetime: 48h auto-cleanup
Updates: New commits create fresh environments automatically

@michaelmorera-preset

Copy link
Copy Markdown

The testing for this ticket was completed. The application is working as expected. Ant design is working correctly when the user uses the primary color changed.

Scenario
Verify that all links follow the primary color palette instead of appearing teal/green. (default)

Steps

1)Open the Ant Design Theme Builder.
2)Set the Primary Color to a custom color (e.g., #eb2f96).
3)Export the theme config
4)Apply this configuration as a Superset theme.
5)Navigate to pages containing links (e.g., dashboards list, charts list).

Expected

  • Links follow the primary color palette instead of appearing teal/green. ✅
  • Explicitly setting colorLink in the theme config still overrides the derived value. ✅
  • If we choose to "inherit" link and info color in ant design theme builder, it should be respected. ✅

Ant Design JSON - Just Primary

{
"token": {
"colorPrimary": "#eb2f96"
},
"algorithm": "default"
}

Ant Design JSON - Color Link

{
"token":{
"colorPrimary": "#ec4899",
"colorLink": "#ff0000"
}
}

Evidence

Ant design primary color testing
Ant design primary color testing

Color link theme testing
Color Link Theme testing

Ant design theme editor testing primary color
Antdesginthemeeditortestingprimarycolor

@github-actions github-actions Bot removed 🎪 🛑 showtime-trigger-stop 🎪 ⌛ 48h Environment expires after 48 hours (default) labels Mar 19, 2026
@sadpandajoe
sadpandajoe merged commit 65f13f7 into apache:master Mar 19, 2026
106 of 112 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:frontend Requires changing the frontend global:theming Related to theming Superset packages size/M size:M This PR changes 30-99 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants