feat(ui): Change X logo to foreground color in dark mode by jordan-bott · Pull Request #8912 · clerk/javascript

jordan-bott · 2026-06-18T05:55:14Z

Description

Fixes an issue where the "X" logo blended into the background in dark mode when using the account portal. This implementation has the "X" logo use the foreground color when dark mode is enabled.

I've also added a scenario to test this in the sandbox (XProviderEnabled).

To test this feature with the XProviderEnabled scenario, visit this link: http://localhost:4000/sign-in?scenario=XProviderEnabled, or run scenario.setScenario('XProviderEnabled').
To toggle off the scenario run scenario.setScenario('XProviderEnabled')

A test has been added to packages/ui/src/common/__tests__/ProviderIcon.test.tsx that tests the new X mask-image path.
Test can be ran on it's own with pnpm vitest run src/common/__tests__/ProviderIcon.test.tsx from the /packages/ui directory.

Previous Behavior:

New Behavior:

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Bug Fixes
- Fixed X provider logo visibility in dark mode by recoloring it to match the foreground color, consistent with other provider icons.

vercel · 2026-06-18T05:55:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 18, 2026 6:07am
swingset	Ready	Preview, Comment	Jun 18, 2026 6:07am

changeset-bot · 2026-06-18T05:55:22Z

🦋 Changeset detected

Latest commit: 9f570a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-06-18T05:55:32Z

📝 Walkthrough

Walkthrough

Adds x and okx_wallet to the SUPPORTS_MASK_IMAGE set in ProviderIcon.tsx so the X provider logo renders using CSS mask-image with the foreground fill color instead of being invisible in dark mode. A test case validates the mask-image styling for the x provider. A new sandbox scenario XProviderEnabled is added to enable the oauth_x provider for manual testing.

Changes

X Provider Dark Mode Fix

Layer / File(s)	Summary
ProviderIcon mask-image fix, test, and changeset `packages/ui/src/common/ProviderIcon.tsx`, `packages/ui/src/common/__tests__/ProviderIcon.test.tsx`, `.changeset/x-logo-dark-mode.md`	`SUPPORTS_MASK_IMAGE` is extended to include `okx_wallet` and `x`, routing those providers through the `maskImage` + `--cl-icon-fill` styling branch. A new test case validates the x provider icon's mask-image styling behavior. The changeset documents this as a `@clerk/ui` patch.
XProviderEnabled sandbox scenario `packages/clerk-js/sandbox/scenarios/x-provider-enabled.ts`, `packages/clerk-js/sandbox/scenarios/index.ts`	New `XProviderEnabled` mock scenario that clones the single-session environment, injects `oauth_x` social provider config (authenticatable, enabled, not required), resets session state, and is re-exported from the scenarios index.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

Suggested reviewers

alexcarpenter
iagodahlem

Poem

🐰 A tiny dark X, once lost in the night,
Now gleams like the moon with its mask-image light.
A patch for the logo, a line or two changed,
The sandbox confirms it—all properly arranged!
Hop hop, little X, you're visible now. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main change: fixing the X logo visibility in dark mode by recoloring it to match the foreground color. This is the primary bug fix across all modified files.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

packages/ui/src/common/ProviderIcon.tsx (1)
10-10: ⚡ Quick win

Add a direct test for the new x mask-image path.

Line 10 extends SUPPORTS_MASK_IMAGE to include x, but the provided test context only shows coverage for okx_wallet. Please add an explicit id='x' ProviderIcon test to prevent regressions in this branch.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/common/ProviderIcon.tsx` at line 10, The SUPPORTS_MASK_IMAGE
constant in ProviderIcon.tsx now includes the 'x' provider, but there is no test
case validating this mask-image path. Add a new test case for the ProviderIcon
component that specifically verifies the behavior when id='x' is passed,
ensuring that the mask-image styling is correctly applied for the x provider,
similar to how the existing okx_wallet test case is structured. This will
prevent regressions when the mask-image implementation for the x provider is
modified in the future.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/ui/src/common/ProviderIcon.tsx`:
- Line 10: The SUPPORTS_MASK_IMAGE constant in ProviderIcon.tsx now includes the
'x' provider, but there is no test case validating this mask-image path. Add a
new test case for the ProviderIcon component that specifically verifies the
behavior when id='x' is passed, ensuring that the mask-image styling is
correctly applied for the x provider, similar to how the existing okx_wallet
test case is structured. This will prevent regressions when the mask-image
implementation for the x provider is modified in the future.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: cd3edff7-e07a-40d8-aa40-0ec9578945bf

📥 Commits

Reviewing files that changed from the base of the PR and between fb11e32 and 5e57cc7.

📒 Files selected for processing (4)

.changeset/x-logo-dark-mode.md
packages/clerk-js/sandbox/scenarios/index.ts
packages/clerk-js/sandbox/scenarios/x-provider-enabled.ts
packages/ui/src/common/ProviderIcon.tsx

github-actions · 2026-06-18T06:00:08Z

API Changes Report

Generated by Break Check on 2026-06-18T06:08:20.466Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on 9f570a7.}

alexcarpenter

Excellent, thanks @jordan-bott!

updates the X logo to be in foreground color in darkmode

5e57cc7

github-actions Bot added clerk-js ui labels Jun 18, 2026

Merge branch 'main' into jordan/x-logo-in-dark-mode

523dfe3

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 05:57 View deployment

vercel Bot deployed to Preview – swingset June 18, 2026 05:59 View deployment

coderabbitai Bot reviewed Jun 18, 2026

View reviewed changes

jordan-bott changed the title ~~Change X logo to foreground color in dark mode~~ feat(ui): Change X logo to foreground color in dark mode Jun 18, 2026

adds a test for the x mask-image test

9f570a7

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 06:06 View deployment

vercel Bot deployed to Preview – swingset June 18, 2026 06:07 View deployment

alexcarpenter approved these changes Jun 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): Change X logo to foreground color in dark mode#8912

feat(ui): Change X logo to foreground color in dark mode#8912
jordan-bott wants to merge 3 commits into
mainfrom
jordan/x-logo-in-dark-mode

jordan-bott commented Jun 18, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

github-actions Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

alexcarpenter left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jordan-bott commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

API Changes Report

Summary

No API Changes Detected

Uh oh!

alexcarpenter left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jordan-bott commented Jun 18, 2026 •

edited

Loading

vercel Bot commented Jun 18, 2026 •

edited

Loading

changeset-bot Bot commented Jun 18, 2026 •

edited

Loading

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

github-actions Bot commented Jun 18, 2026 •

edited

Loading