Skip to content

Update theming example to remove styled-components#8039

Open
Copilot wants to merge 3 commits into
mainfrom
copilot/update-theming-example
Open

Update theming example to remove styled-components#8039
Copilot wants to merge 3 commits into
mainfrom
copilot/update-theming-example

Conversation

Copilot AI commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Updates the theming example so it no longer depends on styled-components or the legacy styled-react package.

Changelog

New

N/A

Changed

  • The theming example now imports ThemeProvider, BaseStyles, and useTheme from @primer/react.
  • ThemeProvider runs in contextOnly mode because theme attributes are already applied to <html> for App Router hydration.

Removed

  • Removed the styled-components SSR registry.
  • Removed @primer/styled-react and styled-components from the theming example dependencies.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; examples-only change with no published package impact

Testing & Reviewing

Review the theming example’s App Router layout and theme toggle flow.

Merge checklist

Copilot AI and others added 2 commits June 23, 2026 20:36
@joshblack
Migrate theming example off styled-components
7241eed 
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
@joshblack
Document theming provider wrapper behavior
f94dc7c 
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
@changeset-bot

changeset-bot Bot commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 6898feb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

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

Copilot AI requested a review from joshblack June 23, 2026 20:45
@joshblack joshblack marked this pull request as ready for review June 23, 2026 20:46
@joshblack joshblack requested a review from a team as a code owner June 23, 2026 20:46
@joshblack joshblack added skip changeset This change does not need a changelog integration-tests: skipped manually Changes in this PR do not require an integration test labels Jun 23, 2026
@joshblack joshblack enabled auto-merge June 23, 2026 20:47
Copilot AI reviewed Jun 23, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the examples/theming Next.js App Router example to stop relying on styled-components / @primer/styled-react, and instead use theming APIs directly from @primer/react (including running ThemeProvider in contextOnly mode since theme attributes are already applied to <html>).

Changes:

  • Removed the styled-components SSR registry and any remaining @primer/styled-react usage from the theming example.
  • Updated the App Router layout to use ThemeProvider/BaseStyles from @primer/react with contextOnly.
  • Removed @primer/styled-react and styled-components from the theming example dependencies.
Show a summary per file
File Description
package-lock.json Removes theming workspace’s @primer/styled-react / styled-components dependencies (but needs lock/version alignment).
examples/theming/src/app/registry.tsx Deletes the styled-components SSR registry implementation.
examples/theming/src/app/layout.tsx Switches theming wrapper to @primer/react ThemeProvider (contextOnly) + BaseStyles.
examples/theming/src/app/components/ThemePreference/ThemePreference.tsx Imports useTheme from @primer/react instead of @primer/styled-react.
examples/theming/package.json Removes @primer/styled-react and styled-components from the theming example dependencies.

Copilot's findings

  • Files reviewed: 4/5 changed files
  • Comments generated: 1

Comment thread examples/theming/src/app/layout.tsx Outdated
@joshblack
Potential fix for pull request finding
6898feb 
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@github-actions github-actions Bot temporarily deployed to storybook-preview-8039 June 23, 2026 20:56 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@joshblack joshblack Awaiting requested review from joshblack

@francinelucca francinelucca Awaiting requested review from francinelucca

At least 1 approving review is required to merge this pull request.

Assignees

@joshblack joshblack

Copilot code review Copilot

Labels

integration-tests: skipped manually Changes in this PR do not require an integration test skip changeset This change does not need a changelog

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@joshblack