fix(swingset): keep connected account icons visible in dark mode by austincalvelage · Pull Request #10376 · clerk/javascript

austincalvelage · 2026-10-23T00:52:08Z

Description

Fix the black Apple icon in Swingset's connected-account examples in dark mode. Mark Apple as monochrome in the sample data and preserve that setting when a provider becomes a connected account.

The shared production path already handles Apple, GitHub, AgentID, Vercel, and X as monochrome icons. This PR fixes the missing Apple flag in the Swingset fixtures and preserves the monochrome flag for any provider when connecting. The screenshots show Apple because it was the affected built-in fixture.

Before	After

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

changeset-bot · 2026-10-23T00:52:12Z

🦋 Changeset detected

Latest commit: 835ada5

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

vercel · 2026-10-23T00:52:14Z

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Oct 23, 2026 12:53am UTC
swingset	Ready	Preview	Oct 23, 2026 12:53am UTC

coderabbitai · 2026-10-23T00:52:28Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Source mode: Auto
Repository: clerk/javascript
Branch: austin/connected-accounts-dark-mode-fix
File: .coderabbit.yaml
Commit: 835ada5
Layers: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Team
Run ID: 5569fe07-86ee-4336-9819-d554e32b63b4

📥 Commits

Reviewing files that changed from the base of the PR and between 17eecac and 835ada5.

📒 Files selected for processing: 3

.changeset/fix-swingset-apple-icon.md
packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts
packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

clerk/clerk_go (manual)
clerk/dashboard (manual)
clerk/accounts (manual)
clerk/backoffice (manual)
clerk/clerk (manual)
clerk/clerk-docs (manual)
clerk/cloudflare-workers (manual)
clerk/clerk-android (auto-detected)
clerk/clerk-ios (auto-detected)
clerk/cli (auto-detected)

Included review availability: This review used your included allowance. 3 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 6 reviews per hour.

📝 Walkthrough

The Apple provider fixtures now set monochromeIcon to true. The onConnect callback copies the selected provider’s value to the newly added account. The ConnectionError story fixture also sets the flag. The changeset file adds empty YAML frontmatter.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Suggested reviewers: alexcarpenter

Merge Risk: ⚪ Minimal · up to 835ad

The icon metadata is preserved through the example connection flow; no issue identified here needs to be resolved before merging.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: keeping connected-account icons visible in dark mode.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description states the PR fixes the black Apple icon in Swingset's connected-account examples in dark mode. It says the sample data now marks Apple as monochrome. It also says the monochrome setti…

Full details: Description check

Explanation

The description states the PR fixes the black Apple icon in Swingset's connected-account examples in dark mode. It says the sample data now marks Apple as monochrome. It also says the monochrome setting is preserved when a provider becomes a connected account. This matches the changeset, which sets monochromeIcon for Apple fixtures and copies the flag in onConnect. The description is specific and on-topic, so the check passes.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.

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

pkg-pr-new · 2026-10-23T00:55:11Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10376

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10376

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10376

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10376

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10376

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10376

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10376

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10376

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10376

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10376

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10376

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10376

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10376

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10376

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10376

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10376

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10376

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10376

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10376

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10376

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10376

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10376

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10376

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10376

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10376

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10376

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10376

commit: 835ada5

fix(swingset): keep connected account icons visible in dark mode

835ada5

vercel Bot deployed to Preview – swingset October 23, 2026 00:53

View deployment

alexcarpenter approved these changes Oct 23, 2026

View reviewed changes

austincalvelage merged commit a4b0769 into main Oct 23, 2026
57 checks passed

austincalvelage deleted the austin/connected-accounts-dark-mode-fix branch October 23, 2026 15:01

coderabbitai Bot mentioned this pull request Oct 23, 2026

fix(mosaic): use one filled IconFrame style for user profile icons #10391

Merged

1 of 9 tasks

Navigation Menu

Repository navigation

fix(swingset): keep connected account icons visible in dark mode - #10376

fix(swingset): keep connected account icons visible in dark mode#10376
austincalvelage merged 1 commit into
mainfrom
austin/connected-accounts-dark-mode-fix

austincalvelage commented Oct 23, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 23, 2026

Uh oh!

vercel Bot commented Oct 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 23, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 23, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

austincalvelage commented Oct 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Oct 23, 2026

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

pkg-pr-new Bot commented Oct 23, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

austincalvelage commented Oct 23, 2026 •

edited

Loading

vercel Bot commented Oct 23, 2026 •

edited

Loading

coderabbitai Bot commented Oct 23, 2026 •

edited

Loading